[JQuery + PHP] Problema aggiunta/rimozione dinamica campi form

cdtux

Utente Èlite
1,718
756
CPU
I7 3770
Scheda Madre
Asrock Z77 Extreme 4
Hard Disk
Samsung 850 pro 250GB
RAM
Corsair Vengeance LP 16GB
Scheda Video
EVGA GTX670 SC
Monitor
Dell U2412M
Alimentatore
Corsair TX850M
Case
Corsair Graphite 760T
Sistema Operativo
Debian / Kali Linux / Win
Buongiorno
Ho un problema con la gestione dinamica di alcuni campi di un form (aggiunta+rimozione).

In sostanza devo aggiungere/rimuovere delle "righe" con diversi campi che devono numerati e, ogni "riga" aggiunta/rimossa (oltre a quella presente di default), deve avere una numerazione univoca e progressiva.

Faccio un esempio per spiegarmi meglio:
l'ID del primo campo (input) della riga di default è: bmpos[0][id_bid]
Ogni riga aggiunta rimossa deve avere l'ID = bmpos[x][id_bid], dove x è un valore univoco.
Quando il form viene inviato devo ottenere un array tipo:
PHP:
array (size=2)
  '_token' => string 'STRINGAACASACCIO' (length=40)
  'bmpos' => 
    array (size=3)
      0 => 
        array (size=2)
          'id_bid' => string '5' (length=1)
          'pos' => string 'A' (length=1)
      1 => 
        array (size=2)
          'id_bid' => string '5' (length=1)
          'pos' => string 'B' (length=1)
      2 => 
        array (size=2)
          'id_bid' => string '5' (length=1)
          'pos' => string 'C' (length=1)

Il form in questione è questo:
Senzanome.png

Di seguito il codice PHP + JS

PHP:
<div class="input_fields_wrap3"> <!-- Start Dynamic Wrapper -->
    <div id="row1"> <!-- Start Dynamic Container -->
        <div> <!-- Start Dynamic Row -->
            <div>
                <input id="bmpos[0][id_bid]" name="bmpos[0][id_bid]" type="hidden" value="5">
            </div>
            <div>
                <input type="text" name="bmpos[0][pos]" id="bmpos[0][pos]" value="A" />
            </div>
            <div>
                <button class="add_pos_button3">add</button>
            </div>
        </div> <!-- END Dynamic Row -->
    </div> <!-- END Dynamic Container -->
</div> <!-- END Dynamic Wrapper -->


Codice:
$(document).ready(function() {
    var max_fields = 10; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap3"); //Fields wrapper
    var add_button      = $(".add_pos_button3"); //Add button
    var x = 0; //initlal box count
    var pos = 'A'; //initlal pos value
                            
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();

        if(x < max_fields){ //max input box allowed
            x++; //box increment
            pos = String.fromCharCode(pos.charCodeAt() + 1); //increment pos value
                                
            $(wrapper).append('<div id="row'+x+'"><div style="border: 1px solid;"><div><input id="bmpos['+x+'][id_bid]" name="bmpos['+x+'][id_bid]" type="hidden" value="5"></div><div><input type="text" name="bmpos['+x+'][pos]" id="bmpos['+x+'][pos]" value="'+pos+'" /></div><div><a href="#" class="remove_field3">delete</a></div></div></div>'); //add input box
        }
    });

    $(wrapper).on("click",".remove_field3", function(e){ //user click on remove text
        e.preventDefault(); 
        $(this).parent('div').parent('div').parent('div').remove();
        x--; //decrement box
        pos = String.fromCharCode(pos.charCodeAt() - 1); //decrement pos value
    });
});

Il codice così scritto aggiunge/elimina correttamente le righe.
Il problema si presenta quando elimini una riga intermedia (la pos B della foto sopra) e successivamente ne aggiungi un'altra:
la riga aggiunta ha i medesimi valori dell'ultima riga inserita (pos C della foto).

Per ovviare a questo inconveniente ho modificato la funzione remove del JS togliendo la parte in cui si decrementano i contatori:
Codice:
     $(wrapper).on("click",".remove_field3", function(e){ //user click on remove text
        e.preventDefault(); 
        $(this).parent('div').parent('div').parent('div').remove();

        //x--;  <---- ELIMINATA
        //pos = String.fromCharCode(pos.charCodeAt() - 1);  <-------- ELIMINATA
    });
In questo modo non si creano doppioni, ma mi si sballa la numerazione visto che non è più progressiva.

Dopo questa estenuante (:asd:) spiegazione, vi pongo il mio quesito:
Secondo voi è possibile, una volta eliminata una riga (sia intermedia o l'ultima), ricrearla/ripristinarla con gli stessi valori e nella stessa posizione, al click del tasto aggiungi??
A grandi linee come dovrei procedere per fare ciò??
 
Ultima modifica:

cdtux

Utente Èlite
1,718
756
CPU
I7 3770
Scheda Madre
Asrock Z77 Extreme 4
Hard Disk
Samsung 850 pro 250GB
RAM
Corsair Vengeance LP 16GB
Scheda Video
EVGA GTX670 SC
Monitor
Dell U2412M
Alimentatore
Corsair TX850M
Case
Corsair Graphite 760T
Sistema Operativo
Debian / Kali Linux / Win
Aggiorno il thread dato che ho parzialmente risolto.

Per ovviare alla problematica dei doppioni nel nome delle posizioni:
Ho aggiunto una variabile stringa in cui vengono inseriti tutti valori delle posizioni.
Nel pulsante add con una funzione controllo quale manca e la reinserisco (se è stata eliminata), altrimenti incremento il contatore "pos".
Nel pulsante remove reperisco il valore e lo elimino dalla stringa. Se è stata eliminata l'ultima voce decremento il contatore "pos".

questa è la funzione di check della stringa:
Codice:
function checkLetter(str) {
   var difference;
   var missing;

   for (var i = 1; i < str.length; i++) {
      difference = str.charCodeAt(i) - str.charCodeAt(i - 1);

      if (difference > 1) {
         missing = str.charCodeAt(i) - 1;
         return String.fromCharCode(missing);
      }
   }
   return null;
}
 

Entra

oppure Accedi utilizzando

Discussioni Simili

Hot del momento