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
- function ItemAttributeColor()
- {
- var itemName = order.product.value;
- var itemColor = order.color.value;
- order.product.value =itemName+itemColor;
- }
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.