Problème bouton d'ajout de ligne de saisie(input) dans formulaire

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par itry, 7 Février 2012.

  1. itry
    itry Nouveau WRInaute
    Inscrit:
    7 Février 2012
    Messages:
    33
    J'aime reçus:
    0
    Bonjour à tous,

    Voila j'ai un souci avec un bouton qui est censé ajouter des lignes de saisies. Cependant, je pense que le code marche (en effet le bouton marche dans une page html vierge), donc je pense que c'est une erreur de placement dans mes différentes pages, mais j'ai tout essayer et je trouve pas la solution.
    Je m'explique pour être plus clair: en fait j'ai une page ajouter.php qui contient une fonction "detail_noeud" et qui appelle la page form_ajax.php qui me permet de renseigner dans une input text un nombre qui répétera un formulaire le nombre de fois saisi, juste qu'ici j'ai pas de problème mais mon bouton qui doit insérer les lignes de saisies ne fonctionnent pas :-(.

    PAGE AJOUTER:
    Code:
    <head><script>
    function detail_noeud(str){
    	if (str==""){
    		  document.getElementById("cluster_nb_noeud").innerHTML="";
    		  return;
    	} 
    	if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
    		  xmlhttp=new XMLHttpRequest();
    	}
    	else {// code for IE6, IE5
    		  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    	}
    	xmlhttp.onreadystatechange=function(){
    	  if (xmlhttp.readyState==4 && xmlhttp.status==200){
    		    document.getElementById("detail_noeud").innerHTML=xmlhttp.responseText;
    	  }
    	}
    	xmlhttp.open("GET","form_ajax.php?f=detail_noeud&v="+str,true);
    	xmlhttp.send();
    }
    </script>
    </head>
    
    <div id="detail_noeud"></div>
    

    Voila le code qui pose problème form_ajax.php:

    Code:
    if ($fonction == "detail_noeud" && is_numeric($_GET["v"]) && $_GET["v"] != 0){
    	$nb_noeuds = $_GET["v"];                                
    	$i = 1;
    	while ($i <= $nb_noeuds){                              //répète le tableau ci dessous le nombre de fois qui à etait saisi
    ?>
    
    <p align=left><H3><b><u>Cartes Add-On dans le Produit</u></b></H3></p>
    <H5>Si le nombre de cartes est différent, prendre le nombre le plus grand</H5>
    <table border="1">
       <tr><td colspan="2" align=center><h3>Tete <?=$i?></h3></td></tr>
    	<tr>	
    		<td align=center>Cartes Add_on</td>	
    	</tr>
      <tr>
    		<td><input type=text name=nom_addon <?=$i?> size=30></td>
    	</tr>
    </table>
    
     <script>
    var nlignes = 1;
    function Ajouter(){
    nlignes++;
    saisies.insertAdjacentHTML('BeforeEnd','<BR>Produit '+nlignes+' <input type=text size=4 name=P'+nlignes+'> Quantité '+nlignes+' <input type=text name=QT'+nlignes+'> et de trois '+nlignes+' <input type=text name=QT'+nlignes+'>');
    };
    </script>
     \\bouton qui s'affiche mais qui ajoute pas les lignes de saisies alors que dans une page vierge il fonctionne tres bien
    <Form> 
    <Input Type="Button" Value="Ajouter une ligne" OnClick=Ajouter()>
    <br>
    <Div ID="saisies"> Produit 1 <input type="text" size=4 name="P1"> Quantité 1 <input type="text" name="QT1"> et de trois 1<input type="text" name="QT1"></Div>
    </Form>
    
    <?php
    		$i++;
    ?>
    <?php
    	}
    }
    ?>
    

    Si il y a quelqu'un pour m'aider, merci d'avance , en esperant que j'ai était assez clair
     
  2. itry
    itry Nouveau WRInaute
    Inscrit:
    7 Février 2012
    Messages:
    33
    J'aime reçus:
    0
    Est ce le fait que le bouton "ajouter des lignes de saisi" est dans un "while", si cela pose un problème ? ou si les méthodes d'envoi dans la page même ou entre les deux pages ne sont pas bonnes je sais pas??? merci
     
  3. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    8 832
    J'aime reçus:
    246
    Comme ça, sans tester en live c'est difficile de t'aider.
    Je ne peux que te conseiller d'analyser ça avec Firebug, le "ça ne marche pas" sera surement plus verbeux ;)
     
  4. UsagiYojimbo
    UsagiYojimbo WRInaute accro
    Inscrit:
    23 Novembre 2005
    Messages:
    11 875
    J'aime reçus:
    72
    Et d'opter pour un framework JS, grâce auquel tu t'affranchiras de pas mal de bug / soucis liés aux navigateurs.
     
  5. itry
    itry Nouveau WRInaute
    Inscrit:
    7 Février 2012
    Messages:
    33
    J'aime reçus:
    0
    en effet, je vous met les différentes pages merci
     
  6. zeb
    zeb WRInaute accro
    Inscrit:
    5 Décembre 2004
    Messages:
    12 196
    J'aime reçus:
    1
    je suis pas du tout certain que du code javascript chargé via une requête ajax puisse s'exécuter (j'ai déjà eu le souci). La solution est de charger le javascript utile avec la page et de n'utiliser les chargements ajax que pour le html.
    Sinon tu peux aussi prévoir un script qui ajoutera dynamiquent d'autre scripts JS mais cela doit se faire depuis le document d'origine.
     
  7. itry
    itry Nouveau WRInaute
    Inscrit:
    7 Février 2012
    Messages:
    33
    J'aime reçus:
    0
    ok merci a tous et oui zeb on m'a dit aussi que c'était cela mais je sais pas comment faire , je vais réessayer et si vous avez des idées n'hésitez pas merci bcp
     
  8. zeb
    zeb WRInaute accro
    Inscrit:
    5 Décembre 2004
    Messages:
    12 196
    J'aime reçus:
    1
    Bah sans regarder ton code en détail, sur l'action qui charge a l'aide d'ajax la partie html pure tu ajoute un script du genre :
    Code:
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'http://www.example.com/script/my-script.js';
    document.getElementsByTagName('head')[0].appendChild(script);
    Mais note bien que c'est pas logique ni normal de devoir charger du code JS dynamiquement. Ou du moins ça devrait être assez rare sur un système bien pensé au départ. Il n'est en effet pas logique de ne pas disposer de ton JS au chargement premier de la page.
     
  9. itry
    itry Nouveau WRInaute
    Inscrit:
    7 Février 2012
    Messages:
    33
    J'aime reçus:
    0
    Voila ça marche !!! merci beaucoup !! en effet, il fallait mettre le script fonction dans la page d'origine , la div "<Div ID="saisies"> Produit 1 <input type="text" size=4 name="P1"> Quantité 1 <input type="text" name="QT1"> et de trois 1<input type="text" name="QT1"></Div>" dans la page ajouter et laisser le bouton dans la page form_ajax :)
    merci
     
  10. zeb
    zeb WRInaute accro
    Inscrit:
    5 Décembre 2004
    Messages:
    12 196
    J'aime reçus:
    1
    Good RDV au prochain bug ;-)
     
  11. itry
    itry Nouveau WRInaute
    Inscrit:
    7 Février 2012
    Messages:
    33
    J'aime reçus:
    0
    Bonjour a tous,

    j'ai un autre petit souci, sur ce même script, mon bouton marche mais étant dans un while il se répète le nombre de fois saisi, c'est normal. Mais comment faire pour que les différents bouton ne soit pas dépendant l'un de l'autre? car en effet, que j'appuie sur un bouton ou un autre il m'ajoute mes lignes l'une au dessous de l'autre, alors que je voudrais que chacun ajoute ses propres lignes.
     
  12. zeb
    zeb WRInaute accro
    Inscrit:
    5 Décembre 2004
    Messages:
    12 196
    J'aime reçus:
    1
    il faut associer des ID uniques dans tes objets html et faire en sorte que le javascript agisse que sur l'objet html qui porte cet ID
     
  13. itry
    itry Nouveau WRInaute
    Inscrit:
    7 Février 2012
    Messages:
    33
    J'aime reçus:
    0
    ok il a sa div id mais ce sera le meme pour tous les boutons, tu va me dire c'est normal. je comprend pas au faite, il faudrait faire des if?
     
  14. zeb
    zeb WRInaute accro
    Inscrit:
    5 Décembre 2004
    Messages:
    12 196
    J'aime reçus:
    1
    Normalement (norme html) il ne dois jamais y avoir deux ID identiques (par définition) Dans ton cas vue que tu as une boucle genre while de mémoire tu peux concaténer un indice à l'ID que tu incrémenterait a chaque tour

    genre :
    PHP:
    <span class="syntaxdefault">var indice </span><span class="syntaxkeyword">=</span><span class="syntaxdefault"> 1</span><span class="syntaxkeyword">;<br />while(</span><span class="syntaxdefault">condition</span><span class="syntaxkeyword">){<br /></span><span class="syntaxdefault"> code </span><span class="syntaxkeyword">=</span><span class="syntaxdefault"> </span><span class="syntaxstring">'<div id="MonID'</span><span class="syntaxdefault"> </span><span class="syntaxkeyword">+</span><span class="syntaxdefault"> indice </span><span class="syntaxkeyword">+</span><span class="syntaxdefault"> </span><span class="syntaxstring">'">(...)</div>'</span><span class="syntaxkeyword">;<br /></span><span class="syntaxdefault"> indice</span><span class="syntaxkeyword">++;<br />}</span><span class="syntaxdefault"> </span>
    il te faudra surement ensuite adapter ton code javascript pour qu'il prenne en compte l'indice dans sa fonction métier.
    Tes boutons qui déclenchent tes actions devront donc transmettre l'indice au javascript dans l'appel de fonction.
     
  15. itry
    itry Nouveau WRInaute
    Inscrit:
    7 Février 2012
    Messages:
    33
    J'aime reçus:
    0
    Waouh, t'es impressionnant, quoi dire de plus, merci!! je vais essayer cela :)
     
  16. itry
    itry Nouveau WRInaute
    Inscrit:
    7 Février 2012
    Messages:
    33
    J'aime reçus:
    0
    Bonjour à tous,

    J'essaye d'ajouter à mon code un bouton qui supprime des input type text

    Voila mon code:
    Code:
    <script>
    var nlignes = 1;
    function Ajouter1(){
    nlignes++;
    saisies1.insertAdjacentHTML('BeforeEnd','<BR>Produit '+nlignes+' <input type=text size=4 name=P'+nlignes+'> Quantité '+nlignes+' <input type=text name=QT'+nlignes+'> et de trois '+nlignes+' <input type=text name=QT'+nlignes+'>');
    };
    </script>
    
    <Form>
    <Input Type="Button" Value="Ajout ligne" OnClick=Ajouter1()>
    <br>
    <div id="saisies1"></div>
    </Form>

    j'ai un bouton ajouter qui rajoute 3 input a chaque clique , je veux faire un bouton qui supprime la ligne de 3 input a chaque clique , mais ça ne fonctionne pas si quelqu'un peut m'aider svp ?

    merci d'avance
     
  17. zeb
    zeb WRInaute accro
    Inscrit:
    5 Décembre 2004
    Messages:
    12 196
    J'aime reçus:
    1
    PHP:
    <span class="syntaxdefault"></span><span class="syntaxkeyword"><</span><span class="syntaxdefault">Input Type</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"Button"</span><span class="syntaxdefault"> Value</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"Supprimer ligne"</span><span class="syntaxdefault"> OnClick</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"document.getElementById('saisies1').innerHTML='';"</span><span class="syntaxdefault"> </span><span class="syntaxkeyword">/></span><span class="syntaxdefault"> </span>
     
  18. itry
    itry Nouveau WRInaute
    Inscrit:
    7 Février 2012
    Messages:
    33
    J'aime reçus:
    0
    Merci zeb pour ton aide !!! :)
     
  19. itry
    itry Nouveau WRInaute
    Inscrit:
    7 Février 2012
    Messages:
    33
    J'aime reçus:
    0
    j'ai utiliser ton code ça marche mais par contre quand il supprime , il se supprime toute les lignes .
    par exemple: je clique 3 fois sur mon bouton ajouter , donc il rajoute au total 3 input mais quand je clique sur le bouton supprimer , il supprime les 3 en meme temps , il y aurait pas un moyen pour qu'il supprime un par un?
    je pense qu'il faudrait mettre a la places de "saisies1" --> "nlignes" mais j'arrive pas a le réadapter pour qu'il marche.
    merci
     
  20. zeb
    zeb WRInaute accro
    Inscrit:
    5 Décembre 2004
    Messages:
    12 196
    J'aime reçus:
    1
    Toujours ton histoire d'indice :
    PHP:
    <span class="syntaxhtml"><span class="syntaxdefault">    </span><span class="syntaxkeyword"><</span><span class="syntaxdefault">script</span><span class="syntaxkeyword">><br /></span><span class="syntaxdefault">    var nlignes </span><span class="syntaxkeyword">=</span><span class="syntaxdefault"> 0</span><span class="syntaxkeyword">;<br /></span><span class="syntaxdefault">    function Ajouter</span><span class="syntaxkeyword">(){<br /></span><span class="syntaxdefault">        nlignes</span><span class="syntaxkeyword">++;<br /></span><span class="syntaxdefault">        var obj </span><span class="syntaxkeyword">=</span><span class="syntaxdefault"> document</span><span class="syntaxkeyword">.</span><span class="syntaxdefault">getElementById</span><span class="syntaxkeyword">(</span><span class="syntaxstring">'saisies'</span><span class="syntaxkeyword">);<br /></span><span class="syntaxdefault">        obj</span><span class="syntaxkeyword">.</span><span class="syntaxdefault">innerHTML </span><span class="syntaxkeyword">=</span><span class="syntaxdefault"> obj</span><span class="syntaxkeyword">.</span><span class="syntaxdefault">innerHTML </span><span class="syntaxkeyword">+</span><span class="syntaxdefault"> </span><span class="syntaxstring">'<div id="champ'</span><span class="syntaxkeyword">+</span><span class="syntaxdefault">nlignes</span><span class="syntaxkeyword">+</span><span class="syntaxstring">'">Produit '</span><span class="syntaxkeyword">+</span><span class="syntaxdefault">nlignes</span><span class="syntaxkeyword">+</span><span class="syntaxstring">' <input type="text" size="4" name="P'</span><span class="syntaxkeyword">+</span><span class="syntaxdefault">nlignes</span><span class="syntaxkeyword">+</span><span class="syntaxstring">'" /> Quantité '</span><span class="syntaxkeyword">+</span><span class="syntaxdefault">nlignes</span><span class="syntaxkeyword">+</span><span class="syntaxstring">' <input type="text" name="QT'</span><span class="syntaxkeyword">+</span><span class="syntaxdefault">nlignes</span><span class="syntaxkeyword">+</span><span class="syntaxstring">'" /> et de trois '</span><span class="syntaxkeyword">+</span><span class="syntaxdefault">nlignes</span><span class="syntaxkeyword">+</span><span class="syntaxstring">' <input type="text" name="QT'</span><span class="syntaxkeyword">+</span><span class="syntaxdefault">nlignes</span><span class="syntaxkeyword">+</span><span class="syntaxstring">'" /> <input type="button" value="supprimer" onclick="document.getElementById(\'champ'</span><span class="syntaxkeyword">+</span><span class="syntaxdefault">nlignes</span><span class="syntaxkeyword">+</span><span class="syntaxstring">'\').innerHTML=\'\';" /></div>'</span><span class="syntaxkeyword">;<br /></span><span class="syntaxdefault">    </span><span class="syntaxkeyword">}<br /></span><span class="syntaxdefault">    </script><br /></span><br />    <Form><br />    <Input Type="Button" Value="Ajout ligne" OnClick="Ajouter();"><br />    <br><br />    <div id="saisies"></div><br />    </Form></span>
     
  21. itry
    itry Nouveau WRInaute
    Inscrit:
    7 Février 2012
    Messages:
    33
    J'aime reçus:
    0
    ohh merci bcp zeb !!! t trop cool!!! ça marche a merveille , comme par magie !!
     
Chargement...
Similar Threads - Problème bouton ajout Forum Date
Bouton avec texte 'acheter', Problème pour le référencement ? Débuter en référencement 12 Décembre 2013
Probleme bouton css Développement d'un site Web ou d'une appli mobile 18 Novembre 2013
Problème d'intégration du bouton "j'aime" Facebook 30 Avril 2013
Problème bouton Partager de Facebook Facebook 18 Janvier 2012
Problème bouton "j'aime" URL canonique Facebook 31 Août 2011
[Problème Flash CS5] lien assigné à un bouton Le café de WebRankInfo 17 Août 2011
Problème bouton +1 google Google : l'entreprise, les sites web, les services 6 Juin 2011
Problème de paramètre avec le bouton "j'aime" Facebook 17 Mai 2011
probleme alignement bouton en html Développement d'un site Web ou d'une appli mobile 14 Décembre 2010
probleme bouton "j'aime" de facebook Développement d'un site Web ou d'une appli mobile 26 Août 2010
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice