Tworzenie formularza bez przeładowania strony

0

Witam potrzebuje aby po wyborze z listy wybieralnej w div o i test załadował się formularz
Stworzyłem taki dość prosty kod

 <script type="text/javascript">
<!--
function WybranaOpcja(){
    var co = document.getElementById('wybra').value;
    if(co == 1){
    document.getElementById('test').innerHTML = 'Cos1<input type="text"  name="cos1"/><br>Coscos1<br><input type="text" name="coscos1"/><br><input type="submit" name="submit" value="Cos" />';
    }else{
    document.getElementById('test').innerHTML = 'Cos2<input type="text" name="cos2"/><br><input type="submit" name="submit" value="Cos2" />';
    }
}
// -->
</script>

aczkolwiek on nie działa gdyż nie działa submit nie da się go kliknąć próbowałem też z jQuery('#test').append ale też nic ktoś wie jak to mogę zrobić

0

pewnie wstawiasz ten kod POZA <form>. Poza formą klikanie w submit nic nie daje.

0

pewnie wstawiasz ten kod POZA <form>.
no właśnie całość wstawia się w <form>

1

to pokaż więcej kodu, a najlepiej to przekopiuj istotne kawałki na jsbin.com czy coś

0
 <script type="text/javascript">
<!--
function WybranaOpcja(){
    var co = document.getElementById('wybra').value;
    if(co == 1){
    document.getElementById('test').innerHTML = 'Cos1<input type="text"  name="cos1"/><br>Coscos1<br><input type="text" name="coscos1"/><br><input type="submit" name="submit" value="Cos" />';
    }else{
    document.getElementById('test').innerHTML = 'Cos2<input type="text" name="cos2"/><br><input type="submit" name="submit" value="Cos2" />';
    }
}
// -->
</script>
<form action="" method="POST" onSubmit="return sprawdzForm(this);">
<select id="wybra" name="wybra" onchange="JavaScript:WybranaOpcja()">
<option value=""></option>
<option value="1">Cos1</option>
<option value="2">Cos2</option>
</select>
<div id="test"></div>
</form> 

a tu oryginał http://jsbin.com/livicalo/2/edit

1

Weź stwórz pusty plik html.
Wklej w nim to, co w poście wyżej.
Otwórz.

Działa.

============
Poprawki ode mnie: onchange="WybranaOpcja(this.value)" - bez tego "javascript:" oraz od razu przekazana wartość w parametrze

    function WybranaOpcja(val){
        var test = document.getElementById('test');
        if(val == 1){
            test.innerHTML = 'Cos1<input type="text"  name="cos1"/><br>Coscos1<br><input type="text" name="coscos1"/><br><input type="submit" name="submit" value="Cos" />';
        }
        else { // Twój else spowoduje, że po ponownym wybraniu pustej opcji będziesz miał to samo jak po wybraniu "coś"
            test.innerHTML = 'Cos2<input type="text" name="cos2"/><br><input type="submit" name="submit" value="Cos2" />';
        }
    }
0

To samo masz tu kod na http://jsbin.com/livicalo/6/edit całość

1

@Majcon: Twój przycisk submit ma name="submit". NIGDY PRZENIGDY nie nazywaj żadnego elementu submit, gdyż to zablokuje możliwość wysłania formularza. Ktoś genialny kiedyś pomyślał, że do elementów o określonym name będzie się można odwoływać z javascriptu jako do zmiennej o takiej samej nazwie. Dziś to pozostało chyba tylko ze względu na kompatybilność wsteczną, no i niestety stwarza takie problemy.

0

Zmieniłem nazwę http://jsbin.com/livicalo/9/edit i to samo tylko dlaczego kod podany wyżej działa dobrze a przecież one praktycznie niczym się nie różnią

1

Skopany kod HTML:
user image

Tak to jest jak się nie stosuje wcięć ani nic.

otwierasz form, zamykasz td, potem jest kolejne td, wstawione między td zamknięcie form, zamknięcie kolejnego, nieotwartego td o.O
przeglądarka poprawiając takie coś zamyka form w tym td w którym go otwierasz:

user image

Eh.. Odrobina Twojej chęci, skorzystania z dostępnych narzędzi (narzędzia deweloperskie w każdej przeglądarce są), staranność przy tworzeniu kodu, dobre IDE. To są drobnostki, a ile pomagają.

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0