11499 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Stocker des inputs modifiés dans un tableau en JS

Bonjour à toutes et tous,

Je débute en JS/JQuery et j'ai besoin d'aide sur un projet que j'essaie de rendre moins lent en temps d'exécution.

Je développe en XHTML/PHP avec une base de données MySQL. Je présente plusieurs phrases à l'utilisateur dans un formulaire pour qu'il puisse changer les informations associées aux mots.

Or, comme je mets à jour ma base de données à chaque modification de phrase (j'en affiche 6 par page), le délai d'affichage de la page est assez long.

Ce que j'essaie de mettre en place est de stocker les informations modifiées pour chaque phrase (une par une) dans un tableau JS afin de ne faire la mise à jour de toutes les infos qu'à la fin (bouton submit final), ce qui allègera l'interface. J'ai besoin de récupérer les valeurs du tableau infos qui ont été modifiées, ainsi que la totalité des valeurs des champs de type hidden.

Voici le code XHTML :

  <form action="tt.php" method="post">
      <p class="test">
        <span class="s1">
          <span>Igor</span>
          <input type="text" name="infos[]" value="prenom" />
          <input type="hidden" name="plus[]" value="1#1#a01" />
        </span>
        <span class="s2">
          <span>Oistrakh</span>
          <input type="text" name="infos[]" value="nom" />
          <input type="hidden" name="plus[]" value="2#1#a02" />
        </span>
      <input type="button" class="ecrire" value="Ecrire"/>
      <input type="button" class="lire" value="Lire"/>
      </p>
      <p class="test">
        <span class="s3">
          <span>Hector</span>
          <input type="text" name="infos[]" value="prenom" />
          <input type="hidden" name="plus[]" value="3#2#a01" />
        </span>
        <span class="s4">
          <span>Hoche</span>
          <input type="text" name="infos[]" value="nom" />
          <input type="hidden" name="plus[]" value="4#2#a01" />
        </span>
      <input type="button" class="ecrire" value="Ecrire"/>
      <input type="button" class="lire" value="Lire"/>
      </p>
    </form>


J'espère avoir été clair...
Merci d'avance pour vos conseils Smiley smile
Modifié par Flume (13 May 2013 - 13:57)
Salut Flume,

Je ne comprends pas bien ce que tu cherches à faire...
Rassembler plusieurs étapes de formulaires en "une seule" pour un envoi unique ?
Un petit lien ?

tm
Bonjour tm,

Oui, c'est exactement ça. Sauf qu'à chaque étape, je veux récupérer quatre champs (infos, set, plus et nb - et ce pour chacun des mots dans chaque phrase) par exemple en cliquant sur un bouton. Et en cliquant sur le bouton final du formulaire, je veux récupérer tout ça et faire ma requête SQL (en PHP).

Je me suis demandé si ça ne valait pas le coup d'écrire les infos dans du JSON, puis de le lire en fin de traitement pour la requête. Mais je suis coincé sur l'action à entreprendre pour stocker toutes les infos pour chacune des étapes.

Et tout est en local.

Merci pour ton aide.
Re,

Perso, je ferais un seul formulaire. Chaque étape dans un fieldset. Et avec jQuery ou JS, je fais défiler/apparaître/masquer les fieldset. Mais mes données resteraient celles du formulaire avec un envoi vers du php à la fin.
Tu devrais faire une recherche sur jQuery + wizard.
Je pense que c'est ce que tu cherches...

tm
Après avoir fait quelques recherches, le plugin Jquery wizard ne me convient pas vraiment, puisqu'il masque les étapes.

J'ai quand même pu avancer, et j'arrive désormais à stocker mes infos dans un tableau JS en cliquant sur un bouton :


var lesInfos = new Array() ;

function ecrire(e) {
	$("input[name=infos],input[name=plus]").each(function() {
		lesInfos.push($(this).val()) ;
	}) ;

function lire(e) {
    alert(JSON.stringify(lesInfos));
}

$(".test").ready(function() {
    $('.ecrire').click(ecrire);
    $('.lire').click(lire);
});


Par contre, je n'arrive pas à limiter la portée de ma fonction à la phrase courante, qui correspond à une classe test.

Est-ce que quelqu'un aurait une idée ?

Merci Smiley smile
Salut tm,

Il me semble que tout est déjà sur la page. Le script XHTML en début de post et le Jquery posté aujourd'hui (13h52).

J'ai loupé quelque chose ? Smiley smile
Modifié par Flume (13 May 2013 - 15:20)
Sujet clos
Aller à