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

【问题标题】：Jquery stop submit and get data from formJquery停止提交并从表单获取数据
【发布时间】：2012-08-07 16:30:43
【问题描述】：

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

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

但是表单仍然posts 的数据和警告框没有出现。而且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="")

【问题讨论】：

NITPICK：使用分号！不使用它们是不好的做法，如果你想压缩你的代码，你将需要它们。

标签： javascript jquery pug

【解决方案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()。

【讨论】：

【解决方案2】：

您的代码有问题[不是表单提交问题]

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

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

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

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

看起来你在 jQuery 代码之前包含了验证代码。我敢打赌，在浏览器中查看 JavaScript 控制台会有一些不错的错误消息。

【讨论】：

在 jquery 准备好时运行我的代码修复了提交问题，我仍然习惯了异步编码的想法

【解决方案3】：

你需要阻止表单提交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 句子末尾添加 ;

【讨论】：

event.preventDefault(); 将阻止表单提交。
是的，但有时会发生更多事情，return false 也可以作为event.preventPropagation(); event.preventDefault(); 和另一个我现在不记得的功能，所以这样做更安全
@gilbertbw 添加了如何从表单中获取数据，查看一下
如何使用数据变量？

【解决方案4】：

像其他人一样，我很幸运地编写了这样的代码：

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

防止表单提交。而且，现在页面上的脚本很常见，这些脚本会在您的背后添加一些糖果涂层功能，例如动画和 HTML 表单的“摇晃”效果。在这种情况下，这些脚本可能会妨碍您，因为它们可能有自己的 javascript-fu 用于提交。

【讨论】：