在文本框jQuery的变化事件

Question

Basically, I want to change value on, say textbox2, when the value of textbox1 is changed by a button function. I know that it is possible to include the function on the button to change the value on the textbox2, but I don't want that. Is it possible?

Here's what I tried so far on JSFiddle https://jsfiddle.net/xpvt214o/387300/

HTML code:

<button id="button1">button</button>
<input type="text" id="outputtext1" value="1" readonly/>
<input type="text" id="outputtext2" value="" />

JavaScript:

jQuery('#button1').on('click', function() {
    document.getElementById("outputtext1").value = parseInt(document.getElementById("outputtext1").value) +1;
});


jQuery('#outputtext1').on('change', function() {
    //I know that this logic can be put in onClick function above instead
    var number = document.getElementById("outputtext1").value;
    if( number <= 3){
        document.getElementById("outputtext2").value = "low";
    } else if (number < 10){
        document.getElementById("outputtext2").value = "medium";
    } else if (number >= 10){
        document.getElementById("outputtext2").value = "high";
    }
});

Thank you in advance!

Answer 1

You can use jQuery('#outputtext1').trigger("change"); in the button element click event.

Example:

 jQuery('#button1').on('click', function() { document.getElementById("outputtext1").value = parseInt(document.getElementById("outputtext1").value) + 1; jQuery('#outputtext1').trigger("change"); }); jQuery('#outputtext1').on('change', function() { var number = document.getElementById("outputtext1").value; if (number <= 3) { document.getElementById("outputtext2").value = "low"; } else if (number < 10) { document.getElementById("outputtext2").value = "medium"; } else if (number >= 10) { document.getElementById("outputtext2").value = "high"; } }); 

 body { background: #20262E; padding: 20px; font-family: Helvetica; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="button1">button</button> <input type="text" id="outputtext1" value="1" readonly/> <input type="text" id="outputtext2" value="" /> 

Answer 2

Try this:Change the value for outputtext1 and fire change event on it

jQuery('#button1').on('click', function() {
    var value = jQuery("#outputtext1").val();
    value = (parseInt(value) || 0) + 1;
    jQuery("#outputtext1").val(value).change();
});


jQuery('#outputtext1').on('change', function() {
    var number = (parseInt($(this).val()) || 0) + 1;
    if( number <= 3){
        jQuery("#outputtext2").val("low");
    } else if (number < 10){
        jQuery("#outputtext2").val("medium");
    } else if (number >= 10){
        jQuery("#outputtext2").val("high");
    }
});

JSFiddle
NOTE : You can use jQuery id selector and '.va()` function instead of Javacript as shown in code above.

Answer 3

You could use $('#outputtext1').trigger("change") on button click

DEMO

 $('#button1').on('click', function() { $('#outputtext1').val(+$('#outputtext1').val()+1); $('#outputtext1').trigger("change"); }); $('#outputtext1').on('change', function() { var number = document.getElementById("outputtext1").value; if (number <= 3) { document.getElementById("outputtext2").value = "low"; } else if (number < 10) { document.getElementById("outputtext2").value = "medium"; } else if (number >= 10) { document.getElementById("outputtext2").value = "high"; } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="button1">button</button> <input type="text" id="outputtext1" value="1" readonly/> <input type="text" id="outputtext2" value="" /> 

Answer 4

Either you can trigger the change event or create a generic function and call it on both click and change event. Its better to call generic function rather then triggering the event from event.

 // find elements var banner = $("#banner-message") var button = $("button") $('#button1').on('click', function() { document.getElementById("outputtext1").value = parseInt(document.getElementById("outputtext1").value) + 1; $('#outputtext1').trigger('change'); }); $('#outputtext1').on('change', function() { var number = document.getElementById("outputtext1").value; if (number <= 3) { document.getElementById("outputtext2").value = "low"; } else if (number < 10) { document.getElementById("outputtext2").value = "medium"; } else if (number >= 10) { document.getElementById("outputtext2").value = "high"; } }); 

 body { background: #20262E; padding: 20px; font-family: Helvetica; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="button1">button</button> <input type="text" id="outputtext1" value="1" /> <input type="text" id="outputtext2" value="" /> <!-- this should be changed when the value of outputtext1 is changing --> 

 // find elements var banner = $("#banner-message") var button = $("button") $('#button1').on('click', function() { document.getElementById("outputtext1").value = parseInt(document.getElementById("outputtext1").value) + 1; validateInput(); }); $('#outputtext1').on('change', function() { validateInput(); }); function validateInput() { var number = document.getElementById("outputtext1").value; if (number <= 3) { document.getElementById("outputtext2").value = "low"; } else if (number < 10) { document.getElementById("outputtext2").value = "medium"; } else if (number >= 10) { document.getElementById("outputtext2").value = "high"; } } 

 body { background: #20262E; padding: 20px; font-family: Helvetica; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="button1">button</button> <input type="text" id="outputtext1" value="1" /> <input type="text" id="outputtext2" value="" /> <!-- this should be changed when the value of outputtext1 is changing --> 

Answer 5

try this fiddle

I am getting the selector attribute value with $('#outputtext1').attr('value') so that it will not break and change the value at runtime[Please check the value in DOM]. At the same time I am triggering a change event on button click.

 jQuery('#button1').on('click', function() { var x = $('#outputtext1').attr('value'); x = parseInt(x) +1; $('#outputtext1').attr("value", x); jQuery('#outputtext1').trigger("change"); }); jQuery('#outputtext1').on('change', function() { var number = $('#outputtext1').attr('value'); if( number <= 3){ document.getElementById("outputtext2").value = "low"; } else if (number < 10){ document.getElementById("outputtext2").value = "medium"; } else if (number >= 10){ document.getElementById("outputtext2").value = "high"; } }); 

 body { background: #20262E; padding: 20px; font-family: Helvetica; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="button1">button</button> <input type="text" id="outputtext1" value="1" /> <input type="text" id="outputtext2" value="" />