www.webdeveloper.com
Results 1 to 13 of 13

Thread: show/hide form element

  1. #1
    Join Date
    Feb 2009
    Posts
    18

    Lightbulb show/hide form element

    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

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,414
    What have you done thus far?

  3. #3
    Join Date
    Feb 2009
    Posts
    18

    the form

    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
    Attached Files Attached Files

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,414

    Arrow

    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!

  5. #5
    Join Date
    Feb 2009
    Posts
    18
    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

  6. #6
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,414

    Lightbulb

    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>

  7. #7
    Join Date
    Feb 2009
    Posts
    18
    Thanks would give it a try and let U̶̲̥̅̊ know

  8. #8
    Join Date
    Feb 2009
    Posts
    18
    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

  9. #9
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,414
    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.

  10. #10
    Join Date
    Feb 2009
    Posts
    18
    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

  11. #11
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,414

    Question Is this what you mean?

    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>

  12. #12
    Join Date
    Feb 2009
    Posts
    18
    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

  13. #13
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,414

    Exclamation

    Quote Originally Posted by eugbana View Post
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles