Dynamically populate a field based on dropdown selection (Javascript / HTML)
I am looking for some help in coding my companies website. We are trying to create a custom "part number generator" based on selections made from a dropdown box. Our goal is that when a user picks an option in the dropdown box that it dynamically fills in a box underneath, eventually creating a part number. The attached screenshot is a good visual representation of the design and where we want the output boxes. We are looking to do it in JavaScript and HTML.
The code we are using currently to get just a box that generates an output based on the selection is this:
<script type="text/javascript">
// Pre populated array of data
var myData = new Array();
myData[1] = 'Some text';
myData[2] = 'Some other text';
</script>
<form id="example" name="example">
<select id="selector" name="selector">
<option value="" selected></option>
<option value=1>One</option>
<option value=2>Two</option>
</select>
<br />
<input type="text" value="" id="populateme" name="populateme" />
</form>
<script type="text/javascript">
document.example.selector.onchange = updateText;
function updateText() {
var obj_sel = document.example.selector;
document.example.populateme.value = myData[obj_sel.value];
}
</script>
I have searched around this website a bit and found some solutions for dynamic field population, but when I try to add a second form or move the box that will have the output in it, the code just stops working. I was wondering if anyone had experience with populating multiple fields with a dropdown selection. I can provide more information as needed, just message me or comment below.
Info about the picture: This picture is done with our current Joomla Form extension and Photoshop to show everyone what we want it to look like. I dont care about the gray box or the formatting, we are just having issues with the code to move the output boxes down (lined horizontally) and having the options vertically.
Answer
Easiest solution (without the array):
<html>
<body>
<form id="example" name="example">
<select id="sensor" onchange="updateText('sensor')">
<option value="J">J</option>
<option value="K">K</option>
</select>
<select id="voltage" onchange="updateText('voltage')">
<option value="120V">120V</option>
<option value="240V">240V</option>
</select>
<br />
<input type="text" value="" id="sensorText" /> <input type="text" value="" id="voltageText" />
</form>
<script type="text/javascript">
function updateText(type) {
var id = type+'Text';
document.getElementById(id).value = document.getElementById(type).value;
}
</script>
</body>
</html>
You can also make it very complicated like using hash arrays. Let me know if you need the complicated solution.