I'm fairly new to Javascript and am trying to create a script to autofill a contact form with sample data.
Goal is to add predetermined values into the different input fields. i.e. User selects "1600 Pennsylvania Avenue NW Washington DC 20500" -> "1600 Pennsylvania" is added into the "StreetAddress" field-value, and so on..
I really have no idea to start and would be very thankful if someone could point me in the right direction.
Thanks in advance!
<div class="address-Form">
<div class="sample-select-box">
<select class="sample-select">
<option>Select sample data set</option>
<option value="select-1">Heilsbronner Strasse 4 91564 Neuendettelsau</option>
<option value="select-2">1600 Pennsylvania Avenue NW Washington DC 20500</option>
<option value="select-3">Champ de Mars 5 Av. Anatole France 75007 Paris</option>
<option value="select-4">1 Queen's Rd W Sheung Wan Hong Kong</option>
</select>
</div>
<div class="section-head">
<div class="head">Input Fields</div>
<div class="head">Values</div>
</div>
<form class="apiform">
<div id="TextBoxContainer">
<div class="apiform-field">
<div class="sample-select-box">
<label class="text">Street Address</label>
</div>
<div class="field-value">
<label class="form-input">
<input type="text" name="data-value" placeholder="Street Address" class="sample-input" value="StreetAddress">
</label>
</div>
</div>
</div>
try this : HTML
<div class="address-Form">
<div class="sample-select-box">
<select class="sample-select" id="selectAddress" onchange="addSelect()">
<option value="">Select sample data set</option>
<option value="1600 Pennsylvania Avenue NW Washington DC 20500">Heilsbronner Strasse 4 91564 Neuendettelsau</option>
<option value="1600 Pennsylvania Avenue NW Washington DC 20500">1600 Pennsylvania Avenue NW Washington DC 20500</option>
<option value="Champ de Mars 5 Av. Anatole France 75007 Paris">Champ de Mars 5 Av. Anatole France 75007 Paris</option>
<option value="1 Queen's Rd W Sheung Wan Hong Kong">1 Queen's Rd W Sheung Wan Hong Kong</option>
</select>
</div>
<div class="section-head">
<div class="head">Input Fields</div>
<div class="head" id="headId"></div>
</div>
<form class="apiform">
<div id="TextBoxContainer">
<div class="apiform-field">
<div class="sample-select-box">
<label class="text">Street Address</label>
</div>
<div class="field-value">
<label class="form-input">
<input type="text" name="data-value" id="sample-input" placeholder="Street Address" class="sample-input" value="StreetAddress">
</label>
</div>
</div>
JS
document.getElementById('sample-input').value = "Street Address";
document.getElementById('headId').innerHTML = "Values"
function addSelect(){
console.log(document.getElementById('selectAddress').value);
if(document.getElementById('selectAddress').value === ""){
document.getElementById('sample-input').value = "Street Address";
document.getElementById('headId').innerHTML = "Values"
}
else {
document.getElementById('sample-input').value = document.getElementById('selectAddress').value;
document.getElementById('headId').innerHTML = document.getElementById('selectAddress').value
}
}