jQuery datepicker: Button disable unless both datepicker input fields have selected value

Question

I am using jQuery datepicker, I have two datepicker input fields, like following:

<html>
<body>
    <form method=post>
        <input type=text id='start_date'> //datepicker field
        <input type=text id='end_date'>  // datepicker field
        <input type=submit value=Submit>
    </form>
</body>
</html>

I would like to implement the feature that, the form submit button is disable unless both datepicker input fields have selected date value from datepicker calendar.

That's if both date fields have selected date value, the button is enabled automatically. How to implement this?

Joakim · Accepted Answer · 2011-03-10 09:05:50Z

1

havent tried to see if this works but something like this if you have jquery

NEW answer : added a new script.

<script type="text/javascript">
         $(document).ready(function(){
             $("#sumbit").disabled("disabled", "disabled");

             var startDate = "";
             var endDate = "";
             $("#start_date").datepicker({
                 onSelect: function(dateText, inst) { 
                    startDate = dateText;
                    if(endDate != ""){ ValidateDates(); }
                 }
             });
             $("#start_date").datepicker({
                 onSelect: function(dateText, inst) { 
                    endDate = dateText;
                    if(startDate != ""){ ValidateDates(); }
                 }
             });

             function ValidateDates(){
                 //Validate the dateformats and remove the attribute
             };

         });
</script>
<form method=post>
    <input type=text id='start_date' class="valDate"> //datepicker field
    <input type=text id='end_date' class="valDate">  // datepicker field
    <input type="submit" value="Submit" id="sumbit">
</form>

OLD answer :

<script type="text/javascript">
         $(document).ready(function(){
             $("#sumbit").disabled("disabled", "disabled");
             $(".valDate").change(function(){
                if($("#start_date).val() != "" && $("#end_date").val() != ""){
                   //validation logic to see if the date is valid
                   $("#sumbit").removeAttr("disabled");
                }
            else{
               $("#sumbit").disabled("disabled", "disabled");
            }
         });
     });
</script>
<form method=post>
    <input type=text id='start_date' class="valDate"> //datepicker field
    <input type=text id='end_date' class="valDate">  // datepicker field
    <input type="submit" value="Submit" id="sumbit">
</form>

edited Mar 10, 2011 at 9:05

answered Mar 10, 2011 at 7:11

Joakim

2,21715 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

andyb Over a year ago

I think you meant to use .change() and not .changed() there.

Mellon Over a year ago

No, change is not working with jQuery datepicker input fields, I tried. That's why I ask

Joakim Over a year ago

thanks for pointing that out andyb, Mellon I've updated my answer a little.

andyb · Accepted Answer · 2011-03-10 21:14:18Z

1

Change the mark-up of the "submit" to <input type="submit" value="Submit" disabled="disabled"/> and then remove the disabled property in JavaScript when both date fields have been selected. Note that users with JavaScript disabled will get a different experience so you should protect against this in the code that receives the form.

Edit: Added a demo for you - http://jsfiddle.net/acxDU/ :)

Edit 2: Sorry I misread the question and the first demo didn't work with the datepicker. Here is an updated demo that works with the jQuery datepicker http://jsfiddle.net/acxDU/2/

edited Mar 10, 2011 at 21:14

answered Mar 10, 2011 at 7:05

andyb

43.9k12 gold badges126 silver badges155 bronze badges

2 Comments

marcosfromero Over a year ago

I will only add a readonly attribute to both input fields to make sure both of them have a real date value: jsfiddle.net/marcosfromero/DjzEz

andyb Over a year ago

Make sure you don't break accessibility. You should be able to enter a date without JavaScript being turned on. Also, some users will find it easier to just type a date (it's quicker as well!). Simply indicate the correct date format and users can follow that example. Just remember to protect your inputs on the server side :)

Collectives™ on Stack Overflow

jQuery datepicker: Button disable unless both datepicker input fields have selected value

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related