- 1,829
- 911
- CPU
- I7 3770
- Scheda Madre
- Asrock Z77 Extreme 4
- HDD
- Samsung 850 pro 250GB
- RAM
- Corsair Vengeance LP 16GB
- GPU
- Gigabyte GTX1060 6GB
- Monitor
- Dell U2412M
- PSU
- Seasonic Focus Plus 650
- Case
- Corsair Graphite 760T
- OS
- Debian / Ubuntu
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:
Il form in questione è questo:
Di seguito il codice PHP + JS
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:
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ò??
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:
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: