5

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:

enter image description here

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

enter image description here

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

enter image description here

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?

Improve this question
13
  • 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'. Commented Oct 29, 2018 at 9:57
  • @wOxxOm Thanks! but I didn't understand, can you explain more...? Commented Oct 31, 2018 at 12:39
  • Try with document.querySelector('[id="shippingFirstName"]').value=nameParts[0]; instead of $('[id="shippingFirstName"]').val(nameParts[0]) Commented Nov 6, 2018 at 7:21
  • @ChinmoySamanta the same result :( Commented Nov 7, 2018 at 7:24
  • Use focus method after setting value of input elements. Eg: document.querySelector('[id="shippingFirstName"]').focus() Commented Nov 8, 2018 at 9:01

2 Answers 2

Reset to default
6
+50

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 }));
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

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();
Improve this answer

5 Comments

I understood the direction, but unfortunately it does not help. I might need something that really resembles a real click on the input.
If you just need to click it, has using .click() on the element worked before/after inputting the text?
I&#39;ve updated the answer to include a larger list of events. If one of those doesn&#39;t work, you could try a more exhaustive list on MDN.
Still doesn't work :( I updated my question, please check.
Ah, your form is definitely using Angular as a previous commenter noted. Try taking a look at this question.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.