Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Dec 2008
    Thanked 0 Times in 0 Posts

    need onClick href to change hidden field values

    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)
    Last edited by psgbuilder; 12-06-2008 at 08:07 PM. Reason: added clarity

  • #2
    Senior Coder
    Join Date
    Oct 2008
    Long Beach
    Thanked 167 Times in 167 Posts
    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.
    Last edited by itsallkizza; 12-07-2008 at 06:16 AM.
    Feel free to e-mail me if I forget to respond ;)

  • #3
    New to the CF scene
    Join Date
    Dec 2008
    Thanked 0 Times in 0 Posts
    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.


    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts