How to prevent page from reloading after form submit - JQuery

后端未结

关注

 1  1770

深忆病人 2020-11-28 12:17

I am working on a website for my app development class and I have the weirdest issue.

I am using a bit of JQuery to send form data to a php page called \'process.ph

1条回答

生来不讨喜 (楼主)

2020-11-28 12:47
The
Use event.preventDefault() in the onSubmit event to prevent form submission

Solution 1:

Advantage: simple change to markup
Disadvantage: subverts default form behavior, especially when JS is disabled. What if the user wants to hit "enter" to submit?

Insert extra type attribute to your button markup:

Solution 2:

Advantage: form will work even when JS is disabled, and respects standard form UI/UX such that at least one button is used for submission

Prevent default form submission when button is clicked. Note that this is not the ideal solution because you should be in fact listening to the submit event, not the button click event:

$(document).ready(function () {
  // Listen to click event on the submit button
  $('#button').click(function (e) {

    e.preventDefault();

    var name = $("#name").val();
    var email = $("#email").val();

    $.post("process.php", {
      name: name,
      email: email
    }).complete(function() {
        console.log("Success");
      });
  });
});

Better variant:

In this improvement, we listen to the submit event emitted from the

element:

$(document).ready(function () {
  // Listen to submit event on the  itself!
  $('#main').submit(function (e) {

    e.preventDefault();

    var name = $("#name").val();
    var email = $("#email").val();

    $.post("process.php", {
      name: name,
      email: email
    }).complete(function() {
        console.log("Success");
      });
  });
});

Even better variant: use .serialize() to serialize your form, but remember to add `name` attributes to your input:

The name attribute is required for .serialize() to work, as per jQuery's documentation:

For a form element's value to be included in the serialized string, the element must have a name attribute.

And then in your JS:

$(document).ready(function () {
  // Listen to submit event on the  itself!
  $('#main').submit(function (e) {

    // Prevent form submission which refreshes page
    e.preventDefault();

    // Serialize data
    var formData = $(this).serialize();

    // Make AJAX request
    $.post("process.php", formData).complete(function() {
      console.log("Success");
    });
  });
});

0 讨论(0)

How to prevent page from reloading after form submit - JQuery

Solution 1:

Solution 2:

Better variant:

Even better variant: use .serialize() to serialize your form, but remember to add name attributes to your input:

Even better variant: use .serialize() to serialize your form, but remember to add `name` attributes to your input: