Dinamicki formular: sljedece polje zavisi od prethodno odabranog

Linux pomoć Programiranje
1

Imam formular koji moram doraditi. Trebam dodati polje za drzavu. To je ok. Trebam dodati i polje za “State” (USA verzija formulara) ali tako da ako neko izabere USA onda se pojavi drop-down menu sa USA states, a ako nego odabere Kanadu onda se pojavi drop-down menu sa kanadskim provincijama, a u svakom drugom slucaju se pojavi cisto text field.

Vidjao sam ovako nesto na mnogo mjesta. Npr. http://www.GovDeals.com/index.cfm?fa=Main.AdvSearch Zavisno od “Timing” se aktivira “Within”. A, zavisno od “Within” se mijenja vrijednost u “State”, “Seller Name”… Pa cak zavisno od izabrane vrijesnosti po “States” mijenjaju se i vrijednosti pod “Seller Name”…

Ovo je uradjeno u javascript-u, to mi je poznato. Medjutim, ja sam tabula rasa za javascript tako da mi treba nesto sto cu lako implementirati u vec postojeci kod.

Jel’ se neko zanim’o sa ovim stvacicama?

2

Probaj ovako nesto (ovo je koristeci jQuery, pogledaj jQuery.com):

<select name="drzava" onchange="if(this.value=='USA'){ $('#state').show(); }">...</select> <select name="state" id="state">...</select>

3

[quote=adioe3]Probaj ovako nesto (ovo je koristeci jQuery, pogledaj jQuery.com):

<select name="drzava" onchange="if(this.value=='USA'){ $('#state').show(); }">...</select> <select name="state" id="state">...</select>
[/quote]
hm. ovo mi ba nesto prejednostavno… :smiley:

4

Mogu ja zakomplikovat, nije problem :smiley:

5

Ok. De malo zakomplikuj i daj malo vise informacija…

6

Numero uno, treba ti jQuery pa ga pristavi i onda napises nesto ovako:

<script type="text/javascript"> $(document).ready(function(){ $("[name=country]").change(function(){ $('.states').hide() if(this.val() == 'USA') $('[name=states_us]').show() else if(this.val() == 'Canada') $('[name=states_ca]').show() else $('[name=state]').show() }).click(function(){ this.change(); }); }); </script>
To ti je javascript dio, html nesto ovako:

<select name='country'>...</select> <select name='states_us' class='states'>...</select> <select name='states_ca' class='states'>...</select> <input class='states' name='state' />
I dodas u CSS:

Jel sad jasnije? :slight_smile:

7

[quote=adioe3]Numero uno, treba ti jQuery pa ga pristavi i onda napises nesto ovako:

<script type="text/javascript"> $(document).ready(function(){ $("[name=country]").change(function(){ $('.states').hide() if(this.val() == 'USA') $('[name=states_us]').show() else if(this.val() == 'Canada') $('[name=states_ca]').show() else $('[name=state]').show() }).click(function(){ this.change(); }); }); </script>
To ti je javascript dio, html nesto ovako:

<select name='country'>...</select> <select name='states_us' class='states'>...</select> <select name='states_ca' class='states'>...</select> <input class='states' name='state' />
I dodas u CSS:

Jel sad jasnije? :)[/quote]
ono jednostavnije je bilo jednostavnije :frowning:
ovo ne radi… more biti bidne da ja trebam jos sto sta handrljati, ali ne umijem…

8

evo sta sam ja “napravio”:

script.js

function showStates(x) { if (document.getElementById(x).value == 'USA') { var dropdownStates = document.getElementById("previewWin"); dropdownStates.innerHTML = "State: <select><option>AL</option><option>IA</option><option>KY</option></select>"; dropdownStates.style.visibility = "visible"; } else if (document.getElementById(x).value == 'CAN') { var dropdownStates = document.getElementById("previewWin"); dropdownStates.innerHTML = "Provinces: <select id=state><option>Ontario</option><option>Quebec</option><option>Yukon</option></select>"; dropdownStates.style.visibility = "visible"; } else { var dropdownStates = document.getElementById("previewWin"); dropdownStates.innerHTML = "Areas: <input type=text id=state />"; dropdownStates.style.visibility = "visible"; } }
style.css #previewWin { visibility: hidden; }
php/html: [code]<?php
if (isset($_POST) and !empty($_POST))
{
echo ‘

’;

print_r($_POST);

echo ‘
’;
}
?> 
<body>

	<form method="POST" action="index.php">
	Ime: <input type="text" id="ime" value="<?=$_POST['ime']?>" /><br>
	Prezime: <input type="text" id="prezime" value="<?=$_POST['prezime']?>" /><br>
	Country: 
	<select id="country" onchange="showStates(this.id)">
		<option value="">Select Country</option>
		<option value="USA">USA</option>
		<option value="CAN">CAN</option>
		<option value="GER">GER</option>
		<option value="AUS">AUS</option>
		<option value="MEX">MEX</option>
	</select><br>
	
	<div id="previewWin"> </div>
	
	<input type="submit" value="Submit" />
	
	</form>
	
</body>
[/code] Ovo k'o biva radi, tj. dobijam drop down menu za USA i CAN, a text field za "ostalo", ali kad submit print_r() mi ne pokazuje ama bas nista?!?!?!?
9

Uz pomoc Boa - sam sam nados’o:
fali mi name tag :slight_smile:

kopirajuci kod, zaboravio dodati name tag.

10

@afan: toplo preporucujem da proucis jQuery. A sto se tice sakrivanja stvari, cesce vidim da se koristi display: none; u CSSu umjesto visibility. Nisam 100% siguran sta je razlika al jedna google pretraga sigurno drzi odgovor :slight_smile:

11

Prihvatam prijedlog, pogledacu malo o jQuery. samo, z anekog sa skoro 50 godina, “slobodno vrijeme” je imaginarni termin :smiley:

Osnovu koda sam prekopirao sa jednog tutorijala, pa i CSS dio. :slight_smile:

Hvala Adioe3

12

u display:none, svi elementi su “jedan preko drugog”, a u slucaju neke direktive tipa “display:block” visibility ostavlja prostor gdje inace stoji element, ovako se na istoj poziciji prikazuju ovisno o JS selekciji :slight_smile: