web-dev-qa-db-fra.com

Comment empêcher le rechargement d'une page après la soumission du formulaire - JQuery

Je travaille sur un site Web pour ma classe de développement d'applications et j'ai le problème le plus étrange.

J'utilise un peu de JQuery pour envoyer des données de formulaire à une page php appelée 'process.php, puis le télécharger sur ma base de données. Le bogue étrange est que la page est rechargée lors de la soumission du formulaire, et je ne peux pas ou la vie de moi-même trouver comment faire en sorte que JQuery continue en arrière-plan. C'est en quelque sorte le point d'utiliser JQuery en premier lieu, haha. Quoi qu'il en soit, je vais soumettre tous les codes pertinents, laissez-moi savoir si vous avez besoin de quelque chose d'autre.

<script type="text/JavaScript">

$(document).ready(function () {
  $('#button').click(function () {

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

    $.post("process.php", {
      name: name,
      email: email
    }).complete(function() {
        console.log("Success");
      });
  });
});
</script>
<div class= "main col-xs-9 well">
  <h2 style="color: black" class="featurette-heading">Join our mailing list!</h2>
  <form id="main" method = "post" class="form-inline">
    <label for="inlineFormInput">Name</label>
    <input type="text" id="name" class="form-control mb-2 mr-sm-2 mb-sm-0" id="inlineFormInput" placeholder="Jane Doe">
    <label for="inlineFormInputGroup">Email</label>
    <div class="input-group mb-2 mr-sm-2 mb-sm-0">
      <input type="text" id="email" class="form-control" id="inlineFormInputGroup" placeholder="[email protected]">
    </div>
    <!--Plan to write success message here -->
    <label id="success_message"style="color: darkred"></label>
    <button id ="button" type="submit" value="send" class="btn btn-primary">Submit</button>
  </form>

Ceci est mon php si son pertinent:

<?php
  include 'connection.php';

  $Name = $_POST['name'];
  $Email = $_POST['email'];

  //Send Scores from Player 1 to Database 
  $save1   = "INSERT INTO `contact_list` (`name`, `email`) VALUES ('$Name', '$Email')";

  $success = $mysqli->query($save1);

  if (!$success) {
    die("Couldn't enter data: ".$mysqli->error);

    echo "unsuccessfully";
  }

  echo "successfully";
?>

Ceci est une capture d'écran du journal:

screenshot of log

javascriptphpjqueryhtmlforms
10
Casey.PhillipsTMC

L'élément <button>, Lorsqu'il est placé dans un formulaire, le soumettra automatiquement, sauf indication contraire. Vous pouvez utiliser les 2 stratégies suivantes:

  1. Utilisez <button type="button"> Pour remplacer le comportement de soumission par défaut
  2. Utilisez event.preventDefault() dans l'événement onSubmit pour empêcher la soumission du formulaire.

Solution 1:

  • Avantage: simple changement de balisage
  • Inconvénient: subvertit le comportement de formulaire par défaut, en particulier lorsque JS est désactivé. Que se passe-t-il si l'utilisateur veut cliquer sur "entrer" pour le soumettre?

Insérez un attribut supplémentaire type dans votre balise de bouton:

<button id="button" type="button" value="send" class="btn btn-primary">Submit</button>

Solution 2:

  • Avantage: le formulaire fonctionnera même si JS est désactivé et respecte le formulaire standard UI/UX, de sorte qu'au moins un bouton est utilisé pour la soumission.

Empêcher la soumission du formulaire par défaut lorsque vous cliquez sur le bouton. Notez que ce n'est pas la solution idéale, car vous devriez en fait écouter l'événement submit, et non l'événement click du bouton :

$(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");
      });
  });
});

Meilleure variante:

Dans cette amélioration, nous écoutons l'événement submit émis par l'élément <form>:

$(document).ready(function () {
  // Listen to submit event on the <form> 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");
      });
  });
});

Encore meilleure variante: utilisez .serialize() pour sérialiser votre formulaire, mais n'oubliez pas d'ajouter les attributs name à votre entrée:

L'attribut name est requis pour que .serialize() fonctionne, conformément à documentation de jQuery :

Pour que la valeur d'un élément de formulaire soit incluse dans la chaîne sérialisée, l'élément doit avoir un attribut name.

<input type="text" id="name" name="name" class="form-control mb-2 mr-sm-2 mb-sm-0" id="inlineFormInput" placeholder="Jane Doe">
<input type="text" id="email" name="email" class="form-control" id="inlineFormInputGroup" placeholder="[email protected]">

Et ensuite dans votre JS:

$(document).ready(function () {
  // Listen to submit event on the <form> 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");
    });
  });
});
49
Terry