Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Aug 2011
    Posts
    41
    Thanks
    1
    Thanked 0 Times in 0 Posts

    want to Show a particular form field when an option is selected

    Hi,
    I'm new to JavaScript. I'm trying to create my form in such a way that if 'Premium' is selected, a the text box with label 'membership no' is displayed and if 'bronze' is select, the drop-down list 'sponsor' is displayed instead....here's what my form looks like...

    PHP Code:
    <form id="form1" name="form1" method="post" action="">
      <
    p>
        <
    label for="select">Membership:</label>
        <
    br />
        <
    select name="select" id="select">
          <
    option value="Premium" selected="selected">premium</option>
          <
    option value="Bronze">bronze</option>
        </
    select>
      </
    p>
      <
    p>Membership No:<br />
        <
    input type="text" name="textfield" id="textfield" />
      </
    p>
      OR<
    br />
      
    Sponsor:
    <
    br />
      <
    select name="select2" id="select2">
        <
    option value="329">329</option>
        <
    option value="234">234</option>
      </
    select>
    </
    form
    appreciate the help

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,910
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Here you are:-

    Code:
    <form id="form1" name="form1" method="post" action=""> 
      <p> 
        <label for="select">Membership:</label> 
        <br /> 
        <select name="sel1" id="sel1" onchange = "showDivs()"> 
    <option value = "0" >Select ......</option>
          <option value="Premium" >Premium</option> 
          <option value="Bronze">Bronze</option> 
        </select> 
    <br><br>
     
      <div id= "MNum"  style="display:none">Membership No:<br /> 
        <input type="text" name="textfield" id="textfield" /> 
      </div>
     
    <div id = "Spons"  style="display:none">
      Sponsor: 
    <br /> 
      <select name="sel2" id="sel2"> 
    <option value = "0">Select sponsor ....</option>
        <option value="329">329</option> 
        <option value="234">234</option> 
      </select> 
    </div>
    
    <script type = "text/javascript">
    function showDivs() {
    document.getElementById("MNUm").style.display="none";
    document.getElementById("Spons").style.display="none";
    var val = document.getElementById("sel1").value;
    if (val == "Premium") {
    document.getElementById("MNum").style.display = "block";
    }
    if (val == "Bronze") {
    document.getElementById("Spons").style.display = "block";
    }
    }
    
    </script>
    
    </form>

    A fool is someone who when presented with the correct facts arrives at entirely the wrong conclusion. A madman is someone who arrives at the correct conclusion based on the wrong information.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    New Coder
    Join Date
    Aug 2011
    Posts
    41
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for the quick reply...I can't seem to get it to work...Or do I have to put the <script> part in the <head> section..thanks

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,910
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Well, it works for me. You may certainly place the <script> in the <head> section, but that will not affect its working.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #5
    New Coder
    Join Date
    Aug 2011
    Posts
    41
    Thanks
    1
    Thanked 0 Times in 0 Posts
    ok. I got it working, had to change the case in "document.getElementById("MNUm").style.display="none";" to lower case 'u'


  •  

    Posting Permissions

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