Insertion SQL dynamique + SPAN success

**Zarkoffe** · 30/10/2018, 11h16

Bonjour,

Mon code me permet d'insérer plusieurs lignes dans ma bdd. J'ai voulu compléter mon code par du JS/Jquery pour faire passer mes variables:

- m'évitant le rechargement de page.

- affichant un span de succès ou d'echec sur mon insertion.

J'ai bien suivi la doc, mais ça ne s'insert plus dans ma base et le span ne s'affiche pas. Ci-dessous mon code.

1.php est le formulaire

2.php est l'insertion SQL

script.JS est le passage de variable dynamiques.

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[]' />";
      //cell2.innerHTML = "<select name='item[]' id='facture_fournisseur' type='text' class='form-control'>< $list = $bdd->query('SELECT * FROM fournisseur');while ($data = $list->fetch()) { ?><option value='< echo $data['fournisseur_nom']; ?>'> < echo $data['fournisseur_nom']; ?></option>< } $list->closeCursor(); ?></select>";
 
      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[]' name='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 :

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
 
$(document).ready(function(){
    $('.submit').click(function(){
      $.post('2.php', {
        devis_ref: $('devis_ref').val(),
        devis_contact: $('devis_contact').val(),
        devis_refarticle: $('devis_refarticle').val(),
        devis_designationarticle: $('devis_designationarticle').val(),
        devis_pu: $('devis_pu').val(),
        devis_unite: $('devis_unite').val(),
        devis_quantite: $('devis_quantite').val(),
        devis_prixnetunite: $('devis_prixnetunite').val()
        }, (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>');
           }
         });

2.php

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
<?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);
 
    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';
          }
         else {
                resultDuScriptPHP === 'formNotComplete';
          }
 ?>

merci!

Invité · 30/10/2018, 11h42

Bonjour,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('devis_ref')......

erreur de syntaxe jQuery.

1- Soit avec le name :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('input[name=devis_ref]')......

Pour les names comme name="devis_designationarticle[]" :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('input[name^=devis_designationarticle]')......

Le "^" peut se traduire par "commencant par"

2- Soit en mettant des id aux input / select /...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<input id="devis_ref"....>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('#devis_ref')......

A LIRE : Sélecteurs d'attribut

**Zarkoffe** · 30/10/2018, 11h59

merci pour ta réponse précise.
En effet je veux faire passer plusieurs lignes. Seulement, j'ai toujours cette fichue page qui se recharge sans insérer quoique ce soit, ni m'afficher mon span :/

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
 
$(document).ready(function(){
    $('.submit').click(function(){
      $.post('2.php', {
        devis_ref: $('input[name^=devis_ref]').val(),
        devis_contact: $('input[name^=devis_contact]').val(),
        devis_refarticle: $('input[name^=devis_refarticle]').val(),
        devis_designationarticle: $('input[name^=devis_designationarticle]').val(),
        devis_pu: $('input[name^=devis_pu]').val(),
        devis_unite: $('input[name^=devis_unite]').val(),
        devis_quantite: $('input[name^=devis_quantite]').val(),
        devis_prixnetunite: $('input[name^=devis_prixnetunite]').val()
        }, (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>');
           }
         });

Merci d'avance

Invité · 30/10/2018, 12h14

1- ATTENTION cependant : pour récupérer TOUTES les valeurs d'un champs "multiple" (avec des crochets []), il faut faire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
var devis_designationarticle = []; // array
$('input[name^=devis_designationarticle]').each(function() {
  devis_designationarticle.push($(this).val());
});

Pour récupérer des checkbox (cochées) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
var les_chexbox = []; // array
$('input[name^=les_chexbox]:checked').each(function() {
  les_chexbox.push($(this).val());
});

2- De manière beaucoup plus simple, on peut utiliser .serialize().

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
$( "form" ).on( "submit", function( event ) {
  event.preventDefault();
  console.log( $( this ).serialize() );
});

3- Pour éviter le rechargement, il faut "désactiver" la soumission du formulaire en empêchant le "comportement par défaut" : event.preventDefault()

event.preventDefault()

N.B. Remplace .click() par .on('click',...) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

    $('.submit').on('click', function( event ){

4- Enfin, LIS ou RELIS la DOC pour jQuery.post()
Notamment la gestion du résultat : .done(), .fail().

**Zarkoffe** · 30/10/2018, 14h16

Merci pour tes réponses. J'ai regardé la documentation Jquery et j'ai essayé les différentes manières que tu utilises mon récupérer tes variables.
Malheuresement je suis au même point qu'au départ, rien ne marche: ma page continue de se recharger malgrès "event.preventDefault();", rien ne s'insere, mon span ne fonctionne toujours pas.
voici mon script.js :

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
 
$(document).ready(function(){
    $( "form" ).on( "submit", function( event ) {
      $.post('2.php', {
          event.preventDefault();
          console.log( $( this ).serialize() );
        });
        }, (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>');
           }
             event.preventDefault();
         });

Merci d'avance

Invité · 30/10/2018, 14h28

Si tu ne respectes pas la syntaxe et la logique, tu n'arriveras a rien.

Commence par faire des exercices simples.

Insertion SQL dynamique + SPAN success

jQuery

Vue hybride

Discussions similaires

Partager

Partager