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 6 of 6
  1. #1
    Regular Coder
    Join Date
    Nov 2002
    Posts
    184
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Dropdown list and Hiding other fields

    I have a complicated ASP form, it has a dropdown list (Select Alpha - it has 10 items – these items pull out from the database) and a few more dropdown lists and textboxes. What we’re trying to do is:

    If the customer selects the item A, B, or F from "Select Alpha" ddown list then we don’t want the other dropdownlist and textboxes to display (hiding it). The script I have below works fine.

    Here is a question:
    All these fields are required. For example: I selected the Item F from "Select Alpha" then other ddownlist and textboxes are hidden. Then I click on the submit button, it keeps asking to select the value of Ddownlist.

    Is it possible not to ask selecting option when these fields are hidden?

    Please help anyone....Thanks so much

    Code:
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
    <title>Untitled Page</title>
    </head>
    <body>
     
    <script language="javascript" type="text/javascript">
    function Validator(theForm)
    {
    if (theForm.Sel1.selectedIndex == 0){
    alert("Please select options 1.");
    theForm.Sel1.focus();
    return false;
    }
     
    if (theForm.ListBoxID2.selectedIndex == 0){
    alert("Please select one of the ListBoxID2 options.");
    //theForm.ListBoxID2.focus();
    return false;
    }
     
    return (true);
    }
     
    </script>
     
    <script type="text/javascript">
    function checkit(){
    //var s1=document.getElementById('select1');
    var s1=document.theForm.Sel1[document.theForm.Sel1.selectedIndex]
    var t1=document.getElementById('ListBoxID2');
    var t2=document.getElementById('ListBoxID3');
    var t3=document.getElementById('text3');
    if (s1.value=='A' || s1.value=='F'){
    t1.style.visibility='hidden';
    t2.style.visibility='hidden';
    t3.style.visibility='hidden';
    } else {
    t1.style.visibility='visible';
    t2.style.visibility='visible';
    t3.style.visibility='visible';
    }
    }
    </script>
    <form name="theForm" action="Submit.asp" onsubmit="return Validator(this)">
    <select id="Sel1" name="Sel1" onchange="checkit();">
    <option>Select Alpha</option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    <option value="D">D</option>
    <option value="F">F</option>
    <option value="H">H</option>
    </select>
    <br />
    <select name="ListBoxID2">
    <option>Select</option>
    <option value="">This is my second drop down list</option>
    </select>
    <br />
    <select name="ListBoxID3">
    <option value="">This is my 3rd drop down list</option>
    </select>
    <br />
    <input type="text" id="text3" name="text3" />
     
    <br />
    <input type="Submit" value="Submit" name="submit">
     
    </form>
    </body>
    </html>

  • #2
    Regular Coder ninnypants's Avatar
    Join Date
    Apr 2008
    Location
    Utah
    Posts
    504
    Thanks
    10
    Thanked 47 Times in 47 Posts
    The form elements being hidden don't mean that they aren't usable. They are most likely just hidden using css you may also want to disable them because if css is turned off users will be able to see and use those items. You also may want them to not be included in the validation so you may want to create an opt out option for those

  • #3
    Regular Coder
    Join Date
    Nov 2002
    Posts
    184
    Thanks
    0
    Thanked 0 Times in 0 Posts
    sorry, if I'm being obtuse.....do you have any examples ?

  • #4
    Regular Coder ninnypants's Avatar
    Join Date
    Apr 2008
    Location
    Utah
    Posts
    504
    Thanks
    10
    Thanked 47 Times in 47 Posts
    Something like this(untested)
    Code:
    function dependencies(dependants/*array*/){
         for( i = 0; i<dependants.length; i++ ){
              curr = document.getElementById(dependants[i]);
              curr.style.display = (curr.style.display == 'none'?'block':'none');
              curr.disabled = (curr.disabled == 'disabled'?'':'disabled');
         }
    }
    you'll need to make a conditional statement for how you run this and you'll need to add something like this to some sort of conditional for what elements you validate
    Code:
    if(/*your origional condition*/ && disabled != 'disabled')

  • #5
    Regular Coder
    Join Date
    Nov 2002
    Posts
    184
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks ninnypants for the idea of disable and enble. The question I have on the other post is that how can we pass the record set in....
    any helps are greatly appeciated.

  • #6
    Regular Coder ninnypants's Avatar
    Join Date
    Apr 2008
    Location
    Utah
    Posts
    504
    Thanks
    10
    Thanked 47 Times in 47 Posts
    That's what the second section of code is about it checks to see if the form elements are disabled and if so it skips over them during validation


  •  

    Posting Permissions

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