Search code examples
jqueryformsclicksubmitevent-bubbling

Prevent clicking submit on form from propagating to click handler

I have a click event that slides a form up into view. I'm also using .toggle to slide the form back down. The problem I have is that when the user clicks the submit button on the form the form slides back down as if the .toggle was triggered.

// Slides the contact form up from the footer
$('#show-form').click(function (e) {
e.stopPropagation();
$('#get-started-form').hide('slide', {direction: 'down'}, 750);
$(this).next('#get-started-form').stop().toggle('slide', {direction: 'down'}, 750);

});

I tried to use .stopPropogation on the forms' submit button as follows;

$('#gform_submit_button_1').click(function(event) {
event.stopPropagation();

});

Solution

  • Looks like the page is reloading on submit and the validation messages are not showing because as the page reloads it "closes" or loads closed. Try validation and submitting via ajax rather than the form post.