Forum PHP.pl > [JavaScript][HTML][PHP]Rozbudowany formularz

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript][HTML][PHP]Rozbudowany formularz

Xart

23.01.2014, 18:10:15

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

23.01.2014, 18:14:02

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

nikestylex7

23.01.2014, 18:15:40

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

23.01.2014, 18:17:50

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

Turson

23.01.2014, 18:24:34

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

Xart

23.01.2014, 18:44:20

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

Kshyhoo

23.01.2014, 18:57:31

W takim razie przenoszę.

Turson

23.01.2014, 19:03:57

[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

23.01.2014, 19:06:04

@UP
Dzięki wielkie

)

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

Kshyhoo

23.01.2014, 19:25:11

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

Xart

23.01.2014, 19:27:14

No tak a trzeba jeszcze coś dodać mhm ?

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

nikestylex7

23.01.2014, 19:30:33

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

Xart

23.01.2014, 19:35:38

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

nikestylex7

23.01.2014, 19:36:43

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>

Xart

23.01.2014, 19:37:54

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

nikestylex7

23.01.2014, 19:39:26

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

Xart

23.01.2014, 19:42:49

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

Kshyhoo

23.01.2014, 19:44:32

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

nikestylex7

23.01.2014, 19:47:17

[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

Xart

23.01.2014, 19:51:35

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

nikestylex7

23.01.2014, 19:52:21

jak to możliwe.

od nowa skopiuj mi zawartość index.html

Xart

23.01.2014, 19:54:12

O.o Po co Ci mam kopiować ;p działa ale masz jak chciałeś (poprawiłem jedną linijkę )

[HTML] pobierz, plaintext 
<html>
<head>
<title>Title of the document</title>
<script src="http://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

nikestylex7

23.01.2014, 19:55:21

no bo napisałeś że nie działa no to jak już ook jest to git tylko sobie to zredaguj tak jak byś chciał.

Xart

23.01.2014, 19:57:08

Spokojnie dalej już umiem ;p
muszę zacząć się uczyć tego JS.

Aktualnie najbardziej umiem HTML & PHP
PHP na dużo wyższym poziomie

Dzięki wielkie za pomoc można zamknąc

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.