使用 jquery 劫持表单值答案

【问题标题】：Using jquery to hijack form values使用 jquery 劫持表单值
【发布时间】：2015-06-17 07:08:22
【问题描述】：

我正在尝试在使用 jquery 提交之前检查我的表单值。当我尝试使用 alert() 检查值时，值显示为未定义。

 <form id="test" method ="get">           
 username<br>
 <br>
 <input type="text" name="firstfield">
 password 
 <input type="text" name="secondfield">
 <input type="submit" id="_click" value="click">
 </form>    
<script>
$(document).ready(function () {
    $('#_click').click(function () {
        var uname = $('#firstfield').val();
        var pass = $('#secondfield').val();
        alert(uname);
        alert(pass);
    });//click     
});//documentready
</script>

【问题讨论】：

firstfield 和 secondfield 是 name 属性的值，而 # 用于通过 ID 属性的值选择 Working

标签： jquery html forms model-view-controller

【解决方案1】：

将您的输入值更改为此

 <input type="text" name="firstfield" id="firstfield">
 password 
 <input type="text" name="secondfield" id="secondfield">

这段代码：

$('#firstfield').val();
$('#secondfield').val();

，正在寻找 id 分别为 firstfield 和 secondfield 的元素。

您的 <input> 元素没有 id，因此它们将始终未定义。

一个工作小提琴是here

$(document).ready(function () {
    $('#_click').click(function () {
        var uname = $('#firstfield').val();
        var pass = $('#secondfield').val();
        alert(uname);
        alert(pass);
    });    
});

【讨论】：

谢谢大家。我现在看到，如果没有 ID 属性，这将无法按预期工作。我已经更正了我的代码，它现在可以工作了。
不客气。我很高兴它有效。如果它解决了您的问题，您能否将问题标记为正确。谢谢

【解决方案2】：

您可以在 JavaScript 中属性选择器

var uname = $('[name=firstfield]').val();
var pass = $('[name=secondfield]').val();

这段代码实际上是检查元素的name属性。

您的输入元素没有id 属性，因此浏览器无法找到它们（# 是id）

Fiddle

属性选择器和CSS3选择器非常有用，了解更多here

【讨论】：