CODEWITHSUNDEEP
javascriptphpjqueryajaxforms
Patrick
Patrick

Reputation: 308

jQuery, submit is not cancelling on form

I have a form which I am trying to use JS to cancel, so that I can submit it using Ajax.

However I just started and as I made the form and tested to see if the submission is cancelled/return's false I discovered that it did not. I checked other threads/posts made but none helped me. This is my form bellow, followed by the .js file. The console in chrome has not given me any errors either.

EDIT: I forgot to mention that the alert in the .js file is not coming up either.

<form method="post" class="form-horizontal form-bordered" id="user-data-form">
    <div class="form-group">
        <label class="col-md-3 control-label" for="oldpassword">Old Password</label>
        <div class="col-md-6">
            <input type="password" id="oldpassword" name="oldpassword" class="form-control" placeholder="Old Password">
        </div>
    </div>
    <div class="form-group form-actions">
        <div class="col-md-9 col-md-offset-3">
            <!-- Submit element -->
            <input type="submit" class="btn btn-effect-ripple btn-primary" value="Update">
            <!-- END Submit element -->
        </div>
    </div>
</form>

And the JS file, 

$( '#user-data-form' ).submit( function(event) {
        alert( "Handler for .submit() called." );
        event.preventDefault();
        return false;
    });

Upvotes: 1

Views: 54

Answers (3)

Micaela
Micaela

Reputation: 132

Try changing your input submit to button and make an id. You can delete your id in your form and put that id in class.

<form method="post" class="form-horizontal form-bordered user-data-form">
<button id="submit" type="submit" class="btn btn-effect-ripple btn-primary" value="Update"></button>

OR

<form method="post" class="form-horizontal form-bordered user-data-form">
<input id="submit" type="submit" class="btn btn-effect-ripple btn-primary" value="Update">

Then in your javascript calling the submit button

$('form.user-data-form #submit').click(function(e){
    e.preventDefault();
    alert( "Handler for .submit() called." );
    return false;
});

Hope that helps

Upvotes: 0

RiggsFolly
RiggsFolly

Reputation: 94642

I suggest you try making the event.preventDefault(); the first thing that runs as the alert maybe allowing the normal button pressing function of a HTML form to get run while the alert sits on screen

$( '#user-data-form' ).submit( function(event) {
    event.preventDefault();
    alert( "Handler for .submit() called." );
    return false;
});

As per your comment:

Add the javascript before the 

<script src="js/test.js"></script>
</body>
</html>

otherwise its not actually part of the DOM and wont get run

As per your second comment

Try putting your code inside a .ready like this. This ensures that the document is completely built before attempting to attach the .submit handler. And stops it attempting to add the handler before there is an object to attach it to in the DOM.

$( document ).ready(function() {
    $( '#user-data-form' ).submit( function(event) {
        event.preventDefault();
        alert( "Handler for .submit() called." );
        return false;
    });
});

Upvotes: 2

aldrin27
aldrin27

Reputation: 3407

Try this:

In your html:

   <input type="submit" class="btn btn-effect-ripple btn-primary" value="Update" id="SUBMIT">

JS:

 $('#SUBMIT').on('submit', function(e) {
    e.preventDefault();
   var confirm = confirm('Message');
      if(confirm === true){
      //do something
      }else{ 
       return false;
      }
 });

Upvotes: 0

Related Questions