Witam mam taki formularz
echo "<form name='userform' method='post' enctype='multipart/form-data' action='".FUSION_SELF
."'>\n"; echo "<table id='input_fields_wrap' cellpadding='0' cellspacing='0' class='center'>\n<tr>\n";
echo "<td align='center' colspan='2' class='tbl'>\n"; echo "<a href='#' id='add_field_button'>Dodaj kolejny pliki</a></td>\n";
echo "<td width='50' class='tbl'>Plik:</td>\n"; echo "<td class='tbl'><input type='file' name='host_user[]' class='textbox' style='width:250px;' /></td>\n";
echo "<td align='center' colspan='2' class='tbl'>\n"; echo "<input type='submit' name='sendmessage' value='Dodaj' class='button' /></td>\n"; echo "</tr>\n</table>\n</form>\n";
i chce w nim dodawać dynamicznie dodatkowe pola
I wszystko ładnie działa ale nie do końca bo dodaje mi nowe pole na końcu tabeli a nie po pierwszym TR
kod js
$(document).ready(function() {
var max_fields = 10; //maximum input boxes allowed
var wrapper = $("#input_fields_wrap"); //Fields wrapper
var add_button = $("#add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).append('</tr><tr><td width="50" class="tbl">Plik:</td><td class="tbl"><input type="file" name="host_user[]" class="textbox" style="width:250px;" /><a href="#" class="remove_field">Remove</a></td>'); //add input box
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});