Enable button only if start and end dates are not empty

Question

Initially my button is in disabled mode. When a user selects both start and end dates only then it should be enabled to download.

The below code enables the button when only start or end date is selected. How could I enable download button only when both inputs are not empty by applying class $('#btn_download').attr('class','btn-general');?

//enable 'Download' button only if Start-End dates are not empty
var enableDisableBtn = function(){
    var startVal = $('#datepicker_start').val().trim();
    var endVal = $('#datepicker_end').val().trim();
    var disableBtn =  startVal.length == 0 || endVal.length == 0;
    $('#btn_download').attr('disabled',disableBtn);
    $('#btn_download').attr('class','btn-general');
}   

$('#datepicker_start').datepicker({
    enableDisableBtn();
});

$('#datepicker_end').datepicker({
    enableDisableBtn();
});

<button class="btn-general disabled" id="btn_download" type="button">
    <span class="glyphicon glyphicon-download-alt" style="margin-right:5px;"></span>
    Download
</button>

.btn-general {
    background-color: #6eb8d9;
    color: #fff;
    border: medium none;
    border-radius: 6px;
    cursor: pointer;
    display: inline-block;
    font-size: 15px;
    line-height: 1.4;
    padding: 6px 15px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}
.btn-general.disabled {
    background-color: #5bc0de;
    color: #fff;
    pointer-events:none;
    cursor:not-allowed;
    opacity:0.40;
}

Why are you invoking function enableDisableBtn when initializing datepicker? — Satpal
– Satpal, Commented Jul 14, 2015 at 12:37

Satpal · Accepted Answer · 2015-07-14 12:41:00Z

2

Use onClose option

Called when the datepicker is closed, whether or not a date is selected.

Script

var enableDisableBtn = function(){
    var startVal = $('#datepicker_start').val().trim();
    var endVal = $('#datepicker_end').val().trim();
    var disableBtn =  startVal.length == 0 || endVal.length == 0;
    $('#btn_download').prop('disabled',disableBtn).addClass('btn-general');
}   

//Set up onClose
$('#datepicker_start, #datepicker_end').datepicker({
    onClose : function(){
         enableDisableBtn();
    }
});

//Call initially
enableDisableBtn();

answered Jul 14, 2015 at 12:41

Satpal

134k13 gold badges168 silver badges171 bronze badges

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

4 Comments

Slimshadddyyy Over a year ago

Satpal: The function is called onClose event, but somehow the class is is not applied and it remains disabled even if both start and end dates are selected

Pete Over a year ago

@Slimshadddyyy, you never add / remove the class disabled, just the property

Pete Over a year ago

@Slimshadddyyy Ah right, your code looks like you try to set the property (.attr('disabled',disableBtn))

Slimshadddyyy Over a year ago

@Pete what I meant is class is not applied after selecting dates.

Bhushan Kawadkar · Accepted Answer · 2015-07-14 12:43:57Z

0

You can use addClass and removeClass functions to disable / enable button on the basis of value of disableBtn variable.

var enableDisableBtn = function(){
    var startVal = $('#datepicker_start').val().trim();
    var endVal = $('#datepicker_end').val().trim();
    var disableBtn =  startVal.length == 0 || endVal.length == 0;
    //$('#btn_download').attr('disabled',disableBtn);
    if(disableBtn) 
      $('#btn_download').addClass('disabled');
    else
      $('#btn_download').removeClass('disabled');
}

$('#datepicker_start, #datepicker_end').on('change blur',function(){
   enableDisableBtn();
});

edited Jul 14, 2015 at 12:43

answered Jul 14, 2015 at 12:32

Bhushan Kawadkar

28.6k5 gold badges39 silver badges61 bronze badges

1 Comment

depperm Over a year ago

he has that, this isn't the problem

Me.Name · Accepted Answer · 2015-07-14 13:40:58Z

A bit of an alternative version. Assuming you need the values later on, you might as well store them while checking. and reuse those set values for both enabling/disabling the button and for getting the values. As suggested onClose is needed, otherwise values typed/pasted directly in the textbox are not caught.

From start to end the code would be something like:

var pickers = $('#datepicker_start, #datepicker_end' );
pickers.datepicker({
    onClose: function(){              
        this.Date = $(this).datepicker("getDate");             
        $('#btn_download').toggleClass('disabled', pickers.filter(function(){return this.Date != null;}).length < 2);
            }
        });

Fiddle

the disabled class is toggled on the hand of all pickers having a Date value (which is filled whenever the picker is closed).

Collectives™ on Stack Overflow

Enable button only if start and end dates are not empty

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related