javascript disable button conditionally

Question

How come I get the alert's but the button doesn't enable after a negative is changed to a positive after updating the grand total from a select. Here is the section that is not working:

    if ($('.grand_total').val() < 0) {
   $('#submit').prop('disabled', true);
   alert('negative number found');

} else if ($('.grand_total').val() > 0) {
   $('#submit').prop('disabled', false);
   alert('positive number found');
}

and here is the complete code:

 <script language="javascript">
 $(".add_to_total").on('change', function() {
var total = 0;
var grand_total = 0; 
$(".dynamic_row").each(function() {
    var row = $(this);

    var start_hour_am = parseFloat(row.find(".start_hour_am").val()) || 0;
    var start_minute_am = parseFloat(row.find(".start_minute_am").val()) || 0;

    var end_hour_am = parseFloat(row.find(".end_hour_am").val()) || 0;
    var end_minute_am = parseFloat(row.find(".end_minute_am").val()) || 0;        

    var start_hour_pm = parseFloat(row.find(".start_hour_pm").val()) || 0;
    var start_minute_pm = parseFloat(row.find(".start_minute_pm").val()) || 0;          

    var end_hour_pm = parseFloat(row.find(".end_hour_pm").val()) || 0;
    var end_minute_pm = parseFloat(row.find(".end_minute_pm").val()) || 0;

    total = ( (Number(end_hour_am) + (Number(end_minute_am))) - (Number(start_hour_am) + Number(start_minute_am)) + (Number(end_hour_pm) + Number(end_minute_pm)) - (Number(start_hour_pm) + Number(start_minute_pm)));
    row.find(".total").val(total);
    grand_total = Number(grand_total) + Number(total);  

}); 
    $("#grand_total").val(grand_total);


if ($('.grand_total').val() < 0) {
   $('#submit').prop('disabled', true);
   alert('negative number found');

} else if ($('.grand_total').val() > 0) {
   $('#submit').prop('disabled', false);
   alert('positive number found');
}  

 });
 </script>

Any ideas would be appreciated.

UPDATE Here is the html for the Grand total:

<input type="text" class="grand_total" name="grand_total" id="grand_total" data-role="none" value="0" size="3" readonly="true">

and here is the button which i'm trying to disable:

<button type="submit" data-theme="e" data-mini="true" data-inline="true" name="submit" id="submit" class="submit" data-icon="check" value="submit-value">Submit</button>

With Nick N's suggestion, still get the same problem with the button disable/enable.

<script language="javascript">
$(".add_to_total").on('change', function() {
    var total = 0;
    var grand_total = 0; 
    $(".dynamic_row").each(function() {
        var row = $(this);

        var start_hour_am = parseFloat(row.find(".start_hour_am").val()) || 0;
        var start_minute_am = parseFloat(row.find(".start_minute_am").val()) || 0;

        var end_hour_am = parseFloat(row.find(".end_hour_am").val()) || 0;
        var end_minute_am = parseFloat(row.find(".end_minute_am").val()) || 0;        

        var start_hour_pm = parseFloat(row.find(".start_hour_pm").val()) || 0;
        var start_minute_pm = parseFloat(row.find(".start_minute_pm").val()) || 0;          

        var end_hour_pm = parseFloat(row.find(".end_hour_pm").val()) || 0;
        var end_minute_pm = parseFloat(row.find(".end_minute_pm").val()) || 0;

        total = ( (Number(end_hour_am) + (Number(end_minute_am))) - (Number(start_hour_am) + Number(start_minute_am)) + (Number(end_hour_pm) + Number(end_minute_pm)) - (Number(start_hour_pm) + Number(start_minute_pm)));
        row.find(".total").val(total);
        grand_total = Number(grand_total) + Number(total);  

    }); 
        $("#grand_total").val(grand_total);


    //if (parseFloat($('.grand_total').val()) < 0) {
    //   $('#submit').prop('disabled', true);
    //   alert('negative number found');

    //} else if (parseFloat($('.grand_total').val()) > 0) {
    //   $('#submit').prop('disabled', false);
    //   alert('positive number found');
    //}


    var total = parseFloat($('#grand_total').val());
    if(total < 0){
       $('#submit').prop('disabled', true);
       alert('negative number found...');
    }
    else {
       $('#submit').prop('disabled', false);
       alert('positive number found...');
    }     

});
</script>

UPDATE Ok looks like the issue is because the button is a jquery mobile generated button its not updating the state of the button when a negative value is found, If i refresh the whole form the button state then chnages. I tested this by setting the data-role to none so the submit button becomes a standard form button and the disable/enable functionality works. Any ideas how i can get around this?

Are you sure your selector is right? Does #submit actually select the button you want to disable? Try it in the chrome console — Rui
– Rui, Commented Jan 17, 2014 at 12:10

Nick N. · Accepted Answer · 2014-01-23 08:46:28Z

1

This should work:

var total = parseFloat($('.grand_total').val());
if(total < 0){
   $('#submit').attr("disabled", "disabled");
   alert('negative number found');
}
else {
   $('#submit').removeAttr("disabled"); 
   alert('positive number found');
}

Jquery Mobile: Don't refresh the whole form, but refresh just the button:

$('#submit').button('refresh');

Please note: that I changed '#' to '.'. Dependent on your HTML you could also change this line:

 $(".grand_total").val(grand_total);

to:

$("#grand_total").val(grand_total);

edited Jan 23, 2014 at 8:46

answered Jan 17, 2014 at 12:23

Nick N.

13.7k9 gold badges62 silver badges77 bronze badges

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

5 Comments

jeeperscreepers Over a year ago

Hi Nick N, I placed your code in and checked the selectors in the html, still not working, i get the alerts but nothing on the button. If the grand_total changes to a negative it does the alert but doesn't disable the button. Any ideas?

Nick N. Over a year ago

I have edited my answer, this should work. It has to do with that disabled should have the value 'disabled' and not true. If enabled, just remove the whole attribute.

jeeperscreepers Over a year ago

Nick N see my above update, found out its to do with the button being a jquery mobile button. It will update the state only after a form refresh. So your original code does work, but the button doesn't update until a form refresh.

Nick N. Over a year ago

just refresh the button then, not the whole form, edited again

jeeperscreepers Over a year ago

Thanks Nick N yes found that when searching around on here as well. I will award you as the correct answer, many thanks.

Nagarajan A · Accepted Answer · 2014-01-17 12:14:45Z

1

you are passing $('.grand_total').val() instead of $('#grand_total').val()

answered Jan 17, 2014 at 12:14

Nagarajan A

895 bronze badges

Comments

earthmover · Accepted Answer · 2014-01-17 12:28:18Z

0

try this:

var total = parseInt($('.grand_total').val());
if(total < 0){}
else {}

edited Jan 17, 2014 at 12:28

answered Jan 17, 2014 at 12:13

earthmover

4,53514 gold badges46 silver badges76 bronze badges

Collectives™ on Stack Overflow

javascript disable button conditionally

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related