[JavaScript][HTML][PHP]Rozbudowany formularz Opcje

[Xart]

Witam w jaki sposób mogę zrobić rozbudowany formularz rejestracji na zasadzie:
Mamy pole opcji:
1) Osoba
2) Firma
w zależności od wyboru pojawią nam się dalej inne pola np:
Jeśli wybierzemy osoba ta:
imię
nazwisko
Jesli firma to:
nazwa
regon

W jaki sposób mogę to zrobić ? (konkrety)
Da radę w php czy trzeba js ?
Może jakieś wskazówki lub gotowe rozwiązania ?

Z góry thx

[Kshyhoo]

Bez przeładowania strony w JS, z przeładowaniem można w PHP

[nikestylex7]

PHP = metoda GET
JS np w Jquery = show(), hide()

Umieszczasz w divie i chowasz później tylko id jeśli wybierze osoba to pokazujesz diva 1 jeśli firma to diva 2

[Xart]

Można prosić przykładowy kod bo js nie bardzo ;d

[Turson]

http://www.w3schools.com/jsref/event_onchange.asp

[Xart]

Niestety nie jestem w stanie tego ogarnąć napisze mi ktoś taki kod ?

[Kshyhoo]

W takim razie przenoszę.

[Turson]

[HTML] pobierz, plaintext 
<input type="radio" name="Kto" value="Prywatna" onchange="sprawdz(this)">os. prywatna<br>
<input type="radio" name="Kto" value="Firma" onchange="sprawdz(this)">firma
<div class="prywatna" style="display:none">
    Imię i nazwisko <input type="text">
</div>
<div class="firma" style="display:none">
    Regon <input type="text">
</div>
 
<script>
function sprawdz(x){
    var kto = $(x).attr('value');
    if(kto == "Prywatna"){
		$('.firma').hide();
		$('.prywatna').show();
	}
	else{
		$('.prywatna').hide();
		$('.firma').show();
	}
}
</script>
[HTML] pobierz, plaintext 

[Xart]

@UP
Dzięki wielkie )

@EDIT:
Ale niestety nie działa ;//
Nie wyświetla kompletnie nic po zaznaczeniu...

Ten post edytował Xart 23.01.2014, 19:08:16

[Kshyhoo]

Założę się, że zrobiłeś kopiuj/wklej...?

[Xart]

No tak a trzeba jeszcze coś dodać mhm ?

Zmieniałem parę rzeczy ale dalej nie działa np
sprawdz(this) chyba na sprawdz(x)

Ten post edytował Xart 23.01.2014, 19:28:20

[nikestylex7]

Ciekawe co za to będę miał

[HTML] pobierz, plaintext 
<input type="radio" name="input1" id="input1"/>Osoba
<input type="radio" name="input1" id="input2"/>Firma
<div id="pole1" style="display:none;"><span>text1</span></div>
<div id="pole2" style="display:none;"><span>text2</span></div>
[HTML] pobierz, plaintext 

[PHP] pobierz, plaintext 
<script>
$(document).ready(function(){
  $("#input1").click(function(){
  if($('#input1:checked')) {
    $("#pole2").hide(); 
    $("#pole1").show();
  }else{
         $("#pole1").hide(); 
          $("#pole2").show();
        }
  });
    $("#input2").click(function(){
        if($('#input2:checked')) {
    $("#pole1").hide(); 
    $("#pole2").show();
        }else{
         $("#pole2").hide(); 
         $("#pole1").show();
        }
  });
});
</script>
[PHP] pobierz, plaintext 

Ten post edytował nikestylex7 23.01.2014, 19:31:03

[Xart]

@UP
Niestety ale nadal nie działa po zaznaczeniu pola nic ;/

[nikestylex7]

http://jsfiddle.net/9aeAV/

ahh nie chce mi się uczyć Ciebie podstaw ale w head musisz umieścić link do biblioteki jquery np: <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>

Ten post edytował nikestylex7 23.01.2014, 19:37:49

[Xart]

No właśnie ale gdy dodaję to do pliku html
to nie działa ;/

[nikestylex7]

omg... wejdz w ten link js.... tam weź run i zobacz jak działa. potem wklej tutaj cały kod strony i zobaczymy.

[Xart]

Wiem na tej stronie co podałeś działa bardzo dobrze tak jak chciałem ale gdy odpalam to normalnie z pliku to niestety ale nie wygląda to tak:

plik index.html

[HTML] pobierz, plaintext 
<script type="text/javascript" src="skrypt.js"></script>
<input type="radio" name="input1" id="input1"/>Osoba
<input type="radio" name="input1" id="input2"/>Firma
<div id="pole1" style="display:none;"><span>text1</span></div>
<div id="pole2" style="display:none;"><span>text2</span></div>
[HTML] pobierz, plaintext 

plik skrypt.js

[HTML] pobierz, plaintext 
$(document).ready(function(){
  $("#input1").click(function(){
  if($('#input1:checked')) {
    $("#pole2").hide(); 
    $("#pole1").show();
  }else{
         $("#pole1").hide(); 
          $("#pole2").show();
        }
  });
    $("#input2").click(function(){
        if($('#input2:checked')) {
    $("#pole1").hide(); 
    $("#pole2").show();
        }else{
         $("#pole2").hide(); 
         $("#pole1").show();
        }
  });
});
[HTML] pobierz, plaintext 

Ten post edytował Xart 23.01.2014, 19:43:46

[Kshyhoo]

Bo użyłeś jQuery, której on nie ma... Zobacz teraz.

[nikestylex7]

[HTML] pobierz, plaintext 
<html>
<head>
<title>Title of the document</title>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
</head>
 
<body>
<script>
$(document).ready(function(){
  $("#input1").click(function(){
  if($('#input1:checked')) {
    $("#pole2").hide(); 
    $("#pole1").show();
  }else{
         $("#pole1").hide(); 
          $("#pole2").show();
        }
  });
    $("#input2").click(function(){
        if($('#input2:checked')) {
    $("#pole1").hide(); 
    $("#pole2").show();
        }else{
         $("#pole2").hide(); 
         $("#pole1").show();
        }
  });
});
</script>
<input type="radio" name="input1" id="input1"/>Osoba
<input type="radio" name="input1" id="input2"/>Firma
<div id="pole1" style="display:none;"><span>text1</span></div>
<div id="pole2" style="display:none;"><span>text2</span></div>
</body>
 
</html>
[HTML] pobierz, plaintext 

skopiuj to do index.html całość zapisz i odpal

Ten post edytował nikestylex7 23.01.2014, 19:49:00

[Xart]

Nie działa mi ani na komputerze przez przeglądarkę ani na serwerze www...
Co zrobić żeby działało ?

Dodałem jquery i już działa dzięki wielkie
Można zamknąć ;p
dodałem tę bibliotekę

PS: Nie myślcie, że jestem początkujący aż tak bardzo nie znam się poprostu na JS

Jeszcze masz błąd jeden

[HTML] pobierz, plaintext 
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
[HTML] pobierz, plaintext 

Ten post edytował Xart 23.01.2014, 19:52:51