Web Problems: Clicking a Button in a Form Will Auto Close the Form Page and Refresh the Current URL Page

Background

It’s a CRM system, and a single page web application, and has same URL for every page. It consists of top, left menu, right content, bottom area. It uses jQuery to fill different HTML to the content area when clicking the different menu. It using Bootstrap Modal to construct edit form pages.

Originally, It has no form validation, after I take over the project, I want to add form validation. So I add jQuery Validation Plugin to do form validation. Originally, the form page has no <form>, but <div>. The jQuery validation plugin need <form> to work, so I replace <div id="myForm"> with <form id="myForm">. However, after I added <form>, when I click the submit button, Some problems have occurred. The problem is after submitting the form, the current URL page auto-refresh. However, render pages in this project can’t by refresh URL but only by fill HTML. This auto-refresh problem confused me. The following code is to submit the form and then close the modal.

$("#myForm").find("#submit").off("click").on("click", function () {
	// form validation and submit, after submit success to close modal and refresh table
    ...
});

Error Info

The current URL page auto refresh.

Solutions

We should override the submit event of the <form>, and using Event.preventDefault() to prevent the default actions of submit form. (e.g the default action of clicking on a checkbox is toggling a checkbox.)

$('#' + formElementId).bind('submit', function (e) {
    e.preventDefault();
	// form validation and submit, after submit success to close modal and refresh table
    ...
});

Reasons

Cause by the default action of submit form.

References

[1] Bootstrap Modal

[2] Event.preventDefault