Transmission de données de formulaire à une autre page HTML

J'ai deux pages HTML: form.html et display.html. Dans form.html, il existe un formulaire:

<form action="display.html"> <input type="text" name="serialNumber" /> <input type="submit" value="Submit" /> </form> 

Les données du formulaire sont envoyées à display.html. Je souhaite afficher et utiliser le serialNumber de serialNumber données du serialNumber dans serialNumber , comme indiqué ci-dessous:

 <body> <div id="write"> <p>The serial number is: </p> </div> <script> function show() { document.getElementById("write").innerHTML = serialNumber; } </script> </body> 

Alors, comment puis-je passer la variable serialNumber de form.html à display.html de sorte que le code ci-dessus dans display.html indique le numéro de série et la fonction JavaScript () obtient le serialNumber de série du premier HTML?

Si vous n'avez aucune option pour utiliser la programmation côté serveur, comme PHP, vous pouvez utiliser la chaîne de requête ou les paramètres GET.

Dans le formulaire, ajouter une method="GET" attribut method="GET" :

 <form action="display.html" method="GET"> <input type="text" name="serialNumber" /> <input type="submit" value="Submit" /> </form> 

Lorsqu'ils soumettent ce formulaire, l'utilisateur sera dirigé vers une adresse qui comprend la valeur serialNumber tant que paramètre. Quelque chose comme:

 http://www.example.com/display.html?serialNumber=XYZ 

Vous devriez ensuite analyser la chaîne de requête – qui contiendra la valeur du paramètre serialNumber – à partir de JavaScript, en utilisant la valeur window.location.search :

 // from display.html document.getElementById("write").innerHTML = window.location.search; // you will have to parse // the query string to extract the // parameter you need 

Voir aussi la chaîne de requête JavaScript .


L'alternative consiste à stocker les valeurs dans les cookies lorsque le formulaire est soumis et à les relire une fois que la page display.html est chargée.

Voir aussi Comment utiliser JavaScript pour remplir un formulaire sur une autre page .

Vous avez besoin d'obtenir les valeurs de la chaîne de requête (puisque vous n'avez pas de méthode, utilisez GET par défaut)

Utilisez le tutoriel suivant.

http://papermashup.com/read-url-get-variables-withjavascript/

 function getUrlVars() { var vars = {}; var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) { vars[key] = value; }); return vars; } 

Utilisez la méthode "Get" pour envoyer la valeur d'un champ particulier via le navigateur:

 <form action="display.html" method="GET"> <input type="text" name="serialNumber" /> <input type="submit" value="Submit" /> </form> 

Si votre situation est telle que décrite; Vous devez envoyer une action à un service différent à partir d'un formulaire unique et vous avez deux boutons de soumission et vous souhaitez envoyer chaque bouton de soumission à différentes pages, alors votre réponse la plus simple est ici.

Pour envoyer des données à deux serveurs, créez un bouton en tant que soumission et l'autre comme bouton. Au premier bouton, envoyez une action dans votre balise de formulaire normalement, mais sur l'autre bouton, appelez une fonction JavaScript ici, vous devez soumettre un formulaire avec le même champ mais À des serveurs différents puis écrivez une autre étiquette de formulaire après la première fermeture.declare les mêmes boîtes de texte là-bas mais avec l'attribut caché. Maintenant, lorsque vous insérez des données en première forme, insérez-la dans une autre forme cachée avec un code javascript. Écrivez une fonction pour le deuxième bouton qui soumet La deuxième forme. Ensuite, lorsque vous cliquez sur le bouton de soumission, il effectuera l'action en première forme, si vous cliquez sur le bouton, il appellera la fonction pour soumettre le deuxième formulaire avec son action. Maintenant, votre deuxième formulaire sera appelé à la seconde servlet.

Ici, vous pouvez appeler deux servos de la même page html ou jsp avec un code mixte de javascript

Un exemple de deuxième forme cachée

 <form class="form-horizontal" method="post" action="IPDBILLING" id="MyForm" role="form"> <input type="hidden" class="form-control" name="admno" id="ipdId" value=""> </form> <script type="text/javascript"> function Print() { document.getElementById("MyForm").submit(); } </script>