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

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:

<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>

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

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)

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">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<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;

// ]]>

<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" />

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


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.

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.