By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
431,780 Members | 1,549 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 431,780 IT Pros & Developers. It's quick & easy.

Using Javascript to alter a HTML hidden input value

P: 2
Hey everyone!

First of all I'd like to say that I did my best to look for any other relevant posts. The best I found was this interesting thread.. http://bytes.com/forum/thread594982.html

If it answered my question I am just to stupid to realize it I would like to apologize in advance. This is my very first attempt at using Javascript so any help at all is greatly appreciated. I read the W3Schools Tutorial on Javascript so that and some form posts are the extent of my JavaScript experience. So lets get into this..

I am building a website which uses a remote shopping cart service to handle E-Commerce. There is a small app used to enter product information (such as price, weight, etc.). The program then outputs either an HTML link with the product information within the URL or a form button with the product information within hidden input fields.

This system works great and is actually rather clever. The problem is that there is no support for product attributes. The company the website is for creates products in multiple species of wood. The customer must be able to select which species of wood they would like their item to be. To solve this problem I created a selection box which allows the user to choose a species.

This is where the JavaScript problem comes in. I wanted to create a script which would, on the click of the button, read the species selection value from the selection box. From there the script would add the value of the selection box to the Name value of the button. This, to me at least, seems to be a very simple solution to the problem. However, because of my inexperience with JavaScript I have had a tough time. Here is what I have so far.



[HTML]<form name="order" action="http://ww11.aitsafe.com/cf/add.cfm" method="post">

<p class="SubDisplay2">

<input type="hidden" name="userid" value="XXXXXXXXXX">

<input type="hidden" name="product" value="NC-05">

<input type="hidden" name="price" value="490" >

<input type="hidden" name="return" value="">

<input type="image" onclick= ItemAttributeColor() src="/Images/Links/AddToCart1.jpg" height="60" width="200" Alt="Add to Cart">

<select name="color" >
<option value=" BB"> Bubinga </option>
<option value=" BD"> Birdseye Maple</option>
<option value=" CA"> Canary </option>
<option value=" CU"> Curly Maple</option>
<option value=" CH"> Cherry</option>
</select>
</p>
</form>

[/HTML]

I need to be able to use this script on dozens of pages so I have referenced it as an external file in the <head> section as follows.



[HTML]<script type="text/javascript" src="Color.js"></script>
[/HTML]



The actual Javascript which is named Color.js is as follows.





Expand|Select|Wrap|Line Numbers
  1. function ItemAttributeColor()
  2.  
  3.   var itemName = order.product.value;
  4.   var itemColor = order.color.value;
  5.   order.product.value =itemName+itemColor;
  6.  
  7. }
  8.  

I am fairly confident that I totally slaughtered this language. However, I would like to learn more and use it more frequently so that I can continue to build my knowledge in the web design field. Thank you for any help that any of you can offer. If I left anything out please tell me so I can give you as much information as I can.
Aug 15 '08 #1
Share this Question
Share on Google+
3 Replies


acoder
Expert Mod 15k+
P: 16,027
You have to properly reference elements to access them and the best way would be via ID. Give both the hidden input field and the select element unique IDs, then use something like the following:
Expand|Select|Wrap|Line Numbers
  1.   var itemColor = document.getElementById("color").value;
  2.   document.getElementById("product").value += itemColor;
+= is short for val = val + ...
Aug 17 '08 #2

P: 2
Thank you! I got it to work right away and now its full steam ahead to complete this project. Thank you again for your help!
Aug 18 '08 #3

acoder
Expert Mod 15k+
P: 16,027
You're welcome. Glad to help :) Post again should you have any more questions.
Aug 18 '08 #4

Post your reply

Sign in to post your reply or Sign up for a free account.