Control an input which filled automatically by a script

Question

I have this script which checking if the value of variable is match or not value of a hidden input and return a confirmMessage.

the value of var maybe filled manually or automatically by another script.

when its manually there is a result, but when the input is filled automatically with a script i got no confirmmessage.

  <script>
 $('#vr').on('keyup change', function() {
    var vr = document.getElementById('vr');
    var confirm_vr = document.getElementById('confirm_vr');
    var message = document.getElementById('confirmMessage');


    if(vr.value == confirm_vr.value){

        message.innerHTML = "MATCH";

    }else{

        message.innerHTML = "! Not match";

    }
});
</script>

<span id='confirmMessage' ></span>

<input id='vr' name='vr'  />

<input type='hidden' id='confirm_vr' name='confirm_vr'  />

Don't use "var" for anything but a JS keyword. You are asking for trouble with that. — jmargolisvt, Oct 04 '17 at 20:04
@jmargolisvt I think the OP meant to use `cin.value` instead of `var.value`, crazy that it even compiles... — Ruan Mendes, Oct 04 '17 at 20:06
Which script is changing the text field programatically? If you need event handlers to be called after setting `input.value`, you need to fire a change event on your own. See https://stackoverflow.com/questions/2381572/how-can-i-trigger-a-javascript-event-click/2381862#2381862 — Ruan Mendes, Oct 04 '17 at 20:08
Yes, i just use VAR for explanation, its with another name in my real script. — mehdi, Oct 04 '17 at 20:08

score 0 · Accepted Answer · answered Oct 04 '17 at 20:33

How do you set the input value "automatically with a script"? just by document.getElementById('vr').value = 'hello'? As easiest solution I would suggest to extract your handler logic into the global function and call it when you change the input via code:

<script>
  function processChange() {
    var vr = document.getElementById('vr');
    var confirm_vr = document.getElementById('confirm_vr');
    var message = document.getElementById('confirmMessage');
    if(vr.value == confirm_vr.value){
        message.innerHTML = "MATCH";
    }else{
        message.innerHTML = "! Not match";
    }
  };
  $(function() {
    $('#vr').on('keyup change', processChange);
  });
</script>

<span id='confirmMessage' ></span>
<input id='vr' name='vr'  />
<input type='hidden' id='confirm_vr' name='confirm_vr'  />

<script>
  $(function() {
    document.getElementById('vr').value = 'hello';
    processChange();
  });
</script>

@mehdi There is a way to subscribe not only on the DOM events (keyup, change etc) but also on some entity's value change itself, e.g. by the power of [RxJs](http://reactivex.io/rxjs/). Maybe it will come to you some day, good luck! — dhilt, Oct 04 '17 at 21:03
The problem with this way is that the code that sets the input value has to know what the handler for the change is. A better option is just to trigger a synthetic change event, that way if there are 5 different handlers, they will get called and you don't have to worry about who has hooked up change events — Ruan Mendes, Oct 05 '17 at 13:22

score 0 · Answer 2 · answered Oct 05 '17 at 15:00

Adding another answer because @dhilt's answer requires that you change the code that sets the input value everytime you add a new listener.

$('#vr').on('keyup change', function() {
    var vr = document.getElementById('vr');
    var confirm_vr = document.getElementById('confirm_vr');
    var message = document.getElementById('confirmMessage');
    if(vr.value == confirm_vr.value){
        message.innerHTML = "MATCH";
    }else{
        message.innerHTML = "! Not match";

    }
});

$('#vr').on('keyup change', (e) => {
    // This will get called without the code that sets
    // input.value having to know about this handler
    console.log('Value changed', e);
});

$('button').on('click', function() {
    var vr = document.getElementById('vr');
    vr.value += 'X';
    // Notice that you don't need to know what handlers are set
    $(vr).trigger('change');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id ="vr"/>

<span id='confirmMessage' ></span>

<input id='vr' name='vr'>

<input type='hidden' id='confirm_vr' name='confirm_vr' value="X"/>

<hr />

<button>Set text value</button>

Control an input which filled automatically by a script

2 Answers2