Change a hidden field using javascript

**jc_gmk** · 02-04-2008, 02:26 PM

How do I change a hidden field using javascript?

e.g.

HTML Code:

<form>
<select name="category">
<option value="men">Men</option>
<option value="women">Women</option>
<option value="under18">Under 18's</option>
</select>

<input name="price" type="hidden" value="Depends on which option is selected" />

I want to add the value into the hidden field based on the option selected.
But if the value of the option is "men" i would want the value of "41" to be entered into the hidden field. Or if the value is womens i would need the value to be "39" and "under18" would need to be "20".

Is this possible?

**jscheuer1** · 02-04-2008, 05:42 PM

Yes, this will work:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function setPrice(el){
var prices=[30, 20, 10];
var p=el.options.selectedIndex;
el.form.elements['price'].value=prices[p];
}
</script>
</head>
<body>
<form>
<select name="category" onchange="setPrice(this);">
<option value="men">Men</option>
<option value="women">Women</option>
<option value="under18">Under 18's</option>
</select>
<input name="price" type="hidden" value="30">
</form>
</body>
</html>

Set the prices in the highlighted array, one for each select option. I hard coded the initial selection's "price" into the input. There are other ways of dealing with this though.

**codeexploiter** · 02-05-2008, 03:16 AM

I don't know why you are using the same items as the value and text items of the select list. You can mention the needed value in the value attribute of your option elements rather than repeating the text you've mentioned as the title of the option.

Consider the following code

Code:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title> </title>
		<style type="text/css">
		
		</style>
		<script type="text/javascript">
		function setPrice(selObj){
			document.forms['f1'].price.value = selObj.options[selObj.options.selectedIndex].value;			
		}
		</script>
	</head>
	<body>
		<form name='f1'>
			<select name="category" onchange='javascript: setPrice(this);'>
				<option value=''>Select an option</option>
				<option value="41">Men</option>
				<option value="39">Women</option>
				<option value="20">Under 18's</option>
			</select>
		<input name="price" type="hidden" value="" />
</form>
	</body>
</html>

**jscheuer1** · 02-05-2008, 03:29 AM

I assume you are asking that question of jc_gmk. I did think about that. It could be that the value of the select is required for when the form is submitted. I really try not to be a mind reader when it comes to helping folks with their code. If it isn't required for that, the value of the selects would be the logical place for the price and no javascript should be required to deal with it, as it could be taken from the value of the select on submission.

**codeexploiter** · 02-05-2008, 03:36 AM

Originally Posted by jscheuer1

I assume you are asking that question of jc_gmk. I did think about that. It could be that the value of the select is required for when the form is submitted. I really try not to be a mind reader when it comes to helping folks with their code. If it isn't required for that, the value of the selects would be the logical place for the price and no javascript should be required to deal with it, as it could be taken from the value of the select on submission.

Definitely the question is not intended for you John. I thought he might be missing something while using the select lists. So thought of giving an example that uses the value of the select list. From these two examples I hope he can understand the idea and working of select lists.

**jc_gmk** · 02-05-2008, 09:58 AM

I did need the two seperate values to be submitted rather than just changing the value of the select.

Thanks John, the script works a treat!
Great help once again.

**immortal_king** · 02-26-2011, 06:09 PM

Hi, Thanks, Indeed a nice script.

I am a juvenile and looking for some more additiona functionality.

When user selects both Price and the category get updated in their respective fields. Now the existing script takes care of "price" only.

I tried with my level best to fail.

I had dmaged the script as follows:
=========================================

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title> </title>
<style type="text/css">

</style>
<script type="text/javascript">
function setPrice(selObj){
document.forms['f1'].category.value = selObj.options[selObj.options.selectedIndex].value;
document.forms['f1'].price.value = selObj.options[selObj.options.selectedIndex].value;
}
</script>
</head>
<body>
<form name='f1'>
<select name="category" onchange='javascript: setPrice(this);'>
<option value=''>Select an option</option>
<option value="41">Men</option>
<option value="39">Women</option>
<option value="20">Under 18's</option>
</select>
<input name="category" type="text" value="" size="20" />
<input name="price" type="text" value="" size="20" />
</form>
</body>
</html>
====================================

Can some of you kindly help me. Thanks in advance and in anticipation.

Thread: Change a hidden field using javascript

Thread Tools

Search Thread

Change a hidden field using javascript

Bookmarks

Bookmarks

Posting Permissions