Select Option Values Written into Two Hidden Fields

JavaScript
1

I am trying to pass 2 hidden values from the selected option drop down option.

For example, here is the html for the drop-down:

<select name=“description1”/>
<option value=“”>Select a category</option>
<option value=“3563” >Disaster Relief Fund</option>
<option value=“3564”>New Turbine DC-3</option>
<option value=“3551”>DC-3 Repaint Project</option>
</select>
<input type=“submit” value=“Continue” name=“order” />

I need “description1” to be passed as the text (or hidden text) “Disaster Relief Fund” and I need a separate hidden text “item1” to be passed as “3563”.

Anybody know how to do this with javascript or just html?

Thanks!

2

You can use DOM methods to take the values you need from the select list and then set them to the values of hidden textboxes.

3 

<form id="descriptiveFormName">
    ...
    <input type="hidden" name="descValue">
    <input type="hidden" name="descText">
</form>



var form = document.getElementById('descriptiveFormName');
form.elements.description1.onchange = function () {
    var option = this.options[this.selectedIndex];
    this.form.elements.descValue.value = option.value;
    this.form.elements.descText.value = option.innerHTML;
}
4

Here’s another way to do it. The two hidden values are shown as an alert() when the script runs.

[HIGHLIGHT=“”]
<!doctype HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>

<head>

<meta http-equiv=“Content-Type” content=“text/html; charset=windows-1252”>
<title>Populate hidden variables from select</title>
<script type=“text/javascript”>
<!–
function process(formObj)
{ var F=formObj.description1;
// check for valid selection
if(F.selectedIndex==0){return;}
// ------
formObj.hidden1.value=F.options[F.selectedIndex].value;
formObj.hidden2.value=F.options[F.selectedIndex].text;
alert("hidden1= "+formObj.hidden1.value);
alert("hidden2= "+formObj.hidden2.value);
}
//–>
</script>
</head>

<body>

<form name=“myForm”>
<p><select name=“description1” onchange=“process(this.form)”>
<option value>Select a category</option>
<option value=“3563”>Disaster Relief Fund</option>
<option value=“3564”>New Turbine DC-3</option>
<option value=“3551”>DC-3 Repaint Project</option>
</select> <input type=“button” value=“Submit” name=“order” disabled></p>
<input type=“hidden” value=“0” name=“hidden1”>
<input type=“hidden” value=“0” name=“hidden2”>
</form>
<!-- end myForm –>

</body>

</html>

5

A significant problem with that technique though is that you are then using inline scripting events, which is quite a no-no these days.

6

This passes just the “description1” option value, not text. And doesn’t pass anything for “item1” field. What error did I make? Thanks!

Here’s the javascript code:

var form = document.getElementById(‘pay’);
form.elements.description1.onchange = function () {
var option = this.options[this.selectedIndex];
this.form.elements.item1Value.value = option.value;
this.form.elements.description1Text.value = option.innerHTML;
}

And, then the html:
<form name=pay id=pay>
<select name=“description1”>
<option>Select a category</option>
<option value=“3653”>Disaster Relief Fund</option>
<option value=“3654”>New Turbine DC-3</option>
<option value=“3551”>Repaint DC-3 Project</option></select>
<input type=“hidden” name=“description1” />
<input type=“hidden” name=“item1”/>
<input type=“submit” name=“order” value=“Continue” /></form>

7

Is the script running after the form is available? If you run the script before the form exists, the script cannot obviously do anything with the form.
Apply the best-practice of putting your scripts at the bottom of the page, just before the </body> tag, and that will help a lot.

Where you have item1Value and description1Text, those should be the names of the form fields, such as item1 and description1

Also, the name=“pay” part is not needed, and can even be confusing when left there. You’ll be best to get rid of that as well.

8

Here are those suggestions built into the code. Several areas needed changing. You can see these if you compare your previous code with this new code. You also need an action attribute before you can submit the form, and to change my button back to a submit button after removing the disabled attribute. The alerts are included so that you can see the result of saving the values.

[HIGHLIGHT=“”]
<!doctype HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>

<head>

<meta http-equiv=“Content-Type” content=“text/html; charset=windows-1252”>
<title>Save hidden variables in form</title>
</head>

<body>

<!-- no action attribute yet set for this form –>
<form id=“pay”>
<p><select name=“description1”>
<option>Select a category</option>
<option value=“3653”>Disaster Relief Fund</option>
<option value=“3654”>New Turbine DC-3</option>
<option value=“3551”>Repaint DC-3 Project</option>
</select> <input type=“hidden” name=“hidden1”>
<input type=“hidden” name=“item1”>
<input type=“button” name=“order” value=“Continue” disabled></p>
</form>
<script type=“text/javascript”>
<!–
var form = document.getElementById(“pay”);
form.elements.description1.onchange = function () {
//check for invalid selection
if(this.selectedIndex==0){return; }
// --------
var option = this.options[this.selectedIndex];
// — changes here –
this.form.elements.item1.value = option.value;
// — changes here –
this.form.elements.hidden1.value = option.innerHTML;
// — added this for info only —
alert("hidden1= "+this.form.elements.hidden1.value);
alert("item1= "+this.form.elements.item1.value);
}
//–>
</script>

</body>

</html>