Блог

Я довольно новичок в Javascript и пытаюсь создать скрипт для автоматического заполнения контактной формы образцами данных.

Цель состоит в том, чтобы добавить предопределенные значения в различные поля ввода. т. е. Пользователь выбирает «1600 Пенсильвания-авеню, Северо-запад, Вашингтон, округ Колумбия, 20500» — gt; «1600 Пенсильвания» добавляется в поле «Адрес улицы» — значение и так далее..

Я действительно понятия не имею, с чего начать, и был бы очень благодарен, если бы кто-нибудь мог указать мне правильное направление.

Заранее спасибо!

 lt;div class="address-Form"gt;  lt;div class="sample-select-box"gt;  lt;select class="sample-select"gt;  lt;optiongt;Select sample data setlt;/optiongt;  lt;option value="select-1"gt;Heilsbronner Strasse 4 91564 Neuendettelsault;/optiongt;  lt;option value="select-2"gt;1600 Pennsylvania Avenue NW Washington DC 20500lt;/optiongt;  lt;option value="select-3"gt;Champ de Mars 5 Av. Anatole France 75007 Parislt;/optiongt;  lt;option value="select-4"gt;1 Queen's Rd W Sheung Wan Hong Konglt;/optiongt;  lt;/selectgt;  lt;/divgt;  lt;div class="section-head"gt;  lt;div class="head"gt;Input Fieldslt;/divgt;  lt;div class="head"gt;Valueslt;/divgt;  lt;/divgt;  lt;form class="apiform"gt;  lt;div id="TextBoxContainer"gt;  lt;div class="apiform-field"gt;  lt;div class="sample-select-box"gt;  lt;label class="text"gt;Street Addresslt;/labelgt;  lt;/divgt;  lt;div class="field-value"gt;  lt;label class="form-input"gt;  lt;input type="text" name="data-value" placeholder="Street Address" class="sample-input" value="StreetAddress"gt;  lt;/labelgt;  lt;/divgt;  lt;/divgt; lt;/divgt;     

попробуйте это : HTML

 lt;div class="address-Form"gt;  lt;div class="sample-select-box"gt;  lt;select class="sample-select" id="selectAddress" onchange="addSelect()"gt;  lt;option value=""gt;Select sample data setlt;/optiongt;  lt;option value="1600 Pennsylvania Avenue NW Washington DC 20500"gt;Heilsbronner Strasse 4 91564 Neuendettelsault;/optiongt;  lt;option value="1600 Pennsylvania Avenue NW Washington DC 20500"gt;1600 Pennsylvania Avenue NW Washington DC 20500lt;/optiongt;  lt;option value="Champ de Mars 5 Av. Anatole France 75007 Paris"gt;Champ de Mars 5 Av. Anatole France 75007 Parislt;/optiongt;  lt;option value="1 Queen's Rd W Sheung Wan Hong Kong"gt;1 Queen's Rd W Sheung Wan Hong Konglt;/optiongt;  lt;/selectgt;  lt;/divgt;  lt;div class="section-head"gt;  lt;div class="head"gt;Input Fieldslt;/divgt;  lt;div class="head" id="headId"gt;lt;/divgt;  lt;/divgt;  lt;form class="apiform"gt;  lt;div id="TextBoxContainer"gt;  lt;div class="apiform-field"gt;  lt;div class="sample-select-box"gt;  lt;label class="text"gt;Street Addresslt;/labelgt;  lt;/divgt;  lt;div class="field-value"gt;  lt;label class="form-input"gt;  lt;input type="text" name="data-value" id="sample-input" placeholder="Street Address" class="sample-input" value="StreetAddress"gt;  lt;/labelgt;  lt;/divgt;  lt;/divgt;  

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