Insérer un grand nombre de lignes et afficher span

**Zarkoffe** · 09/11/2018, 11h08

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 : 453
Taille : 25,5 Ko

Nom : array.png
Affichages : 453
Taille : 25,5 Ko

**psychadelic** · 09/11/2018, 15h07

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

Invité · 09/11/2018, 15h35

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();
...

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 ??

**Zarkoffe** · 12/11/2018, 11h23

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

**psychadelic** · 12/11/2018, 14h24

Envoyé par Zarkoffe

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.

**Zarkoffe** · 12/11/2018, 14h38

table.zip

AJAX2.zip

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

Invité · 12/11/2018, 14h43

Envoyé par psychadelic

...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.

Insérer un grand nombre de lignes et afficher span

jQuery

Vue hybride

Discussions similaires

Partager

Partager