表单自动填充样本数据从选择与Javascript

我是Javascript的新手，我正在尝试创建一个脚本来自动填充带有示例数据的联系人表单。

目标是在不同的输入字段中添加预定值。即用户选择"1600 Pennsylvania Avenue NW Washington DC 20500";→"1600 Pennsylvania"被添加到"街道地址"中。字段值等。

我真的不知道从哪里开始，如果有人能给我指出正确的方向，我将非常感激。

提前感谢!

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

试试这个:

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

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
}

}

相关内容

最新更新

热门标签：