Soy bastante nuevo en Javascript y estoy tratando de crear un script para autocompletar un formulario de contacto con datos de muestra.
El objetivo es agregar valores predeterminados en los diferentes campos de entrada. es decir, el usuario selecciona "1600 Pennsylvania Avenue NW Washington DC 20500" -> "1600 Pennsylvania" se agrega al valor del campo "StreetAddress", y así sucesivamente.
Realmente no tengo idea de cómo comenzar y estaría muy agradecido si alguien pudiera indicarme la dirección correcta.
¡Gracias por adelantado!
<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>prueba esto: 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 } }