6

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.

LINK TO SCREENSHOT

ROMANIA_engineer
  • 54,432
  • 29
  • 203
  • 199
FlexMarket
  • 155
  • 1
  • 2
  • 10

1 Answers1

9

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.

webtrick101
  • 214
  • 1
  • 6
  • I really can't thank you enough webtrick101! It works perfectly and I was able to add other variables completely fine! You are a life saver! Many thanks my friend! – FlexMarket Jan 26 '15 at 14:17
  • How would you edit this to output the values into php variables `$sensor` and `$voltage` instead of input fields? – Paul Ruocco Nov 30 '15 at 18:39
  • What if you wanted to populate with some text other than the value text. So you might select 'K' (and store 'K' in a database) but actually populate the field with some longer description like "you selected the 'k' sensor" – Strawberry Feb 18 '16 at 12:36
  • ...I can see that at a data- attribute could work, but I can't see how :-( – Strawberry Feb 19 '16 at 18:05