CODEWITHSUNDEEP
javascriptgoogle-chrome-extension
CHHU
CHHU

Reputation: 71

Use Javascript to fill out values in a form, but all values disappear after clicking

I'm working on this Chrome extension that's intended to work on nike.com to fill out shipping forms. 

  document.getElementById('firstName').value = items['home']['firstname'];
  document.getElementById('lastName').value = items['home']['lastname'];
  document.getElementById('address1').value = items['home']['addrfirst'];
  document.getElementById('address2').value = items['home']['addrsecond'];
  document.getElementById('city').value = items['home']['city'];
  document.getElementById('state').value = items['home']['state'];
  document.getElementById('postalCode').value = items['home']['zipcode'];
  document.getElementById('email').value = items['home']['email'];
  document.getElementById('phoneNumber').value = items['home']['phone'];

Here is how my code is like. 'items' are existing data I have. I could fill in all the values in the nike.com form but the data won't persist after I click on any input area in the form. And I found that the value attribute for input is actually empty though they show up in the web view.

Upvotes: 3

Views: 239

Answers (2)

FisNaN
FisNaN

Reputation: 2865

Since Nike.com uses React, this problem is equivalent to trigger onChange event outside of React code.

Set value won't work, since React override the value with its inner state/store.
The idea is to create an event and then dispatch it to trigger the onChange event inside React.

After some research, I found this code works: 

function onBtnClick() {
  updateInput("firstName", "react 16 value");
}

function updateInput(id, value) {
  var input = document.getElementById(id);
  if (input) {
    var nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value").set;
    nativeInputValueSetter.call(input, value);
    var ev = new Event("input", {
      bubbles: true
    });
    input.dispatchEvent(ev);
  } else {
    console.error("Cannot find id!");
  }
}
<div>
  <label>Assume this is a React component</label>
  <input id="firstName" type="text" />
</div>
<div>
  <label>Your code has no access to React store/state</label>
  <button onclick="onBtnClick()">Assign</button>
</div>

Here is the React demo
Edit Trigger onChange outside React

This method only works on React v15.6 and later version
I checked Nike.com, it currently using React v15.6.1.

Upvotes: 1

Duc Filan
Duc Filan

Reputation: 7157

Nike.com uses React JS. So your input needs an event dispatched to trigger the change to persist data. I created the below function snippet:

function fillReactInput(target, val) {
  var event = new Event('input', {
    'bubbles': true,
    'cancelable': true
  });
  target.value = val;
  target.dispatchEvent(event);
}

To fill the input:

var targetElement = document.getElementById('firstName');
var targetValue = items['home']['firstname'];
fillReactInput(targetElement, targetValue);

Hope this helps.

Upvotes: 1

Related Questions