javascript - Jquery change event on textbox - Stack Overflow

admin管理员组

文章数量:1426637

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 /

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!

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/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!

• javascript
• jquery

Share Improve this question Follow edited Jul 10, 2018 at 10:03 HealMee asked Jul 10, 2018 at 9:57 HealMeeHealMee 8511 silver badge1515 bronze badges 3

• 1 I'd suggest you use the input event on the textboxes instead of change, then use trigger() to fire that even on button click. I'd also suggest you stick to either native JS methods, or jQuery. You're using a very odd mix of both at the moment. – Rory McCrossan Commented Jul 10, 2018 at 10:13
• @RoryMcCrossan ah yes, I just realised that I mix'em both, I'll try to fix my scripting from now on. Thanks. – HealMee Commented Jul 10, 2018 at 10:20
• @HealMee You can use .on('input' instead of .on('change' and then .trigger("input"); instead of .trigger("change");. – John R Commented Jul 10, 2018 at 10:24

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

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./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="" />

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.

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./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="" />

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./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./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 -->

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./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="" />

本文标签： javascriptJquery change event on textboxStack Overflow