Question

我正在尝试使用jquery从表单中获取数据并使用此代码停止表单提交：

$form = $('form#signup')
$form.submit(function(event){
  event.preventDefault();
  var $input=$('#signup :input')
  console.log($input.username)
  alert($input.username)
})

但表单仍然是post的数据，并且没有出现警告框。另外，firebug会显示错误$ is not defined并且Node.js崩溃

表格（写在玉中）：

html
  head
    script(src='javascripts/signupValidation.js')
    script(src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js')
    script(src='javascripts/validator.js')
  body
    form(id='signup',method='post',action='/signup')
      label Firstname
      input(type='text', name='firstname')
      label Lastname
      input(type='text', name='lastname')
      label Username
      input(type='text', name='username')
      label Password
      input(type='password', name='password')
      label Password again
      input(type='password', name='password2')
      label Email
      input(type='email', name='email')

  input(type='submit',value='Sign up', onclick="")

Answer 1

如果与表单相关的JS位于文件signupValidation.js中，则需要在 jquery include之后将包含该文件的脚本调用移动到。

我可能会稍微清理一下表单代码：

$('form#signup').on('submit', function(event){ event.preventDefault(); var $input = $(this).find('[name=username]'); console.log($input.val()); alert($input.val()); })

您可能也有兴趣查看.serialize()。

Answer 2

您需要阻止使用return false提交表单：

$form.submit(function(event){

  var $input=$('#signup :input');
  console.log($input.username);
  alert($input.username);

 // data = array of all the information collected from the input tags
 //data = $form.serizalize(); will also work
 data = $(this).serialize();    


  return false;
});

data将是一个包含您需要的信息的数组，我推荐console.log(data)，以便您可以看到它的所有结构，然后您可以根据需要使用它，例如：

if(data.something == anything){
    doThis();
}

我强烈建议您在javascript语句末尾添加;

Answer 3

您的代码出现问题[表单提交没有问题]

$input.username无效jQuery引用另一个元素。

var usernameInput = $input.filter('[name="username"]');

看起来您没有在document.ready上添加代码，因此您可能无法将其附加到任何内容。将其更改为：

jQuery( function() {
    $form = $('form#signup');
    $form.submit(function(event){
    });
}

您还可以在jQuery代码之前包含验证代码。我打赌在浏览器中查看JavaScript控制台有一些很好的错误消息。

Answer 4

和其他人一样，我对这样的代码感到满意：

$(document).ready(function(){
    // Prevent form submission
    $( "form" ).submit(function( event ) {
      event.preventDefault();
    });
});

阻止表单提交。但是，现在很常见的是，页面上的脚本会在你的背后添加，并添加一些糖果涂层功能，如动画和“抖落”效果到HTML表单。这些脚本可能会在这种情况下妨碍它们，因为它们可能有自己的javascript-fu用于提交。

Jquery停止提交并从表单中获取数据

4 个答案: