jQuery .val()对输入框无效

25

我正在尝试捕获我的输入字段的值,并在我的表单类中有以下方法来实现:

getData: function() {
    var fields = ['name', 'email', 'message'];
    $.each(fields, function(index, el) {
        form.data[el] = $('#'+el).val();
        console.log(form.data[el]);
    });
},

(不用管“select”字段,那是一个自定义的选择框,我将需要以不同的方式处理它) 我在表单改变事件上执行捕获。输入字段都有适当的ID,看起来像这样:

(nevermind the 'select' field, that's a custom made select box and I'll have to handle that one differently) 我在表单更改事件上执行捕捉。 输入字段都有正确的ID,看起来像这样:

<input type="text" id="name">
<input type="email" id="email">
<textarea name="message" id="message"></textarea>

现在,当我在这些字段中输入内容时,我只能从文本区域获得值,而其他输入字段则返回未定义。

我还要注意到,这个表单是通过Ajax加载的,但由于它通常会捕获字段的更改事件,所以我怀疑这不是问题的原因。


6
请确认您没有其他具有重复id的元素引起问题,因为那样应该可以工作。 - Nick Dickinson-Wilde
当然可以,实际上这个语句需要通过name属性进行映射。无论如何,用自己的答案关闭问题。 - dreamweiver
补充一下@NickDickinson-Wilde的观点 - 我刚遇到一个情况,其中已经有逻辑通过jQuery更新输入字段。这也是一个需要检查的好方法,一旦我将新的.val()逻辑放在现有逻辑之后,它就开始工作了。 - shanestreator
5个回答

41

我解决了这个问题。

我在我的输入字段上漏掉了name属性,出于某种原因,.val()需要它才能工作。


9
我也尝试了这个方法,能否有人解释一下为什么有效呢? - J Sargent
1
根据W3C的建议,只有在输入字段具有控件名称时,HTML表单才能发送数据。ID不计入其中。https://www.w3.org/TR/html401/interact/forms.html#successful-controls - Whip

11
根据W3C的建议,只有当输入字段具有控件名称时,html表单才能发送数据。ID不算数。好吧,这很好(实际上是无价的),但是如果你看this examplejQuery .val()会让人相信它可以愉快地使用id=作为选择器。我的测试表明,不仅必须有id=name=,而且它们必须相同。当它起作用时,我非常喜欢这个东西!

4
不需要同时拥有name和id属性才能使用val方法。我进行了测试,只有id属性时,.val()也可以正常工作。

也许在最近的jQuery版本中,.val()的行为已经发生了变化。 - Nicolas

1
我曾经遇到的最愚蠢的调试问题。花了三天时间寻找问题,最终发现缺少了链接到jquery库的代码。难以置信 :D <script src="https://code.jquery.com/jquery-3.5.0.js"></script>

1
感谢@nick-dickinson-wilde的评论。 我遇到了同样的问题。我想获得以下输入框的值。 <input id="ipValue" class="form-control" type="text" value="@Model.IPValue" /> 我很惊讶以下代码不起作用。 javascript var ipValue = $("#ipValue").val(); 我没有注意到我有一个具有相同id的元素 <div class="col-3" id="ipValue">

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接