Comment puis-je soumettre deux formulaires avec un seul bouton ?

Soumission de plusieurs formulaires avec un seul bouton

Dans le développement Web, des scénarios surviennent souvent dans lesquels plusieurs formulaires doivent être soumis simultanément. Cependant, les soumissions de formulaires traditionnels éloignent la page, ce qui empêche la soumission de plusieurs formulaires. Cela soulève la question : comment soumettre deux formulaires différents à l'aide d'un seul bouton ?

Utiliser JavaScript pour la soumission asynchrone de formulaires

Pour contourner le problème de navigation dans les pages, nous pouvons utilisez JavaScript pour la soumission de formulaires asynchrones. Cela permet de soumettre un formulaire sans affecter l’autre. Le code JavaScript suivant peut être utilisé pour soumettre deux formulaires HTML, l'un après l'autre :

<script>
// Get references to both forms
var updateDBForm = document.getElementById("form1");
var payPalForm = document.getElementById("form2");

// Submit the first form asynchronously using fetch()
fetch(updateDBForm.action, {
  method: updateDBForm.method,
  headers: { "Content-Type": updateDBForm.enctype },
  body: new FormData(updateDBForm)
})
.then(function(response) {
  // Submit the second form
  payPalForm.submit();
})
.catch(function(error) {
  // Handle any errors
});
</script>

Dans ce script :

1. Nous récupérons les références aux deux formulaires à l'aide de la méthode getElementById .
2. La fonction fetch() est utilisée pour soumettre le premier formulaire de manière asynchrone.
3. Une fois le premier formulaire terminé soumis avec succès, nous déclenchons la soumission du deuxième formulaire.
4. Nous traitons les erreurs potentielles dans le bloc catch.

Cette approche permet de soumettre les deux formulaires sans interrompre le flux du page.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!