使用选择自动填充多个表单字段

Question

我正在尝试根据选择框自动填写表单。 基本上，当用户选择一家公司时，我希望表单根据他们的选择（以下示例中的“公司 A”或“公司 B”）自动填充其余字段。

我不确定我是否在正确的轨道上，或者是否有可能。 我确定需要额外的 javascript。 任何建议将不胜感激。

 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

您可以使用这样的 JS 函数：

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 */
}

并更改您的select#company如下：

<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>

换句话说，当用户在选择输入中选择不同的选项时，您需要一些函数来改变输入的值。 为此，您的选择应该使用参数document.getElementById('company').value - 它自己的值触发onchange函数。 此值表示COMPANIES.JSON_REP.companies数组键。