Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript]Dynamiczny dodawane pola formularza
Forum PHP.pl > Forum > Przedszkole
arzach
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

nospor
Musisz znalezc pierwsze TR i zrobic insertAfter().
I jak tworzysz nowe TR to ma byc:
<tr>...</tr>
a nie jak teraz:
</tr><tr>....
gdzies to wynalazl?
arzach
Zrobiłem tak
[JAVASCRIPT] pobierz, plaintext
  1. $(document).ready(function() {
  2. $( "#add_field_button" ).click(function() {
  3.  
  4. $('<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></tr>').insertAfter($('#input_fields_wrap tr:first'));
  5.  
  6. });
  7.  
  8.  
  9. });
[JAVASCRIPT] pobierz, plaintext


Ale teraz dodaje nie po pierwszym tr ale przed a jak zrobić po questionmark.gifquestionmark.gifquestionmark.gif
nospor
Sprobuj tak
.insertAfter('#input_fields_wrap tr:first');
arzach
To samo wstawia przed pierwszym tr a nie za tr
nospor
Przez ten weekend chyba nie widze jakiegos banalnego bledu...
Jak mozesz wystaw to gdzies na zewnatrz
arzach

Sam już doszedłem co jest źle trzeba porostu dodać po drugim tr
Udało się zrobiłem tak
[JAVASCRIPT] pobierz, plaintext
  1. $(document).ready(function() {
  2.  
  3. var x = 1;
  4.  
  5. $( "#add_field_button" ).click(function() {
  6. if(x < 10){
  7. $('<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>').insertAfter($('#input_fields_wrap tr').eq(1));
  8. x++;
  9. }
  10. });
  11.  
  12.  
  13. $('#input_fields_wrap').on("click",".remove_field", function(){ //user click on remove text
  14.  
  15. $(this).parent('tr').remove(); x--;
  16.  
  17. })
  18.  
  19.  
  20.  
  21.  
  22. });
[JAVASCRIPT] pobierz, plaintext


Ale nie działa mi teraz usuwanie proszę o pomoc
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.