jQuery datepicker: Button disable unless both datepicker input fields have selected value_问答_开发者

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

开发者 https://www.devze.com 2023-02-16 11:20 出处：网络

I am using jQuery datepicker, I have two datepicker input fields, like following: <html> <body>

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?

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>

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/