form dinamico e inserimento valori in un db

**agoper** · 16-02-2018, 08:25

Salve a tutti ho alcuni problemi con questo codice e ringrazio anticipatamente per il vostro aiuto.

Lo scopo è creare un form dinamico ingrediente+quantità che inserisca due campi alla volta e tenfa traccia in un db di tutti i valori inseriti andando a verificare che la quantità sia effettivamente un numero intero (espresso in grammi).

Questi i problemi che non riesco a risolvere

* se inserisco un solo ingrediente+quantità è tutto ok
se inserisco più di un ingrediente+quantità nel db perdo le informazioni sulla quantità (o meglio, riesco a registrare solo il primo dato della quantità). Di certo è un qualcosa collegato con l'array della quantità.

* se premo "submit" anche se non ho inserito nulla mi appare la scritta "valori inseriti" anche se poi nel db non è stato inserito nulla.

* vorrei effettuare un controllo sulla varibile quantità verificando che effettivamente il dato immesso sia un intero.

Qui il codice html

codice HTML:

<html>  
      <head>  
           <title>Inserisci gli ingredienti della tua ricetta</title>  
           <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
           <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
           <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
      </head>  
      <body>  
           <div class="container">  
                <br />  
                <br />  
                <h2 align="center">Inserisci gli ingredienti della tua ricetta</h2>  
                <div class="form-group">  
                     <form name="add_name" id="add_name">  
                          <div class="table-responsive">  
                               <table class="table table-bordered" id="dynamic_field">  
                                    <tr>  
                                         <td><input type="text" name="name[]" placeholder="inserisci ingrediente" class="form-control name_list" /></td>
                                         <td><input type="text" name="qt[]" placeholder="inserisci ingrediente" class="form-control qt_list" /></td>  
                                         <td><button type="button" name="add" id="add" class="btn btn-success">aggiungi</button></td>  
                                    </tr>  
                               </table>  
                               <input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" />  
                          </div>  
                     </form>  
                </div>  
           </div>  
      </body>  
 </html>  
 <script>  
 $(document).ready(function(){  
      var i=0;  
      $('#add').click(function(){  
           i++;  
           $('#dynamic_field').append('<tr id="row'+i+'"> <td><input type="text" name="name[]" placeholder="inserisci ingrediente" class="form-control name_list" /></td> <button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');  
          $('#dynamic_field').append('<tr id="row'+i+'"> <td><input type="text" name="qt[]" placeholder="inserisci ingrediente" class="form-control qt_list" /></td> <button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');
      }




      );  

  
      $(document).on('click', '.btn_remove', function(){  
           var button_id = $(this).attr("id");   
           $('#row'+button_id+'').remove();  
      });  
      $('#submit').click(function(){            
           $.ajax({  
                url:"ricette.php",  
                method:"POST",  
                data:$('#add_name').serialize(),
                success:function(data)  
                {  
                     alert(data);  
                     $('#add_name')[0].reset();
                       
                }  
           });  


           $.ajax({  
                url:"ricette.php",  
                method:"POST",  
                data2:$('#add_qt').serialize(),
                success:function(data2)  
                {  
                     alert(data2);  
                     $('#add_qt')[0].reset();
                       
                }  
           });  

      });  

 </script>

qui il codice php

Codice PHP:


 <?php  
 $connect = mysqli_connect("localhost", "root", "", "miodb");  
 $number = count($_POST["name"]);  
 echo $number;
 
 if($number > 0)  
 {  
      for($i=0; $i<$number; $i++)  
      {  
           if(trim($_POST["name"][$i] != ""))
        
           {  
                $sql = "INSERT INTO prova (campo,qt) VALUES('".mysqli_real_escape_string($connect, $_POST["name"][$i])."','".mysqli_real_escape_string($connect, $_POST["qt"][$i])."')";  
                mysqli_query($connect, $sql);  
           }  


           echo "ingredienti inseriti XXXXX"; 
      }  
      
 }  
 else  
 {  
      echo "Please Enter Name";  
 }  
 ?>

**m4rko80** · 16-02-2018, 09:48

Ciao, potresti intanto corregere alcune cose. Gli ID in pagina nei tag dovrebbero essere univoci. Gli id che hai messo sui tasti per Remove hanno stesso id, piuttosto usa un data-id="TUO_ID" e al posto di $(this).attr('id') andrai a leggere un $(this).data('id');

La form, al posto di prendere il click sul button prendi il submit stesso sulla form, in questo modo sei sicuro di bloccare il submit lato html/client stesso :

codice:

$('#add_name').on('submit', function(e) {
 e.preventDefault() ; //Blocca il submit
//...e qui il resto
});

A cosa ti serve fare una doppia chiamata ajax per mandare gli stessi dati delle form? Cosi' come impostato immagino che con 10 items, avrai 10 chiamate ajax! Stai inviando cmq un array dati e quindi hai tutto nello stesso $_POST e basterà se mai cilclarlo.

Lato PHP fai una query senza verificare che sia andata a buon fine, la esegui solo se è stato dato un nome nella form al relativo item.
Controlla almeno che sia TRUE il risultato di mysqli->query.

Se vuoi un consiglio (almeno io sono comodo così), piuttosto che fare un semplice echo di un risultato da leggere poi in javascript "success" usa un array encodato cosi' da poter passare più dati e poter anche debuggure altro volendo.

codice:

//Da  PHP
$result = array("insert"=> true, "error" =>  "Metto qui l'errore se necessario", "altra_key"=> "Altro valore" );
header("Content-Type", "application/json");
echo json_encode($result);

In questo modo in console, sulla chimata in ajax, nella response vedrai chiaramente l'object che potrai leggere comodamente con javascript nella success con console.log(data).

**agoper** · 16-02-2018, 10:21

Ciao,
prima di tutto ti ringrazio per i tuoi suggerimenti, in teoria ho capito gli errori che mi hai segnalato ma in pratica ho bisogno di un aiuto passo-passo perchï¿½ sono davvero alle prime armi.

Non mi ï¿½ chiaro dove modificare il codice che ho postato.

Ad esempio questo che mi suggerisci dove lo metto? Al posto di cosa? (immagino che sto ponendo domande banali per esperti ma davvero non so come fare)
$('#add_name').on('submit',function(e){
e.preventDefault();//Blocca il submit
//...e qui il resto <-- non ho capito in quale parte di codice ci troviamo
});
Non so se chiedo molto, ma ti sarei davvero grato se mi aiutassi a riscrivere questo codice.

**m4rko80** · 16-02-2018, 16:51

La parte javascript dovrebbe essere modificata così per semplificare un pò

codice:

 <script>  
 $(document).ready(function(){  
      var i=0;  
      $('#add').click(function(){  
           i++;  
           $('#dynamic_field').append('<tr id="row'+i+'"> <td><input type="text" name="name[]" placeholder="inserisci ingrediente" class="form-control name_list" /></td> <button type="button" name="remove" data-id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');  
          $('#dynamic_field').append('<tr id="row'+i+'"> <td><input type="text" name="qt[]" placeholder="inserisci ingrediente" class="form-control qt_list" /></td> <button type="button" name="remove" data-id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');
      }
    );  


  
      $(document).on('click', '.btn_remove', function(){  
           var button_id = $(this).data("id");
           $('#row'+button_id+'').remove();  
      });




      $('#add_name').on('submit', function(e){  


           e.preventDefault(); //Blocca il form submit


          const myForm = $(this);


           $.ajax({  
                url:"ricette.php",  
                method:"POST",  
                data: myForm.serialize(),
                success:function(data)  
                {  
                     alert(data);


                     console.log(data);// Con console log puoi vedere tutti i dati dalla console e non in un alert


                     myForm.trigger('reset'); //reset di tutta la form
                       
                },
                error: function(){
                  //qui puoi fare qualcosa se fallisce la chimata (non l'errore gestito da PHP)
                },
                always: function(){
                  //qui puoi fare qualcosa sia che vada in success o in error
                }
           });  




      });  


 </script>

Nell'append degli elementi al posto di id="..." metti un data-id="..."

codice:

<button type="button" name="remove" data-id="'+i+'" class="btn btn-danger btn_remove">

Nel PHP potresti fare quindi questo

codice:

 <?php  
 $connect = mysqli_connect("localhost", "root", "", "miodb");  
 $number = count($_POST["name"]);  
 echo $number;
 
 $result = array("error"=>false, "data"=>array());


 if($number > 0)  
 {    
      //Se tutto ok nel ciclo puoi riempire l'array da ritornare altrimenti potrai inserire errori vari o altro
      for($i=0; $i<$number; $i++)  
      {  
           if(trim($_POST["name"][$i] != ""))
        
           {  
                $sql = "INSERT INTO prova (campo,qt) VALUES('".mysqli_real_escape_string($connect, $_POST["name"][$i])."','".mysqli_real_escape_string($connect, $_POST["qt"][$i])."')";  
                $insert = mysqli_query($connect, $sql);  
                if(!$insert){
                  $result['error'] = true; //O altro diverso da false
                }else{
                  $result['data'][$i] = "Inserimento ok per indice " . $i; // o qualsiasi cosa tu voglia ricevere lato javascript
                }
           }          
      }        
 }  
 else  
 {   //qui valorizzi in caso di errore
      $result['error'] = "Compilare i nomi!";
 }
 //Erorre o success, ritorni il result per capire cosa è avvenuto lato server
 header('Content-Type', 'application/json');
 echo json_encode($result); //questo sara il data nel success() di jQuery.ajax e si vedrà in console.
 ?>

Devi solo fare un check per vedere come sarà formattato ora l'array in POST per leggere sia i name che le quantità

**agoper** · 16-02-2018, 22:59

Resto piacevolmente colpito di aver trovato in questo forum una persona così cordiale e paziente che mia abbia aiutato.
Mi colpisce ancor di più perché sono nuovo del mondo dell'informatica (sono un matematico puro) e sono stato aiutato da una persona che nemmeno mi conosce.

Che dire,
grazie di cuore!

Agostino

Discussione: form dinamico e inserimento valori in un db

Strumenti discussione

Ricerca discussione

Visualizza

form dinamico e inserimento valori in un db

ringraziamenti

Tag per questa discussione

Permessi di invio