IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Ajout de lignes et envoi des données


Sujet :

JavaScript

  1. #1
    Candidat au Club
    Homme Profil pro
    Administrateur systèmes et réseaux
    Inscrit en
    décembre 2021
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France, Seine et Marne (Île de France)

    Informations professionnelles :
    Activité : Administrateur systèmes et réseaux
    Secteur : Santé

    Informations forums :
    Inscription : décembre 2021
    Messages : 3
    Points : 2
    Points
    2
    Par défaut Ajout de lignes et envoi des données
    Bonjour,

    Après lecture de cette discussion: https://www.developpez.net/forums/d3...gne-d-tableau/, le code m'intéressant, je voudrais savoir comment faire pour insérer les numéros d'ID pour un envoi du formulaire avec toutes les lignes et pas seulement la dernière :

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    <html>
    	<head>
    		<script type="text/javascript">
                            function ajoutLigne() {
                                    var Cell;
                                    var nom = document.getElementById("nom").value;
                                    var prenom = document.getElementById("prenom").value;
                                    var tableau = document.getElementById("tableau");
                                    var ligne = tableau.insertRow(-1); 
       
                                    Cell = ligne.insertCell(0);
                                    Cell.innerHTML = ligne.rowIndex;
                                    Cell = ligne.insertCell(1);
                                    Cell.innerHTML = nom;
                                    Cell = ligne.insertCell(2); 
                                    Cell.innerHTML = prenom;
                                    Cell = ligne.insertCell(3);
     
                                    var bouton = document.createElement("input");
                                    bouton.type = "button";
                                    bouton.value = "Supprimer";
                                    bouton.onclick = function(){suppression(ligne)};
                                    Cell.appendChild(bouton);
        
                                    //document.getElementById("nom").value = "";
                                    //document.getElementById("prenom").value = "";
                            }
                            
                            //for (n = 0; n < Cell.length; n++) {
                            //      (ligne.insertCell(n)).appendChild(champ(Cell[n]));
                            //}
     
                            function suppression(ligne) {
                                    document.getElementById('tableau').deleteRow(ligne.rowIndex);
     
                                    //Recomptage des lignes...
                                    var tableau = document.getElementById('tableau');
                                    var trs = tableau.rows;
                                    var n = trs.length;
                                    var i;
     
                                    for (i = 1; i < n; i++) {
                                            trs[i].cells[0].innerHTML = trs[i].rowIndex;
                                    }
                            }
                    </script>
    	</head>
    	<body>
    		<div align="center">
    			<FORM id="formulaire" method="post" action="result.php">
    				Nom <input type="text" id="nom" name="nom[]"><br>
    				Prenom <input type="text" id="prenom" name="prenom[]"><br>
    				<table name="tableau" id="tableau" border="1">
    					<tr>
    						<td>Numéro de ligne</td>
    						<td>Nom</td>
    						<td>Prenom</td>
    						<td>Supprimer la ligne</td>
    					</tr> 
    				</table>
    				<br>
    				<input type="button" value="Ajouter une ligne" onclick="ajoutLigne()" >
    				<br><br>
    				<input name="submit" type="submit" value="Envoyer" />
    			</FORM>
    		</div>
    	</body>
    </html>

    Et pour la récupération des infos :

    result.php

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <html>
    	<head>
    	</head>
    	<body>
    		<?php
                            print_r ($_POST);
                    ?>
    	</body>
    </html>


    Ce qui ne donne que :

    Array ( [nom] => Array ( [0] => Nom3 ) [prenom] => Array ( [0] => Prénom3 ) [submit] => Envoyer ).

    Et pas :

    Array ( [nom] => Array ( [0] => Nom1, [1] => Nom2, [2] => Nom3 ) [prenom] => Array ( [0] => Prénom1, [1] => Prénom2, [2] => Prénom3 ) [submit] => Envoyer ).

    (quelque chose comme ça :-) )


    Quelqu'un saurait ajouter la notion d'ID ([0], [1], [2], ...) lors de l'ajout de lignes ?


    Par avance merci.

  2. #2
    Membre confirmé
    Homme Profil pro
    Webdesigner
    Inscrit en
    juin 2014
    Messages
    334
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 62
    Localisation : France, Hautes Pyrénées (Midi Pyrénées)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Associations - ONG

    Informations forums :
    Inscription : juin 2014
    Messages : 334
    Points : 634
    Points
    634
    Par défaut
    Bonjour. Je me suis permis de refaire cette page à ma façon. Un de ses avantages, outre sa simplicité, est de ne pas avoir besoin de la souris pour ajouter des personnes. La touche tab suffit.
    Je n'ai pas mis l'identifiant, à mon avis inutile : c'est en traitant le tableau, dans le script PHP que tu incrémenteras celui-ci (ou mieux, ce sera fait par la bbd si le champ est en auto-incrément, ce qui évitera les doublons)
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <form action="result.php" method=post name=formu>
        <div id=personnes>
        </div>
    <input type=button onclick="ajout()" value="Ajouter une personne">
    <p style="text-align:center"><input type=submit value=Enregistrer></p>
    </form>
    <script>
    let liste = document.getElementById('personnes')
    function ajout() {
        let code = '<div>Nom : <input name=nom[] > Prénom <input name=prenom[]> <input type=button onclick="supprime(this)" value=Supprimer></div>';
        liste.insertAdjacentHTML('beforeEnd', code);
        liste.lastChild.querySelector('input').focus()
    }
    function supprime(moi) {
        liste.removeChild(moi.parentNode)
    }
    </script>

  3. #3
    Candidat au Club
    Homme Profil pro
    Administrateur systèmes et réseaux
    Inscrit en
    décembre 2021
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France, Seine et Marne (Île de France)

    Informations professionnelles :
    Activité : Administrateur systèmes et réseaux
    Secteur : Santé

    Informations forums :
    Inscription : décembre 2021
    Messages : 3
    Points : 2
    Points
    2
    Par défaut
    Bonjour,

    Merci pour ta réponse et tes modifications qui simplifient le code !

    Cela fonctionne super bien !

    Par contre je me heurte toujours à une petite chose à laquelle personne ne me répond jamais.

    Ce code va me permettre d'enregistrer en base de données les infos que je rentre dans les champs.
    Mais comment faire pour ré afficher ces infos dans le même formulaire afin de les modifier ?

    Je mets le code que j'ai fait :

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
     
    <html>
    	<head>
    	</head>
    	<body>
    		<?php
                            $acteurs = "Jake_Gyllenhaal, Jon_Favreau, Samuel_L. Jackson, Tom_Holland, Zendaya_";
                            $exp_acteurs = explode(', ', $acteurs);
                            $nb_acteurs = count($exp_acteurs);
                    ?>
    		<div align="center">
    			<form action="result_acteurs.php" method=post name=formu>
    			<div id=acteurs>
    				<?php
                                            $i = 0;
                                            $j = 1;
                                            while ($j <= $nb_acteurs) {
                                                    $recup_prenom_nom = explode('_', $exp_acteurs[$i]);
                                                    print "<div>";
                                                    print "Prénom :";
                                                    print "<input name=prenom[] value='$recup_prenom_nom[0]'>";
                                                    print "Nom :";
                                                    print "<input name=nom[] value='$recup_prenom_nom[1]'>";
                                                    print "<input type='button' onclick='supprime(this)' value='Supprimer'";
                                                    print "/<div>";
                                                    $i++;
                                                    $j++;
                                            }
                                    ?>
    			</div>
    				<br>
    				<input type=button onclick="ajout()" value="Ajouter un acteur">
    				<p style="text-align:center"><input type=submit value=Enregistrer></p>
    			</form>
    			<script>
                                    let liste = document.getElementById('acteurs')
                                    function ajout() {
                                            let code = '<div>Prénom : <input name=prenom[] > Nom : <input name=nom[]> <input type=button onclick="supprime(this)" value=Supprimer></div>';
                                            liste.insertAdjacentHTML('beforeEnd', code);
                                            liste.lastChild.querySelector('input').focus()
                                    }
                                    function supprime(moi) {
                                            liste.removeChild(moi.parentNode)
                                    }
                            </script>
    		</div>
    	</body>
    </html>

    Mon problème est que le seul bouton supprimer qui fonctionne est celui de la première ligne, et qu'il supprime toutes les lignes !
    De plus, quand j'ajoute une nouvelle ligne, elle ne se positionne pas en dessous des autres, mais sous le bouton "Enregistrer".

    Peux-tu m'aider à résoudre ceci ?


    Par avance merci,

    Sébastien

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    15 759
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 15 759
    Points : 40 033
    Points
    40 033
    Par défaut
    Bonjour,
    je note un manque de rigueur dans ton code ligne 24 et 25
    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    print "<input type='button' onclick='supprime(this)' value='Supprimer'";
    print "/<div>";
    • ligne 24 : manque le > de fin de balise
    • ligne 25 : / est en dehors de <div>

  5. #5
    Candidat au Club
    Homme Profil pro
    Administrateur systèmes et réseaux
    Inscrit en
    décembre 2021
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France, Seine et Marne (Île de France)

    Informations professionnelles :
    Activité : Administrateur systèmes et réseaux
    Secteur : Santé

    Informations forums :
    Inscription : décembre 2021
    Messages : 3
    Points : 2
    Points
    2
    Par défaut
    Désolé pour ces fautes d’inattention !

    Bon bah tout fonctionne bien !

    Mille fois merci !!!!

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 1
    Dernier message: 26/01/2019, 14h11
  2. Réponses: 18
    Dernier message: 26/06/2008, 11h10
  3. StringGrid ajout de ligne en fonction des données
    Par thierrybatlle dans le forum Delphi
    Réponses: 3
    Dernier message: 26/05/2006, 14h58
  4. Réponses: 1
    Dernier message: 05/04/2006, 10h49
  5. socket : envois des données impossible
    Par thechief dans le forum Réseau
    Réponses: 16
    Dernier message: 18/03/2006, 20h28

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo