Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [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
nospor
post
Post #2





Grupa: Moderatorzy
Postów: 36 557
Pomógł: 6315
Dołączył: 27.12.2004




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?


--------------------

"Myśl, myśl, myśl..." - Kubuś Puchatek || "Manual, manual, manual..." - Kubuś Programista
"Szukaj, szukaj, szukaj..." - Kubuś Odkrywca || "Debuguj, debuguj, debuguj..." - Kubuś Developer

Go to the top of the page
+Quote Post
arzach
post
Post #3





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

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


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

Ten post edytował arzach 8.01.2016, 17:43:25
Go to the top of the page
+Quote Post
nospor
post
Post #4





Grupa: Moderatorzy
Postów: 36 557
Pomógł: 6315
Dołączył: 27.12.2004




Sprobuj tak
.insertAfter('#input_fields_wrap tr:first');


--------------------

"Myśl, myśl, myśl..." - Kubuś Puchatek || "Manual, manual, manual..." - Kubuś Programista
"Szukaj, szukaj, szukaj..." - Kubuś Odkrywca || "Debuguj, debuguj, debuguj..." - Kubuś Developer

Go to the top of the page
+Quote Post
arzach
post
Post #5





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

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


To samo wstawia przed pierwszym tr a nie za tr
Go to the top of the page
+Quote Post
nospor
post
Post #6





Grupa: Moderatorzy
Postów: 36 557
Pomógł: 6315
Dołączył: 27.12.2004




Przez ten weekend chyba nie widze jakiegos banalnego bledu...
Jak mozesz wystaw to gdzies na zewnatrz


--------------------

"Myśl, myśl, myśl..." - Kubuś Puchatek || "Manual, manual, manual..." - Kubuś Programista
"Szukaj, szukaj, szukaj..." - Kubuś Odkrywca || "Debuguj, debuguj, debuguj..." - Kubuś Developer

Go to the top of the page
+Quote Post
arzach
post
Post #7





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

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



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

Ten post edytował arzach 8.01.2016, 19:45:39
Go to the top of the page
+Quote Post

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 - 19:22