Pagina 1 din 1
Adaugare dinamic elemente in formular
Scris: Mar Mar 29, 2016
de andras
Salut,
Am un formular HTML cu mai multe elemente si un buton, cind dau click pe buton vreau sa inserez citeva elemente in linia imediat inferioara de sub buton, iar restul elementelor deja definite sa se mute mai jos cu o linie. Cum fac asta cel mai simplu? Sau care ar fi solutia optima? Multumesc.
Adaugare dinamic elemente in formular
Scris: Mie Mar 30, 2016
de MarPlo
Salut
Poti sa folosesti javascript cu metoda
insertAdjacentHTML().
Exemplu:
Cod: Selectaţi tot
<form action="#" method="post">
Some text: <input type="text" name="inp1" /><br>
<input type="button" id="btn1" value="Add Field" />
<br>Other text: <input type="text" name="inp2" /><br>
<input type="submit" value="Submit" />
</form>
<script>
var fld_nr =0; //field number
// add new text field after $elm
function addTextField(elm){
fld_nr++;
elm.insertAdjacentHTML('afterend', '<br>Dinamic field '+ fld_nr +': <input type="text" name="df_txt[]" />');
}
//if #btn1 exiss, register click event
var btn1 = document.getElementById('btn1');
if(btn1){
btn1.addEventListener('click', function(e){ addTextField(e.target);});
}
</script>
Demo:
Click on "Add Field"
Adaugare dinamic elemente in formular
Scris: Mie Mar 30, 2016
de andras
Functioneaza bine, dar am o mica problema: nu reusesc sa adaug valori la element select (transmise cu array) :
Cod: Selectaţi tot
<script>
function addTextField(elm, proiect){
var lungime = proiect.length ; // array multidimensional venit din PHP cu json_encode
alert(proiect[0][1]); afiseaza Proiect1 (pentru verificare)
var i=0;
var ap="";'
var fld_nr =0;
var btn2 = document.getElementById('btn1');
fld_nr++;
elm.insertAdjacentHTML('afterend', ' Proiecte '+ fld_nr +': <select id="ap" name="df_txt[]" />');
ap = document.getElementById('ap');
for (i = 0; i < lungime; i++) {
optiune = proiect[0][i];
alert(optiune);
ap.append($(optiune));
}
}
</script>
Nu executa bucla for (pentru adaugare valorile din array). Trebuie plasata in alta parte? Multumesc.
Adaugare dinamic elemente in formular
Scris: Mie Mar 30, 2016
de MarPlo
Daca vrei sa adaugi un element <select>, se creaza un sir cu acel element cu optiunile lui, apoi se adauga acel sir /cod html cu insertAdjacentHTML().
Poate asa:
Cod: Selectaţi tot
var fld_nr =0;
function addTextField(elm, proiect){
fld_nr++;
var add_elm =' Proiecte '+ fld_nr +': <select id="ap" name="df_txt[]">'; //begin <select>
//add <option>s
for(var i=0; i< proiect.length; i++){
add_elm +='<option value="'+ proiect[i][1] +'">'+ proiect[i][1] +'</option>';
}
add_elm +='</select>'; //end the <select>
elm.insertAdjacentHTML('afterend', add_elm); //add the element
}
Adaugare dinamic elemente in formular
Scris: Joi Mar 31, 2016
de andras
Acum functioneaza corect. Mai ramine sa salvez in baza de date pentru ca incarc cu aceasta functie 5 combo, 2 checkbox si un type=text.
Mai am o intrebare: cum ma ajuta name="df_txt[]" sa sistematizez variabilele POST?
Eu incarc multe elemente la un apel al functiei si am mai multe apeluri succesive in acelasi formular, deci incarc 20-30-40 (doar un exemplu) variabile POST la o singura salvare. Pot utiliza df_txt[0],df_txt[1] etc?
Multumesc.
Adaugare dinamic elemente in formular
Scris: Joi Mar 31, 2016
de MarPlo
Da, merge cu index numeric: $_POST['df_txt'][0], $_POST['df_txt'][1], etc.
Tocmai de aceea numelee: "df_txt[]" e cu paranteze patrate la sfarsit, ca in php datele sa fie primite intr-un array $_POST['df_txt'].
Daca aplici in php: var_export($_POST['df_txt']); ai sa vezi cum sunt adaugate.