Forum PHP.pl

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.

[PHP] pobierz, plaintext 
    <?php
    echo '<input type="button" name="info" value="?" style="width: 50px; height: 50px" /><br />';
    ?>
[PHP] pobierz, plaintext 

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.

[PHP] pobierz, plaintext 
    <input type="text" name="liczba_text" id="abc" size="2" maxlength="2" onBlur="sprText()" /><br/>
 
 
    <script type="text/javascript">
    function sprText()
    {
    var liczba = document.getElementById("abc").value;
    for( ; i=liczba; i++)
    {
    //tu chce właśnie dynamicznie dodać textboxy np:
    //<input type="text" name="tekst"+i+"" size="2" maxlength="2" />
    }
    }
    </script>
[PHP] pobierz, plaintext 

Ten post edytował danon198901 21.03.2013, 12:06:44

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.

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.


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 )