disable button with change of input value

Question

How to disable enable button with change of input value. I want to enable button with Change in #second read-only input field, by changing its value remotely or from other input field.

$(document).ready(function(){
$('#button').attr('disabled',true);
});
$(document).on('change keyup blur','#first',function(){
   var second= $('#second').val();
   if($(this).val() != '' ){
		sum = parseFloat($(this).val()) + parseFloat(second);
    $('#second').val(sum);
    }
});
$("#second").on('change',function(){
   var second= $(this).val();
   var third= $('#third').val();
  if (second == third) {
     $('#button').attr('disabled',false);
  } else {
	$('#button').attr('disabled',true);	
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" id="first" placeholder="first">
<input type="number" id="second" value="5" readonly>
<input type="number" id="third" value="10" readonly>

<input type="button" id="button" value="button" />

Koviri Jagdish · Accepted Answer · 2019-07-13 19:26:32Z

Try this
https://www.w3schools.com/code/tryit.asp?filename=G5YTJB50T072

In your code you used keyup, change, blur which makes calculation incorrect and alway use jquery code like change function inside document.ready.

Thank You

    <script>
        $(document).ready(function(){
            $('#button').attr('disabled',true);
            $("#second").on('change',function(){
                var second = $(this).val();
                var third = $('#third').val();
                if (second == third) {
                    $('#button').attr('disabled',false);
                } else {
                    $('#button').attr('disabled',true); 
                }
            });
        });
        $(document).on('keyup','#first',function(){
            var second= $('#second').val();
            if($(this).val() != ''){
                sum = parseFloat($(this).val()) + parseFloat(second);
                $('#second').val(sum);
                $('#second').val(sum).trigger('change');
            }
        });
    </script>

gaetanoM · Accepted Answer · 2019-07-13 18:38:19Z

0

Your issue is in this line:

$('#second').val(sum);

Changing an input value does not trigger a change event. So, you can trigger it by yourself:

$('#second').val(sum).trigger('change');

$('#button').attr('disabled', true);
$(document).on('change keyup blur', '#first', function () {
    var second = $('#second').val();
    if ($(this).val() != '') {
        sum = parseFloat($(this).val()) + parseFloat(second);
        $('#second').val(sum).trigger('change');
    }
});
$("#second").on('change', function () {
    var first = $("#first").val();
    var second = $(this).val();
    var third = $('#third').val();
    if (second == third) {
        $('#button').attr('disabled', false);
    } else {
        $('#button').attr('disabled', true);
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<input type="number" id="first" placeholder="first">
<input type="number" id="second" value="5" readonly>
<input type="number" id="third" value="10" readonly>

<input type="button" id="button" value="button">

answered Jul 13, 2019 at 18:38

gaetanoM

42.1k6 gold badges45 silver badges63 bronze badges

2 Comments

Dishko Over a year ago

can it work with document.onload, because it can be change by another input also.

gaetanoM Over a year ago

Yes, you need to wrap into document.onload

Collectives™ on Stack Overflow

disable button with change of input value

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related