web-dev-qa-db-fra.com

passer des 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 les données de formulaire serialNumber dans display.html, 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 afin que le code ci-dessus dans display.html affiche le numéro de série et que la fonction JavaScript show () obtienne la serialNumber du premier code HTML?

javascripthtmlformshtml-form
41
tonga

Si vous ne pouvez pas utiliser de programmation côté serveur, telle que PHP, vous pouvez utiliser la chaîne de requête ou les paramètres GET.

Dans le formulaire, ajoutez un 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 inclut la valeur serialNumber en tant que paramètre. Quelque chose comme:

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

Vous devriez alors pouvoir analyser la chaîne de requête - qui contiendra la valeur du paramètre serialNumber - à partir de JavaScript, à l'aide de 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 Chaîne de requête JavaScript .

L'alternative consiste à stocker les valeurs dans des cookies lors de l'envoi du formulaire 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 .

31
Richard JP Le Guen

Vous devez obtenir les valeurs de la chaîne de requête (étant donné que vous n'avez pas défini de méthode, vous 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;
}
10
Joshua Wooward

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>
2
Satish

Si votre situation est telle que décrite ci-dessus: Vous devez envoyer une action à un serveur différent à partir d'un seul formulaire, vous disposez de deux boutons d'envoi et vous souhaitez envoyer chaque bouton d'envoi à des pages différentes.

Pour envoyer des données à deux servelets, créez un bouton comme bouton de soumission et un autre comme bouton. Le premier bouton envoie l'action dans votre balise de formulaire comme d'habitude, mais sur l'autre bouton, appelez une fonction JavaScript à cet endroit. écrivez une autre balise de formulaire après la première fermeture.declare les mêmes zones de texte, mais avec l'attribut caché. la deuxième forme. Ensuite, lorsque vous cliquez sur le bouton Soumettre, l'action sera exécutée dans le premier formulaire. Si vous cliquez sur le bouton, la fonction sera appelée pour soumettre le deuxième formulaire avec son action. Votre deuxième formulaire sera maintenant appelé deuxième servlet.

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

UnEXEMPLEde seconde 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>

0
CyberAbhay
*first html page*

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


*Second html page*
<body>
<p>The serial number is:<%=request.getParameter("serialNumber") %></p>
</body>


you will get the value of the textbox on another page.
0
Vna

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

Dans display.html, vous devez ajouter le code suivant.

<script>
function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, '\\$&');
    var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, ' '));
}

var sn = getParameterByName('serialNumber');

document.getElementById("write").innerHTML = sn;

</script>
0
Gäñèsh Kàlyâñ Kömmîsëttï