const fieldValues = {
"Full Name": "David Webb",
"Alias": "Jason Bourne",
"Food": ["chicken","tacos"],
"Color": "#663399",
"DOB": "1970-09-13",
"Email": "thebourneybunch@gmail.com",
"Spam": "phone",
"Places": ["north-america","europe","antarctica"],
"State": "MO",
"Bio": "No, it doesn't start to come back. The knot's like everything else, I just found the rope and I did it.\n\nThe same way I can read, I can write, I can add, subtract, I can make coffee, I can shuffle cards, I can set up a chessboard.",
"Username": "JamesBondWishesHeWasMe",
"Password": "Kittens4EVER!"
};
const button = document.querySelector('button');
button.addEventListener('click', function() {
// loop through the `fieldValues` object we created to compare your desired values with those of the form fields
for ([fieldName, value] of Object.entries(fieldValues)) {
// store all found fields of each field name into a `fields` variable
const fields = Array.from(document.querySelectorAll(`[name="${fieldName}"]`));
// ensure that at least one field exists for each requested field name
if (fields.length) {
// if the input type permits multiple selected values (e.g. checkbox list, multi-select field)
if (fields[0].matches && (fields.length > 1 || (fields.length === 1 && fields[0].matches('select[multiple]')))) {
// store desired value as an array, even if it is a string, (i.e. "0" —> ["0"], ["1","2"] —> ["1","2"])
const values = [value].flat();
const isMultiSelect = fields[0].matches('select[multiple]');
// if the field is a multi-select field, evaluate its child option elements, otherwise, evaluate the actual fields (checkboxes)
const fieldOptions = isMultiSelect ? Array.from(fields[0].querySelectorAll('option')) : fields;
// deselect any pre-selected options for fields with the associated field name, using the selected/checked properties accordingly
fieldOptions.forEach(option => option[isMultiSelect ? "selected" : "checked"] = false);
// select/check any options/checkboxes that match values from the `fieldValues` object
fieldOptions.filter(option => values.includes(option.value)).forEach(option => option[isMultiSelect ? "selected" : "checked"] = true);
} else {
// if the field type only accepts one value, set it equal to the value from the `fieldValues` object
fields[0].value = value;
}
}
}
});
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css');
body {
padding: 30px;
}
form {
display: grid;
grid-template-columns: 120px 1fr;
gap: 10px;
}
label, input, textarea, select, button {
font-family: system-ui, arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
select[multiple] {
height: 130px;
overflow: hidden;
}
textarea {
height: 90px;
resize: none;
}
label, button {
font-weight: bold;
}
label + div {
display: flex;
flex-wrap: wrap;
gap: 5px 10px;
}
label + div > label {
white-space: nowrap;
}
button {
display: inline-flex;
align-items: center;
justify-content: center;
appearance: none;
-webkit-appearance: none;
margin-bottom: 20px;
padding: 8px 16px;
background-color: #58f;
border: none;
border-radius: 50px;
font-size: 18px;
color: #fff;
cursor: pointer;
}
button i {
margin-left: 10px;
}
<button>Fill this form<i class="fas fa-magic"></i></button>
<form>
<label for="fullName">Full Name</label>
<input id="fullName" type="text" name="Full Name" placeholder="Clark Kent">
<label for="alias">Alias</label>
<input id="alias" type="text" name="Alias" placeholder="Superman (you get the idea…)">
<label for="favoiteColor">Favorite Color</label>
<input id="favoiteColor" type="color" name="Color" value="#FF0000">
<label for="food">I'm craving…</label>
<select id="food" name="Food" multiple>
<option value="chicken">Chicken</option>
<option value="fried-rice">Fried rice</option>
<option value="pizza">Pizza</option>
<option value="tacos">Tacos</option>
<option value="ice-cream">Ice cream</option>
<option value="pasta">Pasta</option>
</select>
<label for="dob">DOB</label>
<input id="dob" type="date" name="DOB">
<label for="email">Email Address</label>
<input id="email" type="email" name="Email">
<label for="spam">Spam me via…</label>
<div>
<label for="spam-email"><input id="spam-email" type="radio" name="Spam" value="email"> Email</label>
<label for="spam-phone"><input id="spam-phone" type="radio" name="Spam" value="phone"> Phone</label>
</div>
<label for="places">I've been to…</label>
<div>
<label for="africa"><input id="africa" type="checkbox" name="Places" value="africa"> Africa</label>
<label for="antarctica"><input id="antarctica" type="checkbox" name="Places" value="antarctica"> Antarctica</label>
<label for="asia"><input id="asia" type="checkbox" name="Places" value="asia"> Asia</label>
<label for="australia"><input id="australia" type="checkbox" name="Places" value="australia"> Australia</label>
<label for="europe"><input id="europe" type="checkbox" name="Places" value="europe"> Europe</label>
<label for="north-america"><input id="north-america" type="checkbox" name="Places" value="north-america"> North America</label>
<label for="south-america"><input id="south-america" type="checkbox" name="Places" value="south-america"> South America</label>
</div>
<label for="state">Home state</label>
<select id="state" name="State">
<option value="" style="display: none;" disabled="disabled" selected="selected">Choose a state…</option>
<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="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>
<label for="bio">Bio</label>
<textarea id="bio" name="Bio" placeholder="Tell us a bit about yourself…"></textarea>
<label for="username">Username</label>
<input id="username" type="text" name="Username">
<label for="password">Password</label>
<input id="password" type="password" name="Password">
</form>