PDA

View Full Version : need onClick href to change hidden field values

psgbuilder
12-06-2008, 06:36 PM
I am trying to write color values to 2 hidden form fields.

There are a total of 21 different colors in the actual application which is a product configurator.
Customer selects and sees his color choices before submitting the form.

Sometimes the customer's choice is a single solid color other times it is 2-tone.

The basic code so far looks like this:


<ul>
<li><a href="javascript::" onClick="document.form1.color1.value='black';document.form1.color2.value='black'">black color1 and color2</a></li>
<li><a href="javascript::" onClick="document.form1.color1.value='green';document.form1.color2.value='green'">green color1 and color2</a></li>
<li><a href="javascript::" onClick="document.form1.color1.value='blue';document.form1.color2.value='yellow'">blue color1 and yellow color2</a></li>
</ul>


<form name="form1" method="post" action="">
<input name="color1" type="hidden" value="" >
<input name="color2" type="hidden" value="" >
</form>

If I change the type to text this works correctly.
Unfortunately, it does not seem to work for hidden fields.
I would appreciate any help.
(I suppose I could use CSS display:none to hide the text box but that seems rather cludgy)
(Alternatively, I could allow the display and prevent direct user input by putting an empty layer over the box)
itsallkizza
12-07-2008, 06:10 AM
Here's the concept, do with it as you will:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Example</title>
<style type="text/css">
</style>
<script type="text/javascript">
// <![CDATA[

function onFormSubmit(form_elm)
{
document.getElementById("display").innerHTML = "my_hidden_input.value = "+form_elm.my_hidden_input.value;
return false;
}

function changeHiddenValue(new_value)
{
//these all work in most browsers, however the third option doesnt work in ALL browsers, and it is also considered bad form
document.getElementById("my_form").my_hidden_input.value = new_value;
//document.forms["my_form"].my_hidden_input.value = new_value;
//document.my_form.my_hidden_input.value = new_value;
return false;
}

// ]]>
</script>
</head>
<body>

<a href="#" onclick="return changeHiddenValue('new value1')">Change my_form's my_hidden_input to "new value1".</a><br />
<a href="#" onclick="return changeHiddenValue('new value2')">Change my_form's my_hidden_input to "new value2".</a><br />
<a href="#" onclick="return changeHiddenValue('new value3')">Change my_form's my_hidden_input to "new value3".</a>

<form id="my_form" name="my_form" onsubmit="return onFormSubmit(this)">
<input type="hidden" name="my_hidden_input" value="old value" />
<input type="submit" value="show hidden values" />
</form>

<div id="display"></div>

</body>
</html>


The difference lies in the way you reference the form. You shouldn't grab a form using document.form_name. The best way to reference a form is with document.getElementById(form_id), however document.forms[form_name] is also cross-browser.

However, I'm not sure why your original script doesn't work on hidden inputs. I tried the concept on IE7 and FF3 here on my comp and it works fine.
psgbuilder
12-08-2008, 12:17 AM
Thank you for your assistance.

I found out earlier yesterday that the original code was working when I finally passed the values to another page.
I was looking at the source to see the values written in there.

Your implementation is better and I am using it with modifications.