HTML input element does not recognize value when I put value programmatically

Question

I have a Google Chrome extension that retrieves data from one site and paste the data in another site.

To get the data from the first site I use this code:

$('#copy').click(function() {   
       var newClipboard = {
      "name": $('#buyercontactname').val(),
  }
chrome.runtime.sendMessage({newClipboard: newClipboard});
});

To paste the data in another site I use this code:

$(document).ready(function() {
    chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
        if (request.paste) {
            if (!(request.clipboard.name === '')) {
                var nameParts = request.clipboard.name.split(' ');
                $('[id="shippingFirstName"]').val(nameParts[0])
                $('[id="shippingLastName"]').val(nameParts[1]);
            }
          }
        }
    });
});

I replace the id value regarding the second site div or input.

The problem:

If I paste the value on div it works great, but If I paste the value on input is not recognized and I need to press on a key for that.

For example:

After I paste the values:

After I click "Save" (I get an error the fields are empty):

After I press a key on the fields (even I press on "space"):

The input elemant look like this:

<input ng-model="user.first_name" id="shippingFirstName" name="shippingFirstName" prefix-attrs-with="shipping" value="" pattern="(?!^\d+$)^.+$" autocapitalize="off" autocomplete="off" maxlength="100" xo-error-tooltip="" ng-required="true" data-test-id="user.first_name" class="ng-pristine ng-empty ng-valid-pattern ng-invalid ng-invalid-required ng-valid-maxlength hasErrorTooltipRequired ng-touched focused" required="required" aria-describedby="nbafrxk" aria-invalid="true">

How can I solve it?

It was answered a few times, in short try these - 1) document.execCommand with `insertText`, 2) $(el)[0].dispatchEvent(new Event('change', {bubbles: true})) - maybe also for 'input'. — wOxxOm, Oct 29 '18 at 09:57
@wOxxOm Thanks! but I didn't understand, can you explain more...? — Shayki Abramczyk, Oct 31 '18 at 12:39
Try with document.querySelector('[id="shippingFirstName"]').value=nameParts[0]; instead of $('[id="shippingFirstName"]').val(nameParts[0]) — Chinmoy Samanta, Nov 06 '18 at 07:21
Use focus method after setting value of input elements. Eg: document.querySelector('[id="shippingFirstName"]').focus() — Chinmoy Samanta, Nov 08 '18 at 09:01
If it works when you do a keypress, why not invoke a keypress event? — Katie.Sun, Nov 08 '18 at 19:42
@Katie.Sun I tried it but doesn't work, I updated my question, please check. thanks! — Shayki Abramczyk, Nov 08 '18 at 20:57
looking at the input code, are you using AngularJS? If so, you should probably be updating the input field via the angular model, not jquery — mix3d, Nov 08 '18 at 21:05
If so, please share the controller and template files used, unless the page you are pasting into is not within your control. In which case, you may be SOL. — mix3d, Nov 08 '18 at 21:14
@mix3d It's google chrome extension, the angular is not within my control :/ I tried to set the value on someone else site. — Shayki Abramczyk, Nov 09 '18 at 05:56

score 4 · Accepted Answer · answered Nov 09 '18 at 07:33

Create and dispatch an input event after setting the value of input box.You can get information about input event from this link.

document.querySelector('[id="shippingFirstName"]').value=nameParts[0];
document.querySelector('[id="shippingLastName"]').value=nameParts[0];
document.querySelector('[id="shippingFirstName"]').dispatchEvent(new Event("input", { bubbles: true }));
document.querySelector('[id="shippingLastName"]').dispatchEvent(new Event("input", { bubbles: true }));

Carol Ng · Answer 2 · 2018-11-08T19:52:54.027

0

Check out this question: val() doesn't trigger change() in jQuery

In summary, it looks like .val() by itself might not trigger the text field's change event, but you can trigger it manually by running this after you change the value:

$('[id="shippingFirstName"]').trigger("change");

If change() doesn't trigger it, you could try a bigger list of events to trigger the change in the put field:

$('[id="shippingFirstName"]').keydown();
$('[id="shippingFirstName"]').keypress();
$('[id="shippingFirstName"]').keyup();
$('[id="shippingFirstName"]').focus();

edited Nov 08 '18 at 19:52

answered Nov 08 '18 at 03:00

Carol Ng

575
2
11

I understood the direction, but unfortunately it does not help. I might need something that really resembles a real click on the input. – Shayki Abramczyk Nov 08 '18 at 07:46
If you just need to click it, has using `.click()` on the element worked before/after inputting the text? – Carol Ng Nov 08 '18 at 16:47
I've updated the answer to include a larger list of events. If one of those doesn't work, you could try a more [exhaustive list on MDN](https://developer.mozilla.org/en-US/docs/Web/Events#Standard_events). – Carol Ng Nov 08 '18 at 19:54
Still doesn't work :( I updated my question, please check. – Shayki Abramczyk Nov 08 '18 at 20:57
Ah, your form is definitely using Angular as a previous commenter noted. Try taking a look at [this question](https://stackoverflow.com/questions/22942509/angularjs-update-input-manually-does-not-trigger-change-in-the-model#22942828). – Carol Ng Nov 09 '18 at 00:19

HTML input element does not recognize value when I put value programmatically

The problem:

2 Answers2