Need help creating form widgets in javascript (and more)

[TopherB]

Hi,
First let me say that my knowledge of HTML and Javascript is fairly limited. But I am stuck in a situation of trying to adapt a website's shopping cart to a new one.

Here's the problem, the code contains thousands of 'Add to Cart' buttons that look almost identical to this HTML snippet spread across over hundred pages:

[HTML]<form>
<p align="center">
<select name="package" size="1" style="width: 170" style="font-weight: 700">
<option selected>Full Package $14.99</option><option>Just Disk $5.99</option></select><b>&nbsp;</b>
<input type="button" value="Add to Cart" onclick="addToCartSimple('DF-498','Student Bodies',this.form);return false;"
style="font-weight: 700">
</p>
</form>[/HTML]

What we want to accomplish is to switch the cart without having to modify these lines. Unfortunately every help reference I've been able to find online uses the 'form name' reference, as there is no name reference in the code above I need a solution using the passed (this.form) reference.

I figure since it all goes through a central javascript routine "addToCartSimple" I ought to be able to just modify that and have the routine add and change the form elements I need and submit it.

The code for the Form I would be simulating looks like this:

[HTML]<!-- BEGIN www.ecartsoft.com ADD TO CART CODE
<FORM ACTION="HTTP://www.ecartsoft.com/cgi-bin/cart.cgi" METHOD="POST">
<INPUT TYPE="HIDDEN" NAME="acc" VALUE="xxxxx">
<INPUT TYPE="HIDDEN" NAME="page" VALUE="add to cart">
<INPUT TYPE="HIDDEN" NAME="required" VALUE="item_name,item_price">
<INPUT TYPE="HIDDEN" NAME="minimum_quantity_limit" VALUE="">
<INPUT TYPE="HIDDEN" NAME="max_quantity_limit" VALUE="">
<INPUT TYPE="HIDDEN" NAME="quantity" VALUE="1">
<INPUT TYPE="HIDDEN" NAME="item_sku" VALUE="DF-399">
<INPUT TYPE="HIDDEN" NAME="item_name" VALUE="Americathon">
<INPUT TYPE="HIDDEN" NAME="item_description" VALUE="">
<INPUT TYPE="HIDDEN" NAME="item_price" VALUE="12.99">
<INPUT TYPE="HIDDEN" NAME="item_weight" VALUE="">
<INPUT TYPE="HIDDEN" NAME="item_tax_id" VALUE="non-taxable">
<INPUT TYPE="HIDDEN" NAME="item_discount" VALUE="">
<INPUT TYPE="HIDDEN" NAME="item_image_url" VALUE="">
<INPUT TYPE="HIDDEN" NAME="Coupon_Code" VALUE="">
<INPUT TYPE="HIDDEN" NAME="secret_word" VALUE="">
<INPUT TYPE="HIDDEN" NAME="ship_free" VALUE="NO">
<INPUT TYPE="HIDDEN" NAME="handling_fee" VALUE="2.00">
<INPUT TYPE="HIDDEN" NAME="drop_ship" VALUE="">
<INPUT TYPE="HIDDEN" NAME="item_vendor" VALUE="">
<INPUT TYPE="HIDDEN" NAME="ship_calculation_method" VALUE="USPSOnline">
<INPUT TYPE="SUBMIT" VALUE="BUY NOW">
</FORM>
--> END eCartsoft ADD TO CART CODE -->
[/HTML]
I would like for there to be no noticeable change visibly to the form on the screen.
I've been struggling with this for a couple days but so far I get maddening lack of anything happening when I click on the button no matter what I try. I think my biggest problem is not understanding how Form items are created in Javascript (I can manipulate those already craeted in HTML but as I said we need avoid changing the original HTML. (don't worry about what to do with the data from 'select' element, I'll be able to extrapolate how to work that in.)

Can someone help point me in the correct direction, or much more preferably code addToCartSimple() for me, as I am far out of my depths here?

Any help is much appreciated.
Garth

[acoder]

See the HTML DOM for forms here.

You can set the action, method, name, etc. attributes as well as submit the form.