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

Question

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

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

但表单仍然发布数据，并且没有出现警告框。firebug 还会提示错误 $ is not defined 和 Node.js 崩溃

表格(写在 Jade 上):

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 包含之后。

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

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

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