show/hide form element

**eugbana** · 10-13-2012 10:11 AM

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

**JMRKER** · 10-13-2012 06:32 PM

What have you done thus far?

**eugbana** · 10-14-2012 06:43 AM

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

**JMRKER** · 10-14-2012 10:47 AM

There appears to be a lot of PHP code in there. I know very little of that language.

So I don't know if your problem is in the JS or PHP portion.

If some of the other members of this forum can help, that's great!

If none can help here, you might try the PHP section of this forum do see if they can see the problem.

Good Luck!

**eugbana** · 10-14-2012 10:59 AM

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

**JMRKER** · 10-14-2012 08:23 PM

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>

**eugbana** · 10-16-2012 12:11 AM

Thanks would give it a try and let U̶̲̥̅̊ know

**eugbana** · 10-16-2012 09:15 AM

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

**JMRKER** · 10-16-2012 09:25 AM

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.

**eugbana** · 10-16-2012 09:41 AM

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

**JMRKER** · 10-16-2012 11:47 AM

Like this?

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>

**eugbana** · 10-18-2012 04:23 AM

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

**JMRKER** · 10-18-2012 01:19 PM

Originally Posted by eugbana

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.

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.

Thread: show/hide form element

Thread Tools

Display

Hybrid View

show/hide form element

the form

Is this what you mean?

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions