Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [JavaScript]Dodawania elementów HTML w pętli JS
danon198901
post 21.03.2013, 12:03:03
Post #1





Grupa: Zarejestrowani
Postów: 35
Pomógł: 0
Dołączył: 26.09.2012

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


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>


Ten post edytował danon198901 21.03.2013, 12:06:44
Go to the top of the page
+Quote Post
Sephirus
post 21.03.2013, 12:49:40
Post #2





Grupa: Zarejestrowani
Postów: 1 527
Pomógł: 438
Dołączył: 28.06.2011
Skąd: Warszawa

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


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.


--------------------
If you're good at something, never do it for free.
Potrzebujesz skryptu JS lub PHP - szukasz kogoś kto przetestuje twoją aplikację pod względem bezpieczeństwa? Szybko i solidnie? Napisz ;)
Mój blog - Jak zwiększyć wydajność front-endu - O buforowaniu wyjścia w PHP słów kilka...
Go to the top of the page
+Quote Post
PrinceOfPersia
post 21.03.2013, 19:39:32
Post #3





Grupa: Zarejestrowani
Postów: 717
Pomógł: 120
Dołączył: 18.04.2009

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


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 )


--------------------
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 Wersja Lo-Fi Aktualny czas: 26.04.2024 - 06:27