3

我正在尝试使用 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="")
4

4 回答 4

3

如果您的表单相关 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()。

于 2012-08-07T16:34:00.053 回答
0

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

于 2012-08-07T16:32:34.777 回答
0

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

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

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

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

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

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

于 2012-08-07T16:35:34.167 回答
0

像其他人一样，我对这样的代码很幸运：

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

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

于 2013-09-25T20:49:13.050 回答