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 3 of 3
  1. #1
    New Coder
    Join Date
    May 2009
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts

    How to change a form based on select option?

    Hi, I don't know if this is something you could do without JavaScript, but anyways...
    I want to make a drop down menu that changes a form based on the option, like if I chose Option1, it would show Form1 and so on.

    And also, if anyone knows how to list items in a div, that would be helpful too.

    Thanks.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,240
    Thanks
    203
    Thanked 2,554 Times in 2,532 Posts
    Try this:-

    Code:
    <select id = "opts" onchange = "showForm()">
    <option value = "0">Select Option</option>
    <option value = "1">Option 1</option>
    <option value = "2">Option 2</option>
    </select>
    
    <div id = "f1" style="display:none">
    <form name= "form1">
    Content of Form 1
    </form>
    </div>
    
    <div id = "f2" style="display:none">
    <form name= "form2">
    Content of Form 2
    </form>
    </div>
    
    <script type = "text/javascript">
    function showForm(){
    var selopt = document.getElementById("opts").value;
    if (selopt == 1) {
    document.getElementById("f1").style.display="block";
    document.getElementById("f2").style.display="none";
    }
    if (selopt == 2) {
    document.getElementById("f2").style.display="block";
    document.getElementById("f1").style.display="none";
    }
    }
    
    </script>
    "The reward for conformity was that everyone liked you except yourself". - Rita Mae Brown.

  • #3
    New Coder
    Join Date
    May 2009
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks, that's just what I needed


  •  

    Posting Permissions

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