jQuery, submit is not cancelling on form

Question

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;
    });

Can you please check if your js file is being fetched. You can go to network tab on chrome and check for the js file name. if your .js file being called successfully have console log beginning of the js file and have console logs in your functions to check till where the script is running. any possibilities to see your code in action? because fiddle seems to be working as expected. — radiant
– radiant, Commented Aug 25, 2015 at 1:48

RiggsFolly · Accepted Answer · 2015-08-25 00:43:49Z

2

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;
    });
});

edited Aug 25, 2015 at 0:43

answered Aug 25, 2015 at 0:30

RiggsFolly

94.7k22 gold badges108 silver badges152 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Patrick Over a year ago

Just tried that, It didn't work either buddy. I have only added that alert to come up to indicate that it has been called, I should also add that the alert never appears.

RiggsFolly Over a year ago

Are you sure that the .js file is included in the html file. How is it included? Hard coded or a `<script...> tag?

Patrick Over a year ago

I have the following at the bottom of the page before </body> & </html> <script src="js/test.js"></script> @RiggsFolly

aldrin27 Over a year ago

@John Don't include the js at the bottom of </html> it should be above </html>

RiggsFolly Over a year ago

Put in just before the </body>

|

aldrin27 · Accepted Answer · 2015-08-25 00:42:48Z

0

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;
      }
 });

edited Aug 25, 2015 at 0:42

answered Aug 25, 2015 at 0:36

aldrin27

3,4184 gold badges31 silver badges44 bronze badges

4 Comments

Patrick Over a year ago

I tried this buddy, sadly this did not work either. Thanks for the attempt though :)

aldrin27 Over a year ago

But can you see the alert box appeared?

Patrick Over a year ago

No, but i'm not sure if that's because the page is being reloaded due to the submission.

aldrin27 Over a year ago

I've updated my answer. I think you must click first the button to submit. Not the form. Because it will trigger the alert box.

Micaela · Accepted Answer · 2015-08-25 02:33:52Z

0

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

edited Aug 25, 2015 at 2:33

answered Aug 25, 2015 at 2:27

Micaela

1321 silver badge13 bronze badges

1 Comment

Micaela Over a year ago

still the same if you want input, not button <input id="submit" type="submit" class="btn btn-effect-ripple btn-primary" value="Update"> Just add the (id="submit")

Collectives™ on Stack Overflow

jQuery, submit is not cancelling on form

3 Answers 3

9 Comments

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related