Bonjour à tous,

Donc voila j'aimerais simuler une console avec un textarea et un input cependant a chaque fois que j'entre une nouvelle commande et que je récupère le contenu du textarea pour ne pas effacer ce qui y a avant, sa affiche en double.

Exemple :

Bonjour

->MaCommande
Bonjour
->MaCommande
->Macommande

Et j'aurais voulu que sa s'affiche comme sa :

Bonjour
->MaCommande
->MaCommande2

Voici le code :

<form method="post" action="mapage.php">
    <textarea class="form-control" rows="10" name="console" readonly>blablabla

      <?php if(isset($_POST['sbt_cmd']))

{

       $log_console = $_POST['console'];

       $cmd = $_POST['sbt_cmd'];

       echo $log_console."\n".$cmd;

}

?>

</textarea>
   <input type="text" class="form-control" name="sbt_cmd" placeholder="Text input"></form>

Donc voila en gros.

merci d'avance.
PS : Si il n'y a pas de bouton c'est normal car j'utilise la touche entrée via javascript pour valider le formulaire. Je suis d'accord pour avoir une solution en javascript pour ce qui est du traitement mais de manière le plus simplement possible s'il vous plait

16 réponses


Vérifie avec les outils de dev de ton navigateur que tu ne submit pas deux fois le formulaire (une fois par Enter + une fois javascript)
si c'est le cas, rajouter un preventDefault.

Crysium
Auteur

Bonjour merci pour ta réponse mais cela n'a pas résolue mon soucis x)

Tu ajoutes ta commande en Php et en Javascript ?
Parce que ta partie Php à l'air correcte
reste à voir la partie javascript

Crysium
Auteur

La partie javascript est comme sa :

    <script type="text/javascript">

        function validerForm(){
            event.preventDefault();
            document.getElementById("formulaire").submit();
        }

    </script>

Et le input qui reçoit les données et la touche entrée pour valider le formulaire comme ça :

                                <input type="text" class="form-control" onKeyPress="if(event.keyCode == 13) validerForm();" name="sbt_cmd" placeholder="Text input">

Voilà.

Utilise l'évènement onsubmit plutôt que onkeypress

<form method='post' action='xxx'  onsubmit='validation()' >

Si ta fonction validation retourne True le form sera validé sinon il ne le sera pas.
Regarde déjà si le pb vient d'une double validation (outils de Dev -> réseau)

Crysium
Auteur

Comment utiliser onsubmit sans bouton pour valider mon formulaire ? En sachant que je veux valider mon formulaire en appuyant sur la touche entrée...

On pourrait prendre contact par skype ? C'est vraiment pas évident de résoudre un problème en ayant une réponse toute les 15 minutes...
Et a chaque problème reposer une question ou dans ce cas poster un code complet fonctionnel avec des explications clair et précise s'il te plait

La touche entrée valide implicitement le formulaire si tu n'as qu'un seul champ de type INPUT même sans bouton submit
C'est ce que je soupçonne dans ton cas
Si c'est le cas il faut empêcher le comportement par défaut
j'aurai tenté de modifier ton code en rajoutant l'event en paramètre

    function validerForm(ev)
            ev.preventDefault(); // annule le submit implicite
            document.getElementById("formulaire").submit();
        }
Crysium
Auteur

Voilà ayant fouiller un peu sur le net j'ai vu qu'il était conseiller d'utiliser une div scrollable.
J'ai fait quelques test et voici le résultat actuel + tes modifications :

Partie javascript :

    <script type="text/javascript">

        function validerForm(){
            var test = document.forms["monTest"].elements["sbt_cmd"].value;
            alert(test);      
            document.getElementById("formulaire").submit();

        }

    </script>

Partie HTML :

<form name="monTest" method="post" action="test.php" onsubmit='validerForm()'>
                                    <div id="console">

                                    </div>
                                <br>
                                <input type="text" class="form-control" name="sbt_cmd" placeholder="Text input">
                                </form>

Ce que j'aimerais avoir comme résultat final :

Actuellement le contenu est bien afficher dans l'alert, j'aimerais que premièrement tout s'affiche dans la div l'un a la suite de l'autre.
Et j'aimerais également appeler une page php pour traiter mes requêtes.
J'ai lu que .append pourrait faire l'affaire mais celui-ci appartient à jquery (je sait que c'est une librairie de javascript) et vu que j'ai commencer en javascript j'aimerais continuer sur cette lancer.

Pour le append il suffit de lire le contenu Html de la div et de lui rajouter du contenu
madiv = document.getElementById('MADIV')
madiv.innerHTML = madiv.innerHTML + "coucou"

Sinon si tu utilises le onsubmit, ce n'est pas la peine d'appeler .submit()
il suffit que ta fonction retourne true (ou ne retourne pas false ?)

    function validerForm(){
            var test = document.forms["monTest"].elements["sbt_cmd"].value;
            alert(test);      
           // document.getElementById("formulaire").submit();
          return true;
        }
Crysium
Auteur

On avance :) merci de répondre rapidement :)

Cependant la je suis confronté à deux situations :

La première si je fait sa :

madiv = document.getElementById('MADIV')
madiv.innerHTML = madiv.innerHTML + "coucou"

J'obtient un message qui est différent de ce que j'ai envoyer et le contenu de la div se rééfface immédiatement.

Si je fait sa :

madiv = document.getElementById('MADIV')
madiv.innerHTML = test;

J'ai bien le contenu envoyer mais la div se rééfface immédiatement.

dans quel code tu écris ça ?
ça ressemble à un rechargement de ta page

Crysium
Auteur

Ben j'ai écrit la dedans :

    <script type="text/javascript">

        function validerForm(){
            var test = document.forms["monTest"].elements["sbt_cmd"].value;
            alert(test);
            var divconsole = document.getElementById("console");
            divconsole.innerHTML = test;      
            return true;

        }

    </script>

j'ai même essayer en enlevant le "return true;" sa change rien.

Dans ce que tu fais tu n'as plus besoin de php
donc il ne faut plus submit le formulaire
essaye en mettant return false

Crysium
Auteur

Résultat identique en mettant return false.
On pourrait pas se parler rapidement via skype ? Sa serait beaucoup plus simple s'il te plait.

Je n'ai pas skype et il est l'heure de manger

Crysium
Auteur

Discord alors ?