JavaScript afficher une nouvelle page lorsque soumettre formulaire HTML

Supposons que j'ai 2 fichiers html: form.html et confirm.html

form.html juste un champ de texte et un bouton de soumission, lorsque vous cliquez sur envoyer, il vous montrera ce que vous venez de taper dans le champ de texte.

    <HTML>
      <HEAD>
        <TITLE>Test</TITLE>
        <script type="text/javascript"> 

        function display(){ 
            document.write("You entered: " + document.myform.data.value);
        } 
        </script> 
      </HEAD>
      <BODY>
      <center>    
<form name="myform">

  <input  type="text" name="data">
  <input type="submit" value="Submit" onClick="display()">

</form>
    </BODY>
    </HTML>

Maintenant, je veux que lorsque vous les touchez le bouton soumettre, il affiche la valeur saisie dans confirm.html. Que dois-je faire? Je veux dire ce qui devrait être dans confirm.html et comment les données de form.html être utilisé dans un autre endroit, dois-je créer un fichier JavaScript pour stocker fonction JS donc je peux l'utiliser dans les deux 2 fichiers html. Je suis un peu nouveau pour toutes sortes de choses.

Remarque: Pas de PHP ou côté serveur de la langue ou quoi que ce soit super ici, juste 2 fichiers html dans mon Bureau et que je veux tester à l'aide de FireFox.

Merci!

InformationsquelleAutor Ronaldinho Learn Coding | 2012-10-14
  1. 4

    Vous pouvez essayer d'utiliser localStorage ou cookies. Cocher l'une des 2 solutions trouvées ci-dessous...

    1 - Si vous avez HTML5, vous pouvez stocker le contenu de vous input dans le localStorage.

    Essayez cet exemple:

    form.html:

    <html>
<head>
    <title>Test</title>
    <script type="text/javascript">

        //Called on form's `onsubmit`
        function tosubmit() {
            //Getting the value of your text input
            var mytext = document.getElementById("mytext").value;

            //Storing the value above into localStorage
            localStorage.setItem("mytext", mytext);

            return true;
        }

    </script> 
</head>
<body>
    <center>   
        <!-- INLCUDING `ONSUBMIT` EVENT + ACTION URL --> 
        <form name="myform" onsubmit="tosubmit();" action="confirm.html">

            <input  id="mytext" type="text" name="data">
            <input type="submit" value="Submit">

        </form>
</body>
</html>

    confirm.html:

    <html>
<head>
<script>

    //Called on body's `onload` event
    function init() {
        //Retrieving the text input's value which was stored into localStorage
        var mytext = localStorage.getItem("mytext");

        //Writing the value in the document
        document.write("passed value = "+mytext);
    }

</script>
</head>    

<body onload="init();">

</body>

</html>

    2 - Aussi, comme @apprenti mentionné précédemment, vous pouvez également utiliser des cookies avec les normes HTML.

    Essayez cet exemple:

    form.html:

    <html>
<head>
    <title>Test</title>
    <script type="text/javascript">
        //Function for storing to cookie
        function setCookie(c_name,value,exdays)
        {
            var exdate=new Date();
            exdate.setDate(exdate.getDate() + exdays);
            var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
            document.cookie=c_name + "=" + c_value;
        }

        //Called on form's `onsubmit`
        function tosubmit() {
            //Getting the value of your text input
            var mytext = document.getElementById("mytext").value;

            //Storing the value above into a cookie
            setCookie("mytext", mytext, 300);

            return true;
        }

    </script> 
</head>
<body>
    <center>   
        <!-- INLCUDING `ONSUBMIT` EVENT + ACTION URL --> 
        <form name="myform" onsubmit="tosubmit();" action="confirm.html">

            <input  id="mytext" type="text" name="data">
            <input type="submit" value="Submit">

        </form>
</body>
</html>

    confirm.html:

    <html>
<head>
<script>

    //Function for retrieveing value from a cookie
    function getCookie(c_name)
    {
        var i,x,y,ARRcookies=document.cookie.split(";");
        for (i=0;i<ARRcookies.length;i++)
        {
            x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
            y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
            x=x.replace(/^\s+|\s+$/g,"");
            if (x==c_name)
            {
                return unescape(y);
            }
        }
    }

    //Called on body's `onload` event
    function init() {
        //Retrieving the text input's value which was stored into a cookie
        var mytext = getCookie("mytext");

        //Writing the value in the document
        document.write("passed value = "+mytext);
    }

</script>
</head>    

<body onload="init();">

</body>

</html>
    • ou les cookies dans toute version HTML
    • J'ai parlé de votre cookie de contournement 😉
    • WOW! Cookie est une excellente idée, mais il est difficile pour moi à 100% le comprennent. J'ai une autre question, je ne sais pas si je dois créer une nouvelle question ou je peux demander ici. mais supposons que j'ai plus d'un champ de texte (tel que Nom, Prénom, Email, Adresse...) je ne veux pas la même personne (juste valider le Nom et e-Mail) peut présenter un formulaire de plus de 1 heure, comment ai-je pu valider à l'aide des cookies bien sûr, toujours l'affichage de toutes les informations ou le message d'erreur dans confirm.html. Désolé si ça trop confondre, je vais créer une nouvelle question.
    • Je veux dire, si j'entre dans une forme de 10 fois à l'aide de 10 différents Noms et e-Mails je suis 10 cookies? alors, comment puis-je vérifier si la 11e fois que je rentre les infos exactement la même que la 1ère fois et confirm.html devrait afficher que "cet utilisateur ont déjà soumettre un formulaire"????
    • Woh... j'ai compris ce que tu veux dire. En fait, vous voulez être en mesure d'identifier chaque données qui ont été soumises. En fait, habituellement, vous pouvez stocker des données dans la base de données et ensuite, lorsqu'un utilisateur soumet un formulaire, on vérifie d'abord si cet utilisateur est déjà soumis un formulaire ou pas (on peut retracer lui par e-mail par exemple, depuis un e-mail n'appartient qu'à une seule personne). Cependant, l'accès à la base de données à partir de javascript peut être pas une bonne solution (par exemple: des problèmes de sécurité), et côté serveur langues (ex: PHP) sont privilégiées dans cette situation.
    • Je vous suggère de vous poser une autre question, de sorte que vous aurez obtenir plus de conseils. De toute façon, assurez-vous de définir le précise l'objet de votre application: qui va l'utiliser, quelles données que vous utilisez, aura-t-il de la sécurité des animaux, quelle serait la taille des données stockées, etc?
    • Jamais l'esprit la question ci-dessus. Maintenant, je veux juste ajouter un de valider que de ne pas permettre à l'utilisateur de soumettre le formulaire deux fois (peu importe ce qu'ils tapent dans l'e-Mail ou Nom ou ...) jusqu'à ce qu'ils fermer le navigateur et ouvrez de nouveau? Est-il de toute façon à le faire à l'aide de cookies, dans votre code ci-dessus, est cookie sera supprimé, si le navigateur est proche?
    • Les cookies peuvent être supprimés si ils expiré (cookies ont une date d'expiration) ou si vous supprimez l'historique de votre navigateur.
    • laissez-nous continuer cette discussion dans le chat

    InformationsquelleAutor Littm
  2. 2

    Ce que vous pourriez faire est de soumettre le formulaire à l'aide d'un get méthode (method="get"), et de l'envoyer à votre confirm.html page (action="./confirm.html").

    Ensuite, vous pouvez utiliser jQuery pour récupérer les valeurs à partir de l'URL de votre confirm.html page.

    Ce site web fournit une méthode pour ce faire: http://jquerybyexample.blogspot.com/2012/06/get-url-parameters-using-jquery.html .

    Ensuite, tout ce que vous avez à faire est d'appeler votre display() méthode.

    InformationsquelleAutor user1631075
  3. 0

    Coutures comme un ajustement pour persist.js, ce qui vous permettra de sauvegarder et de charger des données dans le navigateur de l'utilisateur. À la suite notamment de son fichier javascript, vous pouvez enregistrer les données comme ceci:

    var store = new Persist.Store('My Application');
store.set('some_key', 'this is a bunch of persistent data');

    Et vous pouvez ensuite récupérer les données enregistrées dans une autre page html comme suit:

    var store = new Persist.Store('My Application');
val = store.get('some_key');
    InformationsquelleAutor Thomas C. G. de Vilhena
  4. 0

    Vous pouvez aussi, au lieu de changer la page, modifier le contenu de la page. Lors de la soumission viens de changer la page à l'aide de la innerHtml variable.

    • Veuillez être plus précis (ex: pouvez-vous montrer un exemple de code) car je ne veux pas utiliser un cookie à ce niveau, peut-être le prochain niveau dans la validation de la partie, j'aurai besoin de cookie, mais pas maintenant. Merci!
    InformationsquelleAutor R Bowen