Auto-fill multiple form fields using select

Question

I'm trying to auto-fill a form based off a select box. Basically when a user selects a company, I'm wanting the form to auto-populate the rest of the fields based off their selection ("Company A" or "Company B" in the example below).

I'm not sure if I'm even on the right track here, or if it's even possible. I'm sure additional javascript would be needed. Any suggestions would be greatly appreciated.

 COMPANIES.JSON_REP = { "companies":[ { "company": "Company A", "phone": "(555) 555-5555", "address":{ "addressOne": "84 Rainey St", "city": "Arlen", "state": "TX", "postalCode": "78104", } }, { "company": "Company B", "phone": "(555) 555-5555", "address":{ "addressOne": "1640 Riverside Dr", "city": "Hill Valley", "state": "CA", "postalCode": "91905", } } ] };

 <form method="POST" action=""> <div class="field"> <label for="company">Company</label> <select id="company" name="company" required> <option value="">Company A</option> <option value="">Company B</option> </select> </div> <div class="field"> <label for="phone">Phone</label> <input type="text" id="phone" name="phone"> </div> <div class="field"> <label for="addressOne">Street Address*</label> <input type="text" id="addressOne" name="addressOne" required> </div> <div class="field"> <label for="addressTwo">Apt, suite, etc (optional)</label> <input type="text" id="addressTwo" name="addressTwo"> </div> <div class="field"> <label for="city">City*</label> <input type="text" id="city" name="city" required> </div> <div class="field"> <label for="state">State*</label> <select id="state" name="state" required> <option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option> <option value="AR">Arkansas</option> <option value="CA">California</option> <option value="CO">Colorado</option> <option value="CT">Connecticut</option> <option value="DC">District of Columbia</option> <option value="DE">Delaware</option> <option value="FL">Florida</option> <option value="GA">Georgia</option> <option value="HI">Hawaii</option> <option value="ID">Idaho</option> <option value="IL">Illinois</option> <option value="IN">Indiana</option> <option value="IA">Iowa</option> <option value="KS">Kansas</option> <option value="KY">Kentucky</option> <option value="LA">Louisiana</option> <option value="ME">Maine</option> <option value="MD">Maryland</option> <option value="MA">Massachusetts</option> <option value="MI">Michigan</option> <option value="MN">Minnesota</option> <option value="MS">Mississippi</option> <option value="MO">Missouri</option> <option value="MT">Montana</option> <option value="NE">Nebraska</option> <option value="NV">Nevada</option> <option value="NH">New Hampshire</option> <option value="NJ">New Jersey</option> <option value="NM">New Mexico</option> <option value="NY">New York</option> <option value="NC">North Carolina</option> <option value="ND">North Dakota</option> <option value="OH">Ohio</option> <option value="OK">Oklahoma</option> <option value="OR">Oregon</option> <option value="PA">Pennsylvania</option> <option value="RI">Rhode Island</option> <option value="SC">South Carolina</option> <option value="SD">South Dakota</option> <option value="TN">Tennessee</option> <option value="TX">Texas</option> <option value="UT">Utah</option> <option value="VT">Vermont</option> <option value="VA">Virginia</option> <option value="WA">Washington</option> <option value="WV">West Virginia</option> <option value="WI">Wisconsin</option> <option value="WY">Wyoming</option> </select> </div> <div class="field"> <label for="postalCode">Zipcode*</label> <input type="text" id="postalCode" name="postalCode" required> </div> <div class="field"> <button type="submit">Send</button> </div> </form>

Answer 1

You can use a JS function like this:

function updateFields(addressId) {
  document.getElementById('phone').value = COMPANIES.JSON_REP.companies[addressId].phone;
  document.getElementById('city').value = COMPANIES.JSON_REP.companies[addressId].address.city;
  /* more fields */
}

And change your select#company as follows:

<select id="company" name="company" onchange="updateFields(document.getElementById('company').value)" required>
  <option value="0">Company A</option>
  <option value="1">Company B</option>
</select>

In other words, you need some function that will change inputs' values when user picks different option in select input. To do this your select should trigger the function in onchange with parameter document.getElementById('company').value - its own value. This value indicates COMPANIES.JSON_REP.companies array key.