Comment afficher les valeurs d'un formulaire HTML dans une nouvelle page HTML à l'aide de javascript ?

Question

J'ai un formulaire HTML sur 'page1.html' avec quatre éléments (textbox1, textbox2, listbox1, listbox2). En cliquant sur submit, je veux que les valeurs de ces éléments soient affichées dans une table sur une nouvelle page (page2.html).

Le tableau de la page 2 est le suivant :

• Première ligne : valeur de textbox1
• Deuxième ligne colonne 1 : valeur de la boîte de texte 2
• Deuxième ligne colonne 2 : valeur de listbox1
• Troisième ligne : valeur de listbox2

Veuillez m'aider

Answer 1

Avec des html et javascript vous pouvez faire comme ceci

page1.html

<input type="text" id="txt1" />
<input type="button" value="Submit" onclick="postData()" />

javascript

function postData(){
    var val = document.getElementById("txt1").value;

    var tbl = "<table><tr><td>"+val+"</td></tr></table>";

    var w = window.open("page2.html");

    w.document.write(tbl);
}

Answer 2

Ici, vous pouvez utiliser un formulaire avec type = GET et action="page2.html"

Ensuite, dans page2.html Dans pageload, utilisez la fonction suivante pour extraire les paramètres de l'URL.

function getURLParameter(name) {
    return decodeURI(
        (RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]
    );
}

Démonstration :

Page1.html

<form type="GET" action="page2.html">
<input name="text" id="txt" />
</form>

Page2.html

<script>
function getURLParameter(name) {
    return decodeURI(
        (RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]
    );
}
alert(getURLParameter("text"));
</script>