Activate button when two datepickers fields have values

Question

My Question derivate from this post

I would like to disable a submit button until two input are filled in with a datepicker. I have no trouble doing it with standart text input but it's not working with my datepickers. I strongly suspect it's about the datepickers id's.

First is an example of what I want to do (without datepickers). Then what I'm trying to do with datepickers.

With text input (working) :

Body :

<form method=post>
<input type="text" id='first_name'>
<input type="text" id='second_name'>
<input type="submit" value="Submit" id="submit" disabled>

JQuery :

<script>
$(':text').keyup(function() {
if($('#first_name').val() != "" && $('#second_name').val() != "") {
   $('#submit').removeAttr('disabled');
} else {
   $('#submit').attr('disabled', true);   
}
});</script>

With the datepickers (not working) :

Head :

<script>
$(function() {
    $( "#datepicker1" ).datepicker({ dateFormat: 'dd/mm/yy' ,  minDate: new Date(2016, 04 - 1, 21), maxDate : new Date(2016, 05 - 1, 04)});
    $( "#datepicker2" ).datepicker({ dateFormat: 'dd/mm/yy' ,  minDate: new Date(2017, 04 - 1, 21), maxDate : new Date(2017, 05 - 1, 04)});
</script>

Body :

<form method=post>
<input type="text" id='datepicker1'>
<input type="text" id='datepicker2'>
<input type="submit" value="Submit" id="submit" disabled>

JQuery :

<script>
$(':text').keyup(function() {
if($('#datepicker1').val() != "" && $('#datepicker2').val() != "") {
   $('#submit').removeAttr('disabled');
} else {
   $('#submit').attr('disabled', true);   
}
});</script>

If you `console.log($('#datepicker1').val())`, is it equal to `""`? — Tyler Roper, May 18 '17 at 13:56
the `keyup` event is sent only to the element that has the focus. Here, I believe it's the datepicker, not the input. Might be worth checking datepicker built-in `onSelect` [jQuery doc onSelect](http://api.jqueryui.com/datepicker/#option-onSelect) — OldPadawan, May 18 '17 at 14:15

Romain · Answer 1 · 2017-05-19T07:13:14.283

1

EDIT

As oldPadawan said use onSelect when you initialize the datePicker to chekc for the value:

(function(){
   $( "#datepicker1" ).datepicker({ dateFormat:'dd/mm/yy',minDate: new 
      Date(2016,04 - 1, 21), maxDate : new Date(2016, 05 - 1, 04),onSelect: 
        function(date) {
           checkDatePicker();
        }});
    $( "#datepicker2" ).datepicker({ dateFormat: 'dd/mm/yy' ,  minDate: new 
     Date(2017, 04 - 1, 21), maxDate : new Date(2017, 05 - 1, 04),onSelect: 
        function(date) {
           checkDatePicker();
        }});    
})();

function checkDatePicker(){
    if($('#datepicker1').val() != "" && $('#datepicker2').val() != "") {
        $('#submit').removeAttr('disabled');
    } else {
        $('#submit').attr('disabled', true);   
    }
}

edited May 19 '17 at 07:13

answered May 18 '17 at 14:04

Romain

33
9

you might review your answer and delete the non-working part :) – OldPadawan May 18 '17 at 14:47
I'll, thanks for the insight I'm pretty sure this would work too but I can only accept one answer. Thanks guys :) – Romain May 18 '17 at 14:52

score 1 · Accepted Answer · answered May 18 '17 at 14:36

I guess problem is with keyup.Normally when you select a date from datepicker keyup is not called.

It will work when you manually insert a date in datepicker text field. Try using change with keyup event as

<script>
$(':text').on('change keyup', function() {
if($('#datepicker1').val() != "" && $('#datepicker2').val() != "") {
   $('#submit').removeAttr('disabled');
} else {
   $('#submit').attr('disabled', true);   
}
});
</script>

Hope this helps...

Activate button when two datepickers fields have values

2 Answers2

Linked