0

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?

Improve this question
4
  • use like this pasreInt($('.grand_total').val()) and check Commented Jan 17, 2014 at 12:09
  • 1
    Are you sure your selector is right? Does #submit actually select the button you want to disable? Try it in the chrome console Commented Jan 17, 2014 at 12:10
  • try use attr insead of prop Commented Jan 17, 2014 at 12:12
  • I have edited my answer, please have a look Commented Jan 17, 2014 at 13:07

3 Answers 3

Reset to default
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);
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

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?
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.
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.
just refresh the button then, not the whole form, edited again
Thanks Nick N yes found that when searching around on here as well. I will award you as the correct answer, many thanks.
1

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

Improve this answer

Comments

0

try this:

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

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.