Adaugare dinamic elemente in formular

[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.

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"

Some text:

Other text:

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', '&nbsp; 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.

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 ='&nbsp; 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
}

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.

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.