Printable View
Hey there am having problem implenting the function that enables one to show and hide a form element
I have a registration form on my site, when the dropdown for state is selected I want a hidden dropdown of surbubs and a text field for address to become visible
The dropdown for surbubs should hold different content depending on the state selected
Wouldn't mind a sample code
Thanks
Dominic
What have you done thus far?
hi jmaker thanks for your reply, was thinking no one was gonna help me out... anyways here is an attachment of the form
you would notice that i have already started the scripting process.. but its not working, i want a situation when users select state from the dropdown the suburb and unit are made visible... it shows a different suburb when different states are selected...
would appreciate if could look at my script and help me tweak it
thanks
There appears to be a lot of PHP code in there. I know very little of that language. :o
So I don't know if your problem is in the JS or PHP portion. :eek:
If some of the other members of this forum can help, that's great! :D
If none can help here, you might try the PHP section of this forum do see if they can see the problem. ;)
Good Luck! :)
Am good with php, its not my php,its the js, just take out all the php code and work on the table alone,or try to implementing it on a new table
This is my guess based upon your post #1 requirements.
Code:<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8" />
<title> Untitled </title>
<script type="text/javascript">
function displayAddr(IDS) {
if (document.getElementById('state').value == '') {
document.getElementById('stateAddr').style.display = 'none';
document.getElementById('stateAddr1').value = '';
document.getElementById('stateCity').value = '';
document.getElementById('stateZip').value = '';
} else {
document.getElementById(IDS).style.display = 'block';
}
}
</script>
<style type="text/css">
</style>
</head>
<body>
<div>
<div>
<table>
<tr>
<td>
<div style="float:left">
<select id="state" name="state" onchange="displayAddr('stateAddr')">
<option value="">Select State</option>
<option value="Abuja FCT">Abuja FCT</option>
<option value="Abia">Abia</option>
<option value="Adamawa">Adamawa</option>
<option value="Akwa Ibom">Akwa Ibom</option>
<option value="Anambra">Anambra</option>
<option value="Bauchi">Bauchi</option>
<option value="Bayelsa">Bayelsa</option>
<option value="Benue">Benue</option>
<option value="Borno">Borno</option>
<option value="Cross River">Cross River</option>
<option value="Delta">Delta</option>
<option value="Ebonyi">Ebonyi</option>
<option value="Edo">Edo</option>
<option value="Ekiti">Ekiti</option>
<option value="Enugu">Enugu</option>
<option value="Gombe">Gombe</option>
<option value="Imo">Imo</option>
<option value="Jigawa">Jigawa</option>
<option value="Kaduna">Kaduna</option>
<option value="Kano">Kano</option>
<option value="Katsina">Katsina</option>
<option value="Kebbi">Kebbi</option>
<option value="Kogi">Kogi</option>
<option value="Kwara">Kwara</option>
<option value="*****">*****</option>
<option value="Nasarawa">Nasarawa</option>
<option value="Niger">Niger</option>
<option value="Ogun">Ogun</option>
<option value="Ondo">Ondo</option>
<option value="Osun">Osun</option>
<option value="Oyo">Oyo</option>
<option value="Plateau">Plateau</option>
<option value="Rivers">Rivers</option>
<option value="Sokoto">Sokoto</option>
<option value="Taraba">Taraba</option>
<option value="Yobe">Yobe</option>
<option value="Zamfara">Zamfara</option>
</select>
</div>
<div id="stateAddr" style="float:left;display:none">
Address: <input type="stateAddr1" value=""><br>
City: <input type="stateCity" value=""><br>
Zip: <input type="stateZip" value="">
</div>
<br style="clear:both">
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
Thanks would give it a try and let U̶̲̥̅̊ know
Hey it worked but i want a situtation when I click on a dropdown a form field opens and click another item on the dropdown it displays another field
Do you mean a separate set of elements to input for every dropdown?
Why? Just copy the user input to an array for the element position you wish to save.
Would save a whole lot of coding and debugging.
If you still want to do it your way, it is possible, but it will be a bit of work.
Ok U̶̲̥̅̊ know what? I just need two items in the dropdown to display different form elements when clicked, I just need to see a guid then I will do the rest
Like this? :confused:
Code:<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8" />
<title> Untitled </title>
<script type="text/javascript">
function displayAddr(IDS) {
if (IDS == '') {
var sel = document.getElementById('states').getElementsByTagName('div');
for (var i=0; i<sel.length; i++) {
document.getElementById(sel[i].id).style.display = 'none';
}
} else {
document.getElementById(IDS).style.display = 'block';
}
}
</script>
<style type="text/css">
</style>
</head>
<body>
<div>
<div style="float:left">
<select id="stateSelect" name="state" onchange="displayAddr(this.value)">
<option value="">Select State</option>
<option value="Abuja_FCT">Abuja FCT</option>
<option value="Zamfara">Zamfara</option>
</select>
</div>
<br>
<div id="states">
<div id="Abuja_FCT" style="display:none"><p>Abuja FCT<br>
Address: <input type="text" id="Abuja_FCTAddr" value=""><br>
City: <input type="text" id="Abuja_FCTCity" value=""><br>
Zip: <input type="text" id="Abuja_FCTZip" value="">
</div>
<div id="Zamfara" style="display:none"><p>Zamfara<br>
Address: <input type="text" id="ZamfaraAddr" value=""><br>
City: <input type="text" id="ZamfaraCity" value=""><br>
Zip: <input type="text" id="ZamfaraZip" value="">
</div>
</div>
</div>
</body>
</html>
yes but it is to display different form elements, for instance when i select Abuja Fct it should display a text field and when i select zamfara it should make that of abuja fct not visible and make that of zamfara visible....
that's just what i need.. if you can help me do just this two i would follow your steps and do the rest, if feel it has to do with a conditional statement 'if else if', but i don't know how to go about it.
thanks am very great full for all your assistance
I'm not sure I understand your problem. :confused:Quote:
Originally Posted by eugbana
My script does just what you asked about showing and hiding the other opened elements.
It does contain only two selections, but you should be able to expand on that bit.
Show/describe/picture exactly what you want to be different.
