Comment soumettre un formulaire avec plusieurs boutons d'envoi en utilisant jQuery ?

Par : TutorialsGrey, le 01 Novembre 2022

Problème

J'aimerais soumettre un formulaire avec plusieurs boutons de validation en utilisant JQuery.

 

Solution

Il est possible de soumettre un formulaire avec plusieurs boutons de validation en utilisant JQuery. Pour le faire, il suffit de lier un gestionnaire de clic personnalisé à tous les boutons et vérifiez quel bouton est cliqué.

L'exemple ci-après est un formulaire qui demande à l'utilisateur de renseigner une adresse email, puis affiche une alerte en fonction du bouton qui a été cliqué.

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
      $("#myform button").click(function (ev) {
      ev.preventDefault()
      if ($(this).attr("value") == "button1") {            
        alert("First Button is pressed - Form will submit")
        $("#myform").submit();
      }
      if ($(this).attr("value") == "button2") {
        alert("Second button is pressed - Form did not submit")
      }
    });
});
</script>
</head>
<body>

<form id="myform">
  <input type="email" name="email" placeholder="Enter email" /><br>
  <button type="submit" value="button1">First Button</button>
  <button type="submit" value="button2">Second Button</button>
</form>

</body>
</html>