.preventDefault() not stopping form submit.

Page 1 of 1

3 Replies - 55229 Views - Last Post: 13 January 2014 - 06:57 AM

#1 Kiakime   User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 24
  • Joined: 27-February 12

.preventDefault() not stopping form submit.

Posted 13 January 2014 - 04:27 AM

I've got this down to its barest bones but the form is still submitting and the alert isn't popping up. In my main project, the alert would pop up and it would go through the function but post the data to the index page afterwards. Here, none of the code in the actual submit function runs.

jQuery is indeed functional (version 2.0.3) and an alert in the external js file put outside the submit event function pops up fine.

jQuery:
if (window.jQuery) {  
    // jQuery is loaded  
alert("1");
} else {
    // jQuery is not loaded
alert("2");
}

$( "#test" ).submit(function( event ) {
  alert( "Handler for .submit() called." );
  event.preventDefault();
});


Testing post, none of the php code runs:
$( "#test" ).submit(function( event ) {
  event.preventDefault();
  $.post( "addCal.php", $( "#test" ).serialize() {
      alert( "Yooo" );
    }); 
});


HTML:
<head>
  <script src="jQuery.js"></script>
  <script type="text/javascript" src="addCals.js"></script>
</head>

<form id="test" action="">
   <input type="text" id="no" />
   <input type=submit value=submit />
</form>


I've tried not listing an action and 'action="/"'. Doesn't make a difference. What am I doing wrong?

This post has been edited by Kiakime: 13 January 2014 - 04:41 AM


Is This A Good Question/Topic? 0
  • +

Replies To: .preventDefault() not stopping form submit.

#2 andrewsw   User is offline

  • no more Mr Potato Head
  • member icon

Reputation: 6957
  • View blog
  • Posts: 28,696
  • Joined: 12-December 12

Re: .preventDefault() not stopping form submit.

Posted 13 January 2014 - 05:29 AM

It is a little hard to follow your description.

However, this line:
<script type="text/javascript" src="addCals.js"></script>

should be placed at the bottom of the page, before the closing body-tag, so that the element #test exists on the page and can be referred to. Alternatively, it could be within document.ready.

This code is incorrect:
$( "#test" ).submit(function( event ) {
  event.preventDefault();
  $.post( "addCal.php", $( "#test" ).serialize() {
      alert( "Yooo" );
    }); 
});

jquery post

Should just be:
$( "#test" ).submit(function( event ) {
  event.preventDefault();
  $.post( "addCal.php", $( "#test" ).serialize()); 
});

You can't just throw an alert in the middle :whistling:

You might be confusing it with a call like this:
$.post( "test.php", function( data ) {
  alert( "Data Loaded: " + data );
});


You should also be checking your browser's console for errors.
Was This Post Helpful? 1
  • +
  • -

#3 Kiakime   User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 24
  • Joined: 27-February 12

Re: .preventDefault() not stopping form submit.

Posted 13 January 2014 - 06:17 AM

Sorry about that, looks like I ended up being that quoted guy in your sig tonight. That's all very helpful and yes, that's exactly what I was mistaking it for. I got it working. Thank you very much!
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw   User is offline

  • no more Mr Potato Head
  • member icon

Reputation: 6957
  • View blog
  • Posts: 28,696
  • Joined: 12-December 12

Re: .preventDefault() not stopping form submit.

Posted 13 January 2014 - 06:57 AM

No worries ;)
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1