Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [JavaScript]Dynamiczny dodawane pola formularza
arzach
post
Post #1





Grupa: Zarejestrowani
Postów: 332
Pomógł: 6
Dołączył: 27.11.2008

Ostrzeżenie: (0%)
-----


Witam mam taki formularz

  1. echo "<form name='userform' method='post' enctype='multipart/form-data' action='".FUSION_SELF."'>\n";
  2. echo "<table id='input_fields_wrap' cellpadding='0' cellspacing='0' class='center'>\n<tr>\n";
  3.  
  4.  
  5. echo "<td align='center' colspan='2' class='tbl'>\n";
  6. echo "<a href='#' id='add_field_button'>Dodaj kolejny pliki</a></td>\n";
  7. echo "</tr><tr>";
  8.  
  9.  
  10. echo "<td width='50' class='tbl'>Plik:</td>\n";
  11. echo "<td class='tbl'><input type='file' name='host_user[]' class='textbox' style='width:250px;' /></td>\n";
  12. echo "</tr>\n<tr>\n";
  13.  
  14. echo "<td align='center' colspan='2' class='tbl'>\n";
  15. echo "<input type='submit' name='sendmessage' value='Dodaj' class='button' /></td>\n";
  16. 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
[JAVASCRIPT] pobierz, plaintext
  1. $(document).ready(function() {
  2. var max_fields = 10; //maximum input boxes allowed
  3. var wrapper = $("#input_fields_wrap"); //Fields wrapper
  4. var add_button = $("#add_field_button"); //Add button ID
  5.  
  6. var x = 1; //initlal text box count
  7. $(add_button).click(function(e){ //on add input button click
  8. e.preventDefault();
  9. if(x < max_fields){ //max input box allowed
  10. x++; //text box increment
  11. $(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
  12. }
  13. });
  14.  
  15. $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
  16. e.preventDefault(); $(this).parent('div').remove(); x--;
  17. })
  18. });
[JAVASCRIPT] pobierz, plaintext

Go to the top of the page
+Quote Post

Posty w temacie


Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 20.08.2025 - 08:36