Skip to content

keyup or change event on input hidden is not working

If the Hidden input takes its value from a text input, how can I monitor the change and implement something when changing the Hidden core value? example:

$('#input2').on('keyup, change', function () {
    $('#input1').val($(this).val());
});
$('#input1').on('keyup, change', function () {
    $('#div').text( $('#input1').val() );
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<input type="hidden" value="test" id="input1" />
<input type="text" value="test" id="input2" />
<div id="div">loading...</div>

Answer

You can fire keyup explicitly using:

$('#input2').on('keyup, change', function () {
        $('#input1').val($(this).val());
//Add this line
        $('#input1').trigger("keyup");

});
$('#input1').on('keyup, change', function () {
        $('#div').text( $('#input1').val() );
});

You have to just add this line:

$(‘#input1’).trigger(“keyup”);