How can I stop event propagation with jquery

Question

I'm submitting a form with jquery and can't seem to stop the page from reloading after the form submits.

My current code looks like this:

HTML:

<form class="form-horizontal" method="post" action="#" name="basic_validate" id="basic_validate" />
  <div class="control-group">
    <label class="control-label">Image Path</label>
    <div class="controls">
      <input type="text" name="imagepath" id=imagepath />
    </div>
  </div>
  <div class="form-actions">
    <input type=button value="Send" id="sendemailbtn" class="btn btn-primary" />
  </div>
</form>

jQuery:

$("#sendemailbtn").click(function(e) {
    e.preventDefault();
    $("#basic_validate").submit();

    if ($("#basic_validate").children('.control-group').hasClass('error')) {
        return false;
    } else {
        $.post('send_email.php', $("#basic_validate").serialize(), function(data) {

            // I see output on the server side but never hit this area after the submission,

            console.log(data);
        }, "json");
    }
});

Alasjo · Accepted Answer · 2013-03-15 13:00:08Z

3

$("#basic_validate").submit();

Is your culprit. That line submits the form and makes the page reload.

answered Mar 15, 2013 at 13:00

Alasjo

1,2408 silver badges17 bronze badges

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

4 Comments

user1216398 Over a year ago

Is there anyway to prevent the page load?

Alasjo Over a year ago

If you omit that line (remove/comment out) and let your script continue. Try it out.

user1216398 Over a year ago

that won't work because I do some form validation on a form submisison

Alasjo Over a year ago

Do you need to submit the form to validate it? You have already catched the click event on #sendemailbtn.

Maen · Accepted Answer · 2013-03-15 13:00:15Z

1

According to the submit doc,

[...] We can cancel the submit action by calling .preventDefault() on the event object or by returning false from our handler.

As .preventDefault() doesn't seem to work for you, try :

$("#basic_validate").submit(function(){

    if ($("#basic_validate").children('.control-group').hasClass('error')) {
        return false;
    }
    else {
        $.post('send_email.php', $("#basic_validate").serialize(), function(data) {

        // I see output on the server side but never hit this area after the submission,

            console.log(data);
        }, "json");                             
    }            
    return false;  //This prevents reloading
});

answered Mar 15, 2013 at 13:00

Maen

10.7k3 gold badges47 silver badges71 bronze badges

Comments

Jon · Accepted Answer · 2013-03-15 13:00:16Z

0

That's because .submit() works that way. If you want to submit the form with AJAX then you want to make an AJAX request manually with $.post without .submit():

$("#sendemailbtn").click(function (e) {
    e.preventDefault();
    if (!$("#basic_validate").children('.control-group').hasClass('error')) {
        $.post('send_email.php', $("#basic_validate").serialize(),
        function(data) {
            console.log(data);
        }, "json");                             
    }    
});

answered Mar 15, 2013 at 13:00

Jon

439k85 gold badges756 silver badges820 bronze badges

Collectives™ on Stack Overflow

How can I stop event propagation with jquery

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related