I'm trying to use jquery to get data from a form and stop the form submiting using this code:

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

but the form still posts the data and the alert box does not appear.Also firebug brings up the error $ is not defined and Node.js crashes

the form (writen in jade):

html
  head
    script(src='javascripts/signupValidation.js')
    script(src='.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="")

I'm trying to use jquery to get data from a form and stop the form submiting using this code:

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

but the form still posts the data and the alert box does not appear.Also firebug brings up the error $ is not defined and Node.js crashes

the form (writen in jade):

html
  head
    script(src='javascripts/signupValidation.js')
    script(src='https://ajax.googleapis./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="")

• javascript
• jquery
• pug

• 2 NITPICK: Use semicolons! It is bad practice to not use them and if you ever want to press your code, you will need them there. – epascarello Commented Aug 7, 2012 at 16:38

4 Answers 4

If your form-related JS is in the file signupValidation.js, you need to move the script call that includes that file to be after the jquery include.

I'd probably clean up the form code a tiny bit, too:

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

You might be interested in looking at .serialize(), too.

Problem with your code [not issue with form submission]

$input.username is not valid jQuery to reference another element.

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

Looks like you are not adding the code on document.ready so you probably are attaching it to nothing. Change it to be:

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

Also looks like you are including the validation code before the jQuery code. I bet looking at the JavaScript console in the browser has some nice error messages.

You need to prevent the form from submiting with 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 would be an array with the information you need, i remend console.log(data) so you can see all of it's structure and then you can use it as you wish for example:

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

And i highly remend adding an ; at the end of your javascript sentences

Like other people I've had luck with code like this:

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

To prevent form submission. But also, these days it's pretty mon that there are scripts on the page which go behind your back and add little candy-coated features like animations and "shake-off" effects to HTML forms. It's possible for those script to get in the way in situations like this, because they might have their own javascript-fu for submissions.