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 7 of 7
  1. #1
    New Coder
    Join Date
    Apr 2011
    Posts
    30
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Form Validation: Disallowing Selection of 2 fields in Drop Down List

    Hi there,
    I need help in form validation! I want this to be validated upon selection of the drop down list (not when it comes to submit button)

    I have 2 drop down lists:
    Starting date (June 5th, 6th 7th)
    Ending date (June 5th, 6th 7th)

    I want to write a script that would NOT ALLOW one to choose:
    - Starting date June 6th and Ending date June 5th
    - Starting date June 7th and Ending date June 6th
    - Starting date June 7th and Ending date June 5th

    I appreciate your help

  2. #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    29,698
    Thanks
    93
    Thanked 4,947 Times in 4,908 Posts
    Code:
    <html>
    <head>
    <script type="text/javascript">
    function checkDates(form)
    {
        if ( form.endDate.selectedIndex < form.startDate.selectedIndex )
        {
            alert( "end date must be on or after start date");
            form.startDate.selectedIndex = 0; // force start back to June 5 to be sure is legal
        }
    }
    </script>
    </head>
    <body>
    <form>
    <select name="startDate" onchange="checkDates(this.form);">
    <option>June 5</option>
    <option>June 6</option>
    <option>June 7</option>
    </select>
    
    <select name="endDate" onchange="checkDates(this.form);">
    <option>June 5</option>
    <option>June 6</option>
    <option>June 7</option>
    </select>
    
    </form>
    </body>
    </html>
    Off the top of my head, untested, but I think it's right.

    Instead of
    Code:
            form.startDate.selectedIndex = 0; // force start back to June 5 to be sure is legal
    you could do
    Code:
            form.endDate.selectedIndex = form.startDate.selectedIndex;
    to force the end date to be same as start.

    Or or or
    Be yourself. No one else is as qualified.

  3. #3
    New Coder
    Join Date
    Apr 2011
    Posts
    30
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    Code:
    <html>
    <head>
    <script type="text/javascript">
    function checkDates(form)
    {
        if ( form.endDate.selectedIndex < form.startDate.selectedIndex )
        {
            alert( "end date must be on or after start date");
            form.startDate.selectedIndex = 0; // force start back to June 5 to be sure is legal
        }
    }
    </script>
    </head>
    <body>
    <form>
    <select name="startDate" onchange="checkDates(this.form);">
    <option>June 5</option>
    <option>June 6</option>
    <option>June 7</option>
    </select>
    
    <select name="endDate" onchange="checkDates(this.form);">
    <option>June 5</option>
    <option>June 6</option>
    <option>June 7</option>
    </select>
    
    </form>
    </body>
    </html>
    Off the top of my head, untested, but I think it's right.

    Instead of
    Code:
            form.startDate.selectedIndex = 0; // force start back to June 5 to be sure is legal
    you could do
    Code:
            form.endDate.selectedIndex = form.startDate.selectedIndex;
    to force the end date to be same as start.

    Or or or
    Is it possible to have 2 'onchange' commands? I already have a command of calculating the costs for these dates, as you can see here:

    Code:
    <select id="startdate" name="startdate" onchange="calculateTotal()">
    <option value = "0" selected="selected">Please choose</option>
    <option value="2011-06-05">2011-06-05</option>
    <option value="2011-06-06">2011-06-06</option>
    <option value="2011-06-07">2011-06-07</option>
    How would I incorporate the one you've just written?

    Thanks in advance again

  4. #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    29,698
    Thanks
    93
    Thanked 4,947 Times in 4,908 Posts
    Yes, you could do
    Code:
    <select id="startdate" name="startdate" onchange="checkDates(this.form);calculateTotal()">
    But why not simply call your calculateTotal() code at the *end* of the checkDates funtion?
    Code:
    function checkDates(form)
    {
        if ( form.endDate.selectedIndex < form.startDate.selectedIndex )
        {
            alert( "end date must be on or after start date");
            form.startDate.selectedIndex = 0; // force start back to June 5 to be sure is legal
        }
        calculateTotal( );
    }
    Or you could even set it up to only calculate *IF* the checkDates found no error:
    Code:
    function checkDates(form)
    {
        if ( form.endDate.selectedIndex < form.startDate.selectedIndex )
        {
            alert( "end date must be on or after start date");
            form.startDate.selectedIndex = 0; // force start back to June 5 to be sure is legal
        } else {
            calculateTotal( ); // only do if no error
        }
    }
    Or or or
    Be yourself. No one else is as qualified.

  5. #5
    New Coder
    Join Date
    Apr 2011
    Posts
    30
    Thanks
    7
    Thanked 0 Times in 0 Posts
    This works perfectly
    Code:
    <select id="startdate" name="startdate" onchange="checkDates(this.form);calculateTotal()">
    However, when I tried to select the Start date, the error alert popup window starts to popup already and then returns back to 'Please choose' option.

    I was hoping the alert popup window would only appear after the user has chosen the End date. (does that make sense??)

  6. #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    29,698
    Thanks
    93
    Thanked 4,947 Times in 4,908 Posts
    Unless you have a dummy blank first option in each <select>, there is no way to know if the user has chosen both a start and end date.

    After all, the user might just leave both at June 5, so onchange will never get triggered.

    If you indeed have a dummy first option, then what you want is easy.
    Code:
    <html>
    <head>
    <script type="text/javascript">
    function checkDates(form)
    {
        if (    form.endDate.selectedIndex > 0 
             && form.startDate.selectedIndex > 0
             && form.endDate.selectedIndex < form.startDate.selectedIndex )
        {
            alert( "end date must be on or after start date");
            form.startDate.selectedIndex = 0; // force start back to June 5 to be sure is legal
        }
    }
    </script>
    </head>
    <body>
    <form>
    <select name="startDate" onchange="checkDates(this.form);">
    <option>Choose a date</option>
    <option>June 5</option>
    <option>June 6</option>
    <option>June 7</option>
    </select>
    
    <select name="endDate" onchange="checkDates(this.form);">
    <option>Choose a date</option>
    <option>June 5</option>
    <option>June 6</option>
    <option>June 7</option>
    </select>
    
    </form>
    </body>
    </html>
    Be yourself. No one else is as qualified.

  7. #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    29,698
    Thanks
    93
    Thanked 4,947 Times in 4,908 Posts
    But if you do that, then you need to also check to make sure that both selectedIndex values are greater than zero before you attempt to calculate a total *and* before you submit the <form> to a server side page, if indeed you do that.

    And don't forget that some people may choose a date and then go back and reset the <select> to the "Choose a Date" option.
    Be yourself. No one else is as qualified.


 

Posting Permissions

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