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

  1. #1
    Futur Membre du Club
    Homme Profil pro
    Assistant aux utilisateurs
    Inscrit en
    janvier 2018
    Messages
    35
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 22
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : Assistant aux utilisateurs
    Secteur : Distribution

    Informations forums :
    Inscription : janvier 2018
    Messages : 35
    Points : 8
    Points
    8

    Par défaut Insérer un grand nombre de lignes et afficher span

    Bonjour,

    Je bloque avec mon code. Si quelqu'un pouvais me montrer ce qui cause l'erreur... merci d'avance.

    1.php : formulaire

    2.php l'insertion SQL et renvois valeur au script.js si succes ou pas

    script.js fais passer les variables dynamiquement

    1.php

    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
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    <?php include 'connection.php' ; ?>
    <HTML>
      <HEAD>
      <meta charset="utf-8">
      <title>Poster en ajax</title>
      <link rel="stylesheet" href="ajax.css">
      <script src="jquery.min.js"></script>
      <script src="script.js"></script>
     
     
    <TITLE> Add/Remove dynamic rows in HTML table </TITLE>
     
    <SCRIPT language="javascript">
    function addRow(tableID) {
     
          var table = document.getElementById(tableID);
     
          var rowCount = table.rows.length;
          var row = table.insertRow(rowCount);
     
          var cell1 = row.insertCell(0);
          var element1 = document.createElement("input");
          element1.type = "checkbox";
          element1.name="chkbox[]";
          cell1.appendChild(element1);
     
          var cell2 = row.insertCell(1);
          cell2.innerHTML = "<input type='text'  name='devis_ref[]' class='devis_ref[]' />";
     
          var cell3 = row.insertCell(2);
          cell3.innerHTML = "<input type='text'  name='devis_contact[]' class='devis_contact[]' />";
     
     
          var cell4 = row.insertCell(3);
          cell4.innerHTML = "<input type='text'  name='devis_refarticle[]' class='devis_refarticle[]' />";
     
          var cell5 = row.insertCell(4);
          cell5.innerHTML =  "<input type='text'  name='devis_designationarticle[]' class='devis_designationarticle[]' />";
     
          var cell6 = row.insertCell(5);
          cell6.innerHTML = "<input type='text'  name='devis_pu[]' class='devis_pu[]' />";
     
          var cell7 = row.insertCell(6);
          cell7.innerHTML =  "<input type='text'  name='devis_unite[]' class='devis_unite[]' />";
     
          var cell8 = row.insertCell(7);
          cell8.innerHTML = "<input type='text'  name='devis_quantite[]' class='devis_quantite[]' />";
     
          var cell9 = row.insertCell(8);
          cell9.innerHTML =  "<input type='text'  name='devis_prixnetunite[]' class='devis_prixnetunite[]' />";
          }
     
        function deleteRow(tableID) {
            try {
            var table = document.getElementById(tableID);
            var rowCount = table.rows.length;
     
            for(var i=0; i<rowCount; i++) {
                var row = table.rows[i];
                var chkbox = row.cells[0].childNodes[0];
                if(null != chkbox && true == chkbox.checked) {
                    table.deleteRow(i);
                    rowCount--;
                    i--;
                }
            }
            }catch(e) {
                alert(e);
            }
        }
     
    </SCRIPT>
    </HEAD>
    <BODY>
          <div class="msg"></div>
    <form action="" method="post" name="f">
      <INPUT type="button" class="btn btn-success" value="Ajouter un autre produit" onClick="addRow('dataTable')" />
     
      <INPUT type="button" class="btn btn-danger" value="Supprimer le produit" onClick="deleteRow('dataTable')" />
     
     
    <table class="table table-bordered table-striped table-condensed" width="1000" border="1">
    <thead>
    <tr>
    <th width="40"></th>
    <th width="40">ID</th>
    <th width="40">Contact</th>
    <th width="40">Référence Article</th>
    <th width="40">Désignation Article</th>
    <th width="40">Prix unitaire</th>
    <th width="40">Unité</th>
    <th width="40">Quantité</th>
    <th width="40">Prix Net Unitaire</th>
    </tr>
    </thead>
    <tbody id="dataTable">
     
    </tbody>
    </TABLE>
     
     
    <INPUT type="submit" value="Insert" name="submit" />
    </form>
    </BODY>
    script.js
    Code JavaScript : 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
    $(document).ready(function () {
      $('.submit').click(function () {
        $.post('2.php', {
          devis_ref: Object.values(document.getElementsByClassName('devis_ref[]')).map(el => el.value),
          devis_contact: Object.values(document.getElementsByClassName('devis_contact[]')).map(el => el.value),
          devis_refarticle: Object.values(document.getElementsByClassName('devis_refarticle[]')).map(el => el.value),
          devis_designationarticle: Object.values(document.getElementsByClassName('devis_designationarticle[]')).map(el => el.value),
          devis_pu: Object.values(document.getElementsByClassName('devis_pu[]')).map(el => el.value),
          devis_unite: Object.values(document.getElementsByClassName('devis_unite[]')).map(el => el.value),
          devis_quantite: Object.values(document.getElementsByClassName('devis_quantite[]')).map(el => el.value),
          devis_prixnetunite: Object.values(document.getElementsByClassName('devis_prixnetunite[]')).map(el => el.value)
        }, (resultDuScriptPHP) => {
          if (resultDuScriptPHP === 'ok') {
            $('.msg').append('<span>Vos données ont été envoyées</span>');
          }
          else if (resultDuScriptPHP === 'formNotComplete') {
            $('.msg').append('<span>Veuillez complétez tous les champs</span>');
          }
        });
      });
    });

    Code PHP : 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
    <?php try { $bdd = new PDO('mysql:host=localhost;dbname=contact', 'root', '', array (PDO::MYSQL_ATTR_INIT_COMMAND => 'SET NAMES \'UTF8\''));}
    catch (Exception $e) {
      die('Erreur : ' . $e->getMessage()) ; }
    $bdd->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
     
    $resultDuScriptPHP = null;
     
        if(isset($_POST['submit']))
          {
           foreach ($_POST['devis_ref'] as $key => $value)
              {
                  $devis_ref = $_POST["devis_ref"][$key];
                  $devis_contact = $_POST["devis_contact"][$key];
                  $devis_refarticle = $_POST["devis_refarticle"][$key];
                  $devis_designationarticle = $_POST["devis_designationarticle"][$key];
                  $devis_pu = $_POST["devis_pu"][$key];
                  $devis_unite = $_POST["devis_unite"][$key];
                  $devis_quantite = $_POST["devis_quantite"][$key];
                  $devis_prixnetunite = $_POST["devis_prixnetunite"][$key];
     
                  $req = $bdd->prepare("INSERT INTO devis(devis_ref, devis_contact, devis_refarticle, devis_designationarticle, devis_pu, devis_unite, devis_quantite, devis_prixnetunite) VALUES(?,?,?,?,?,?,?,?)");
                  $req->execute(array($devis_ref,$devis_contact,$devis_refarticle,$devis_designationarticle,$devis_pu,$devis_unite,$devis_quantite,$devis_prixnetunite));
               }
                    $resultDuScriptPHP = 'ok';
                    echo $resultDuScriptPHP;
              }
             else {
                    $resultDuScriptPHP = 'formNotComplete';
                    die("Unable to insert the data");
              }
          ?>
    Un var-dump dans mon formulaire me renvoie bien les valeurs rentrées... mais elles ne s'insèrent pas, le span ne s'affiche pas, et la page se recharge... si vous avez une idée... merci
    Nom : array.png
Affichages : 59
Taille : 25,5 Ko

  2. #2
    Membre expert Avatar de psychadelic
    Profil pro
    Inscrit en
    mai 2010
    Messages
    1 958
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mai 2010
    Messages : 1 958
    Points : 3 843
    Points
    3 843

    Par défaut

    Forcément, t'envoie les données par un submit, donc la page se recharge ensuite...

    Le web c'est du client / serveur, c'est pas du Time Sharing ou je ne sais quoi d'autre
    «La pluralité des voix n'est pas une preuve, pour les vérités malaisées à découvrir, tant il est bien plus vraisemblable qu'un homme seul les ait rencontrées que tout un peuple.» [ René Descartes ] - Discours de la méthode

  3. #3
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    13 577
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 51
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 13 577
    Points : 27 573
    Points
    27 573

    Par défaut

    Bonjour,

    déjà, pour éviter que le page se recharge ("submit" du formulaire) :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
      $('.submit').click(function ( event ) {
        event.preventDefault();
    ...

    Je ne l'ai pas déjà dit ??
    Si : dans cette discussion !

    POURQUOI ouvrir une nouvelle discussion, si tu ne prends même pas en compte les conseils donnés ??
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  4. #4
    Futur Membre du Club
    Homme Profil pro
    Assistant aux utilisateurs
    Inscrit en
    janvier 2018
    Messages
    35
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 22
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : Assistant aux utilisateurs
    Secteur : Distribution

    Informations forums :
    Inscription : janvier 2018
    Messages : 35
    Points : 8
    Points
    8

    Par défaut

    Merci pour vos réponse.
    @psychadelic, j'ai dans un autre site une insertion qui fonctionne grâce à un submit géré par un javascript derrière comme ici, et ça fonctionne très bien, et cela sans recharger la page.

    @jreaux62, oui tout à fait j'ai oublié de remettre ton bout de code. Et cela ne fonctionne pas. Prends mon code, essaye de ton côté et tu verras.

    Code : 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
     
    $(document).ready(function () {
      $('.submit').click(function ( event ) {
        event.preventDefault();
        $.post('2.php', {
          devis_ref: Object.values(document.getElementsByClassName('devis_ref[]')).map(el => el.value),
          devis_contact: Object.values(document.getElementsByClassName('devis_contact[]')).map(el => el.value),
          devis_refarticle: Object.values(document.getElementsByClassName('devis_refarticle[]')).map(el => el.value),
          devis_designationarticle: Object.values(document.getElementsByClassName('devis_designationarticle[]')).map(el => el.value),
          devis_pu: Object.values(document.getElementsByClassName('devis_pu[]')).map(el => el.value),
          devis_unite: Object.values(document.getElementsByClassName('devis_unite[]')).map(el => el.value),
          devis_quantite: Object.values(document.getElementsByClassName('devis_quantite[]')).map(el => el.value),
          devis_prixnetunite: Object.values(document.getElementsByClassName('devis_prixnetunite[]')).map(el => el.value)
        }, (resultDuScriptPHP) => {
          if (resultDuScriptPHP === 'ok') {
            $('.msg').append('<span>Vos données ont été envoyées</span>');
          }
          else if (resultDuScriptPHP === 'formNotComplete') {
            $('.msg').append('<span>Veuillez complétez tous les champs</span>');
          }
        });
      });
    });
    Mais je reposte mon problème car je suis toujours bloqué: pourquoi je ne peux pas insérer mes lignes et pourquoi aucun span ne s'affiche?
    Je n'ai aucune erreur, la console est vide... Si vous pouviez me guider vers le moindre indice, je suis preneur. Merci.

    PS : Sans javascript j'insers toutes les lignes de mon tableau. Cela fonctionne très bien. Le pb vient donc du js, que je maîtrise encore mal. MERCI

  5. #5
    Membre expert Avatar de psychadelic
    Profil pro
    Inscrit en
    mai 2010
    Messages
    1 958
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mai 2010
    Messages : 1 958
    Points : 3 843
    Points
    3 843

    Par défaut

    Citation Envoyé par Zarkoffe Voir le message
    Merci pour vos réponse.
    @psychadelic, j'ai dans un autre site une insertion qui fonctionne grâce à un submit géré par un javascript derrière comme ici, et ça fonctionne très bien, et cela sans recharger la page.
    et je suis censé te croire sur parole ?
    Quand bien ce serait vrai, il y a forcément quelque chose entre ces 2 pages qui fait la différence.

    Ce que tu veux faire ce traite avec de l'Ajax, pas par un submit de formulaire.

    et au passage, si tu utilise jQuery tu peut auss utiliser les fonctions .serialize() ou .serializeArray()
    ça évitera tes tartines de code ou les erreurs d'innatentions mettent à malin plaisir à s'y inviter.
    «La pluralité des voix n'est pas une preuve, pour les vérités malaisées à découvrir, tant il est bien plus vraisemblable qu'un homme seul les ait rencontrées que tout un peuple.» [ René Descartes ] - Discours de la méthode

  6. #6
    Futur Membre du Club
    Homme Profil pro
    Assistant aux utilisateurs
    Inscrit en
    janvier 2018
    Messages
    35
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 22
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : Assistant aux utilisateurs
    Secteur : Distribution

    Informations forums :
    Inscription : janvier 2018
    Messages : 35
    Points : 8
    Points
    8

    Par défaut

    table.zip

    AJAX2.zip

    AJAX2 : insertion simple dynamique avec SPAN
    table : j'essaye de faire la même chose, mais avec un tableau.

  7. #7
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    13 577
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 51
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 13 577
    Points : 27 573
    Points
    27 573

    Par défaut

    Citation Envoyé par psychadelic Voir le message
    ...il y a forcément quelque chose entre ces 2 pages qui fait la différence...
    +1.

    Quand on a un code qui fonctionne et un autre qui ne fonctionne pas (mais qui est "censé" fonctionner pareil)...
    Le PREMIER REFLEXE devrait être de les COMPARER.


    Si tu te contentes de regarder ton code avec des yeux ronds, comme une poule qui trouve un couteau... tu ne risques pas d'aller bien loin.
    Bon courage.
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  8. #8
    Membre expert Avatar de psychadelic
    Profil pro
    Inscrit en
    mai 2010
    Messages
    1 958
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mai 2010
    Messages : 1 958
    Points : 3 843
    Points
    3 843

    Par défaut

    Ben justement, dans ton exemple AJAX2 il n'y a aucun formulaire ( balise <form> )
    «La pluralité des voix n'est pas une preuve, pour les vérités malaisées à découvrir, tant il est bien plus vraisemblable qu'un homme seul les ait rencontrées que tout un peuple.» [ René Descartes ] - Discours de la méthode

  9. #9
    Futur Membre du Club
    Homme Profil pro
    Assistant aux utilisateurs
    Inscrit en
    janvier 2018
    Messages
    35
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 22
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : Assistant aux utilisateurs
    Secteur : Distribution

    Informations forums :
    Inscription : janvier 2018
    Messages : 35
    Points : 8
    Points
    8

    Par défaut

    AJAX1.zip
    Pour faire court, avec ce zip, je ne parviens à insérer qu'une seule ligne alors que je tente d'en faire passer un tableau.
    Un pb sur mon foreach lorsque j'essaye de mettre en place un foreach.
    PS : avec des input renvoyant ceci:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
     
          var cell2 = row.insertCell(1);
          cell2.innerHTML = "<input type='text' placeholder='Votre nom' class='nom' />";
     
          var cell3 = row.insertCell(2);
          cell3.innerHTML = "<textarea placeholder='Votre message' class='message'></textarea>";
    Merci d'avance

  10. #10
    Membre expert Avatar de psychadelic
    Profil pro
    Inscrit en
    mai 2010
    Messages
    1 958
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mai 2010
    Messages : 1 958
    Points : 3 843
    Points
    3 843

    Par défaut

    ton code est horrible à lire.
    Si tu débute évite de donner des noms identiques ceux des balises html, ou à celle de fonctions natives de JavaScript

    var Table = mais var Table_Noms_Messages ...
    tout ton code est truffé de ce genre de chose, mais bon .

    visiblement tu n'a pas compris comment se passent les valeurs dans la fonction Load ( entre autres choses...)
    Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    $(document).ready(function()
    {
      $('.submit').click(function()   // si on clique sur l'élément  ayant pour classe="submit"
      {
        $(".msg").slideDown().load("send.php", {
          nom: $('.nom').val(),                 // --> l'élément ayant pour classe="nom" est transmis
          message: $('.message').val()         // --> l'élément ayant pour classe="message" est transmis
        });
      });
    });
    «La pluralité des voix n'est pas une preuve, pour les vérités malaisées à découvrir, tant il est bien plus vraisemblable qu'un homme seul les ait rencontrées que tout un peuple.» [ René Descartes ] - Discours de la méthode

  11. #11
    Futur Membre du Club
    Homme Profil pro
    Assistant aux utilisateurs
    Inscrit en
    janvier 2018
    Messages
    35
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 22
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : Assistant aux utilisateurs
    Secteur : Distribution

    Informations forums :
    Inscription : janvier 2018
    Messages : 35
    Points : 8
    Points
    8

    Par défaut

    class='nom' ligne 26
    class='message' ligne 29
    class='msg' ligne 56

    Je connais mon code merci.

    Et je te dis que ça s'insert, donc c'est que mes variables passent.
    Mon problème : je veux insérer plusieurs lignes, et seulement la 1ère passe.

    MERCI

  12. #12
    Membre expert Avatar de psychadelic
    Profil pro
    Inscrit en
    mai 2010
    Messages
    1 958
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mai 2010
    Messages : 1 958
    Points : 3 843
    Points
    3 843

    Par défaut

    ben non,
    ok, mais il n'y en a pas 1 seul mais plusieurs éléments utilisant cette même classe, et il n'enverra que le premier trouvé
    «La pluralité des voix n'est pas une preuve, pour les vérités malaisées à découvrir, tant il est bien plus vraisemblable qu'un homme seul les ait rencontrées que tout un peuple.» [ René Descartes ] - Discours de la méthode

  13. #13
    Futur Membre du Club
    Homme Profil pro
    Assistant aux utilisateurs
    Inscrit en
    janvier 2018
    Messages
    35
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 22
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : Assistant aux utilisateurs
    Secteur : Distribution

    Informations forums :
    Inscription : janvier 2018
    Messages : 35
    Points : 8
    Points
    8

    Par défaut

    Euh... C'est-à-dire? Oui je fais passer plusieurs variables, et alors?
    Comment je dois m'y prends alors ?

  14. #14
    Membre expert Avatar de psychadelic
    Profil pro
    Inscrit en
    mai 2010
    Messages
    1 958
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mai 2010
    Messages : 1 958
    Points : 3 843
    Points
    3 843

    Par défaut

    Citation Envoyé par Zarkoffe Voir le message
    Oui je fais passer plusieurs variables, et alors?
    non tu ne fais pas passer plusieurs variables , mais juste la première de chacune des éléments ayant pour classes nom ou message.

    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
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    <!DOCTYPE html>
    <html lang="fr">
     
    <head>
      <meta charset="UTF-8" />
      <title>Poster en ajax</title>
      <link rel="stylesheet" href="ajax.css">
     
      <script src="jquery.min.js"></script>
     
      <style>
        .myTablePlus {
          width : 1000px;
          border: 1px solid black;
        }
        .myTablePlus th,
        .myTablePlus td {
          border: 1px solid grey;
        }
      </style>
    </head>
     
    <body>
      <h2>Ajax</h2>
      <div class="msg"></div>
    <!--   <input type="button" class="btn btn-success" value="Ajouter un autre produit" id="add_Row" />
      <input type="button" class="btn btn-danger" value="Supprimer le produit" id="Del_Row" />
     -->
      <button id="add_Row" class="btn btn-success">Ajouter un autre produit</button>
      <button id="Del_Row" class="btn btn-danger">Supprimer le(s) produit(s) coché'(s)</button>
     
      <table class="table table-bordered table-striped table-condensed myTablePlus">
        <thead>
          <tr>
            <th width="40"></th>
            <th width="40">nom</th>
            <th width="40">message</th>
          </tr>
        </thead>
        <tbody id="My_dataTable"> </tbody>
      </table>
     
      <button id="bt_Envoi" class="submit">Envoyer...</button>
      <!--
          <input  class="submit" type="submit" value="Envoyer..." />
        mettre un bouton submit alors qu'il n'y a pas de formulaire, c'est encore une ambiguité inutile
      -->
      <script>
      $(document).ready(function()
      {
        var Table_noms_messages = document.getElementById('My_dataTable');
     
        $('#add_Row').click(function() {
          var
            rowCount      = Table_noms_messages.rows.length,
            nvlle_ligneT  = Table_noms_messages.insertRow(rowCount),
            cell_0        = nvlle_ligneT.insertCell(0),
            cell_1        = nvlle_ligneT.insertCell(1),
            cell_2        = nvlle_ligneT.insertCell(2),
            nv_input      = document.createElement("input")
          ;
          nv_input.type  = "checkbox";
          nv_input.name  = "chkbox[]";
     
          cell_0.appendChild(nv_input);
          cell_1.innerHTML = "<input type='text' placeholder='Votre nom' class='nom' />";
          cell_2.innerHTML = "<textarea placeholder='Votre message' class='message'></textarea>";
        });
     
        $('#Del_Row').click(function() {
          try {
            var rowCount = Table_noms_messages.rows.length;
            for(let i=0; i<rowCount; i++) {
              let
                ligneT = Table_noms_messages.rows[i],
                chkbox = ligneT.cells[0].childNodes[0]
              ;
              if(chkbox!=null && chkbox.checked)
              {
                Table_noms_messages.deleteRow(i);
                rowCount--;
                i--;
              }
            }
          }
          catch(e) {
            alert(e);
          }
        });
     
        $('#bt_Envoi').click(function() {
          var params_envoi = {
            nom: [], 
            message: []
          } 
          $(".nom").each(function()     {  params_envoi.nom.push( $(this).val()); });
          $(".message").each(function() {  params_envoi.message.push( $(this).val()); });
          $(".msg").slideDown().load("send.php", params_envoi);
        });
      });
      </script>
    </body>
    </html>

    ou quelque chose d'approchant..
    «La pluralité des voix n'est pas une preuve, pour les vérités malaisées à découvrir, tant il est bien plus vraisemblable qu'un homme seul les ait rencontrées que tout un peuple.» [ René Descartes ] - Discours de la méthode

  15. #15
    Futur Membre du Club
    Homme Profil pro
    Assistant aux utilisateurs
    Inscrit en
    janvier 2018
    Messages
    35
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 22
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : Assistant aux utilisateurs
    Secteur : Distribution

    Informations forums :
    Inscription : janvier 2018
    Messages : 35
    Points : 8
    Points
    8

    Par défaut

    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
    <!--   <input type="button" class="btn btn-success" value="Ajouter un autre produit" id="add_Row" />
      <input type="button" class="btn btn-danger" value="Supprimer le produit" id="Del_Row" />
     -->
    Pas pratique, car si j'ajoute aucune ligne, je n'ai pas de ligne en faite. Donc je n'insers aucune donnée.

  16. #16
    Membre expert Avatar de psychadelic
    Profil pro
    Inscrit en
    mai 2010
    Messages
    1 958
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mai 2010
    Messages : 1 958
    Points : 3 843
    Points
    3 843

    Par défaut

    RELIS MON CODE!

    J'ai transformé tes deux inputs en VRAI boutons ( les inputs sont liés à l'utilisation d'un formulaire, ce qui n'est pas le cas dans ta page)
    «La pluralité des voix n'est pas une preuve, pour les vérités malaisées à découvrir, tant il est bien plus vraisemblable qu'un homme seul les ait rencontrées que tout un peuple.» [ René Descartes ] - Discours de la méthode

  17. #17
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    13 577
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 51
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 13 577
    Points : 27 573
    Points
    27 573

    Par défaut

    Bonjour,

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    devis_ref: Object.values(document.getElementsByClassName('devis_ref[]')).map(el => el.value),
    1- As-tu vérifié si ça recupère bien ce qu'il faut ?

    Si oui : as-tu vérifié que tu récupères bien toutes les données dans le fichier PHP ?
    Si (re)oui : ces données sont-elles correctement traitées ?

    Ça s'appelle le débogage.


    2- fichier PHP :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
        if(isset($_POST['submit']))
    Je n'ai pas vu de paramètre "submit" dans le code JS...
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  18. #18
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    mars 2002
    Messages
    37 983
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 68
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2002
    Messages : 37 983
    Points : 64 965
    Points
    64 965
    Billets dans le blog
    1

    Par défaut

    Sinon y'a un truc utile qui s'appelle la console ...

    Je précise pas la nintendo ni la Wii ....
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag


    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  19. #19
    Futur Membre du Club
    Homme Profil pro
    Assistant aux utilisateurs
    Inscrit en
    janvier 2018
    Messages
    35
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 22
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : Assistant aux utilisateurs
    Secteur : Distribution

    Informations forums :
    Inscription : janvier 2018
    Messages : 35
    Points : 8
    Points
    8

    Par défaut

    Autant pour moi Psy, ça marche, soucis de biblio de ma part.
    @jreaux62 ma console est vide. J'ai suivis tes conseils et j'ai simplifié mon exemple.

    J'ai maintenant un exemple qui fonctionne : insertion d'une ligne + span affiché.
    Objectif : insérer plusieurs lignes. (seulement la 1ère s'insere... et c'est normal vu le JS. Je ne retourne que 2 variables simples ici). Seulement dès que je repars sur des retournements d'array du style
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    devis_ref: Object.values(document.getElementsByClassName('devis_ref[]')).map(el => el.value),
    Ca part en couille. Je vous mets mon code au complet en dessous.
    1.php
    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
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    <!doctype html>
    <html lang="en">
      <head>
          <meta charset="utf-8">
          <title>Poster en ajax</title>
          <link rel="stylesheet" href="ajax.css">
          <script src="jquery.min.js"></script>
          <script src="script.js"></script>
     
          <SCRIPT language="javascript">
     
        function addRow(tableID) {
     
          var table = document.getElementById(tableID);
     
          var rowCount = table.rows.length;
          var row = table.insertRow(rowCount);
     
          var cell1 = row.insertCell(0);
          var element1 = document.createElement("input");
          element1.type = "checkbox";
          element1.name="chkbox[]";
          cell1.appendChild(element1);
     
          var cell2 = row.insertCell(1);
          cell2.innerHTML = "<input type='text' placeholder='Votre nom' class='nom' />";
     
          var cell3 = row.insertCell(2);
          cell3.innerHTML = "<textarea placeholder='Votre message' class='message'></textarea>";
          }
     
        function deleteRow(tableID) {
            try {
            var table = document.getElementById(tableID);
            var rowCount = table.rows.length;
     
            for(var i=0; i<rowCount; i++) {
                var row = table.rows[i];
                var chkbox = row.cells[0].childNodes[0];
                if(null != chkbox && true == chkbox.checked) {
                    table.deleteRow(i);
                    rowCount--;
                    i--;
                }
            }
            }catch(e) {
                alert(e);
            }
        }
     
    </SCRIPT>
      </head>
     
      <body>
          <h2>Ajax</h2>
          <div class="msg"></div>
     
     
      <input type="button" class="btn btn-success" value="Ajouter un autre produit" onClick="addRow('dataTable')" />
     
      <input type="button" class="btn btn-danger" value="Supprimer le produit" onClick="deleteRow('dataTable')" />
     
        <table class="table table-bordered table-striped table-condensed" width="1000" border="1">
        <thead>
        <tr>
        <th width="40"></th>
        <th width="40">nom</th>
        <th width="40">message</th>
        </tr>
        </thead>
        <tbody id="dataTable">
     
        </tbody>
        </table>
     
        <input class="submit" type="submit" value="Envoyer...">
        </body>
    </html>
    script.js
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    $(document).ready(function(){
        $('.submit').click(function(){
        $(".msg").slideDown().load("send.php", {
         nom: $('.nom').val(),
        message: $('.message').val()});
      });
    });
    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <?php $bdd = new PDO('mysql:host=localhost;dbname=ajax', 'root', '');
    if(!empty($_POST['nom']) && !empty($_POST['message'])) {
      {
          $nom = $_POST["nom"];
          $message = $_POST["message"];
     
        $req = $bdd->prepare("INSERT INTO js(nom, message) VALUES(?,?)");
    		$req->execute(array($nom,$message));
        echo "<span class='success'>Vos données ont été envoyées</span>";
      }
    } ?>

    Voilà. Je ne comprends pas pourquoi le js refuse que je calibre mon code en tableau [] car ce sont bien des lignes de tableaux qu'il reçoit... merci d'avance

  20. #20
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    13 577
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 51
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 13 577
    Points : 27 573
    Points
    27 573

    Par défaut

    MONTRE le contenu des console.log !
    • QU'EST-CE qui est BON ?
    • QU'EST-CE qui est FAUX ?

    JE RÉPÈTE : tu es LE SEUL à pouvoir TESTER ton code !
    Si tu ne MONTRES pas les résultats (console.log,...), INUTILE de répéter "ça ne fonctionne pas" !!


    N.B. Dans l'AUTRE DISCUSSION (là aussi : c'est RIDICULE d'ouvrir 2 discussions sur le MEME PROBLEME !), je t'ai montré comment récupérer TOUTES LES VALEURS.

    Mais tu n'en tiens pas compte...
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

+ Répondre à la discussion
Cette discussion est résolue.
Page 1 sur 3 123 DernièreDernière

Discussions similaires

  1. [2000] Meilleure méthode pour insérer un grand nombre de lignes
    Par nicodev24 dans le forum Développement
    Réponses: 11
    Dernier message: 31/10/2016, 12h25
  2. Réponses: 4
    Dernier message: 14/11/2012, 13h14
  3. Afficher/cacher un grand nombre de lignes d'un tableau
    Par kimblue77 dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 08/12/2011, 12h03
  4. vue récupérant un grand nombre de lignes
    Par pointe dans le forum Requêtes
    Réponses: 5
    Dernier message: 10/12/2006, 20h29
  5. Réponses: 12
    Dernier message: 30/05/2006, 16h57

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