Advanced Search

Results 1 to 7 of 7

Thread: Change a hidden field using javascript

  1. #1
    Join Date
    May 2007
    Location
    England, UK
    Posts
    235
    Thanks
    3
    Thanked 6 Times in 6 Posts

    Default Change a hidden field using javascript

    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?

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,690
    Thanks
    43
    Thanked 3,129 Times in 3,095 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,626
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    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>

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,690
    Thanks
    43
    Thanked 3,129 Times in 3,095 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,626
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post
    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.

  6. #6
    Join Date
    May 2007
    Location
    England, UK
    Posts
    235
    Thanks
    3
    Thanked 6 Times in 6 Posts

    Default

    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.

  7. #7
    Join Date
    Sep 2006
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

Bookmarks

Posting Permissions

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