I am looking for some help in coding my panies 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 ment 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.
LINK TO SCREENSHOT
I am looking for some help in coding my panies 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 ment 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.
LINK TO SCREENSHOT
Share Improve this question edited Dec 16, 2017 at 7:57 ROMANIA_engineer 56.7k30 gold badges208 silver badges205 bronze badges asked Jan 22, 2015 at 14:21 FlexMarketFlexMarket 1551 gold badge2 silver badges10 bronze badges 01 Answer
Reset to default 9Easiest 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 plicated like using hash arrays. Let me know if you need the plicated solution.