Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript]Dodawania elementów HTML w pętli JS
Forum PHP.pl > Forum > Przedszkole
danon198901
Witam,

mam pytanie: Jak można dodać elementy HTML (textbox, select, radio button itp) za pomocą JavaScriptu (osadzić HTML w JS)? Jest mi to potrzebne, żeby dynamicznie generować formularz HTML, w zależności od opcji wpisanych/wybranych przez użytkownika. O ile w PHP nie było problemu, bo mogłem to zrobić za pomocą echo np.

  1. <?php
  2. echo '<input type="button" name="info" value="?" style="width: 50px; height: 50px" /><br />';
  3. ?>


w JS nie mam pojęcie jak do tego podejść, a w kursach JS nie znalazłem interesujących mnie informacji. Przykładowo użytkownik wprowadza liczbę 'textboxów' i dynamicznie ma zostać wyświetlona odpowiednia liczba, która później zostanie obsłużona przez interpreter PHP.

  1. <input type="text" name="liczba_text" id="abc" size="2" maxlength="2" onBlur="sprText()" /><br/>
  2.  
  3.  
  4. <script type="text/javascript">
  5. function sprText()
  6. {
  7. var liczba = document.getElementById("abc").value;
  8. for( ; i=liczba; i++)
  9. {
  10. //tu chce właśnie dynamicznie dodać textboxy np:
  11. //<input type="text" name="tekst"+i+"" size="2" maxlength="2" />
  12. }
  13. }
  14. </script>
Sephirus
Opcje masz 3:

1. Przechowujesz w JS w zmiennych elementy HTML jako stringi '<input type="..."/>' itp. i potem odpowiednio je łączysz w jeden string (w pętli itd) i podmieniasz innerHTML kontenera.

2. var element = document.createElement('input') - i potem ustawiasz odpowiednio dla zmiennej element typ, id, name itd. itp. a na koniec dodajesz do kontenera poprzez document.getElementById('id_kontenera').appendChild(element).

3. Używasz do tego jQuery - lecz tu odsyłam po prostu do google "jQuery create element" itp.
PrinceOfPersia
Cytat
O ile w PHP nie było problemu, bo mogłem to zrobić za pomocą echo np.

mogłeś ale nie powinieneś. W PHP zgodnie z zasadami oddzielania logiki od widoku powinieneś użyć szablonów, np. Smarty czy w inny sposób oddzielić kod HTML od kodu PHP. Inaczej masz kaszanę w kodzie.

Cytat
mam pytanie: Jak można dodać elementy HTML (textbox, select, radio button itp) za pomocą JavaScriptu (osadzić HTML w JS)?

to co powiedział mój przedmówca plus:
4. klonowanie elementów ( http://google.pl?q=clone+html+elements+javascript )
5. korzystanie z systemów szablonów JS ( http://google.pl?q=template+engine+comparison+javascript )
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.