Skip to content

Instantly share code, notes, and snippets.

@hobelinm

hobelinm/CustomInput.html

Created October 15, 2014 05:35
Show Gist options
  • Save hobelinm/258c30880d5d2757dc5b to your computer and use it in GitHub Desktop.
Save hobelinm/258c30880d5d2757dc5b to your computer and use it in GitHub Desktop.
Download ZIP
Customizable Input HTML
Raw
CustomInput.html
<!DOCTYPE html>
<html>
<body>
<h1>Customizable Form</h1>
<p>A custom form will show up with appropriate fields to complete.</p>
<select id="select" onchange="leaveChange()">
<option value="none">Select a Car</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<div id="field"></div>
<div style="display: none;" id="volvo">
Volvo Owner: <input type="text" name="Owner" value="You"><br>
Milleage: <input type="text" name="Mileage" value="0"><br>
</div>
<div style="display: none;" id="saab">
Saab Owner: <input type="text" name="Owner" value="You"><br>
Milleage: <input type="text" name="Mileage" value="0"><br>
</div>
<div style="display: none;" id="opel">
Opel Owner: <input type="text" name="Owner" value="You"><br>
Milleage: <input type="text" name="Mileage" value="0"><br>
</div>
<div style="display: none;" id="audi">
Audi Owner: <input type="text" name="Owner" value="You"><br>
Milleage: <input type="text" name="Mileage" value="0"><br>
</div>
<script>
function leaveChange() {
switch(document.getElementById("select").value) {
case "volvo":
document.getElementById("field").innerHTML = document.getElementById("volvo").innerHTML
break;
case "saab":
document.getElementById("field").innerHTML = document.getElementById("saab").innerHTML
break;
case "opel":
document.getElementById("field").innerHTML = document.getElementById("opel").innerHTML
break;
case "audi":
document.getElementById("field").innerHTML = document.getElementById("audi").innerHTML
break;
}
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment