使用 jquery 劫持表单值

Question

我试图在使用 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>

Answer 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，因此它们将始终未定义。

有效的 fiddle 是 here

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

Answer 2

您可以在 JavaScript

中 属性选择器

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

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

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

Fiddle

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

使用 jquery 劫持表单值

Using jquery to hijack form values

html

forms

model-view-controller

jquery