ADDITIONALINFO using RadioButtons

[Stefko]

I found this thread and thought it should be posted in the MODS Forum, thanks to "buzzbuzz" for this great peice of code!!

To have it process radio buttons, add the following code to the nopcart.js script for whichever ADDITIONALINFO variable you are using for radio buttons. Change the variable name accordingly as well.

if ( thisForm.ADDITIONALINFO5 != null ) {
for (var i=0; i < thisForm.ADDITIONALINFO5.length; i++)
{
if (thisForm.ADDITIONALINFO5[i].checked)
{
var rad_val = thisForm.ADDITIONALINFO5[i].value;
}
}
strADDTLINFO += "; " + rad_val;
}

This should show up in the AdditionalInfo area for you!

You can also pass any other form vars too...text/textarea just use .value, so:

if ( thisForm.ADDITIONALINFO4 != null ) {
strADDTLINFO += "; " + thisForm.ADDITIONALINFO4.value;
}

[jennyp]

To use this code should I put it between the script tags? In the nopcart.js additional info portion? I'm confused?????

[jennyp]

:?: Hey! thanks for the code. I am not sure what tags to use between the form tags for the radio buttons. Help!

[Stefko]

Add to this section of the nopcart.js

Note the code in RED, I an using buttons for ADDITIONALINFO2.



//---------------------------------------------------------------------||
// FUNCTION: AddToCart ||
// PARAMETERS: Form Object ||
// RETURNS: Cookie to user's browser, with prompt ||
// PURPOSE: Adds a product to the user's shopping cart ||
// EXTRAS ADDED IN: USERENTRY for customer text input ||
//---------------------------------------------------------------------||
function AddToCart(thisForm) {
var iNumberOrdered = 0;
var bAlreadyInCart = false;
var notice = "";
iNumberOrdered = GetCookie("NumberOrdered");

if ( iNumberOrdered == null )
iNumberOrdered = 0;

if ( thisForm.ID_NUM == null )
strID_NUM = "";
else
strID_NUM = thisForm.ID_NUM.value;

if ( thisForm.QUANTITY == null )
strQUANTITY = "1";
else
strQUANTITY = thisForm.QUANTITY.value;

if ( thisForm.PRICE == null )
strPRICE = "0.00";
else
strPRICE = thisForm.PRICE.value;

if ( thisForm.NAME == null )
strNAME = "";
else
strNAME = thisForm.NAME.value;

if ( thisForm.WEIGHT == null ) //Added for UPS mod ||
strSHIPPING = "0";
else
strSHIPPING = thisForm.WEIGHT.value;

if ( thisForm.ADDITIONALINFO == null ) {
strADDTLINFO = "";
} else {
strADDTLINFO = thisForm.ADDITIONALINFO[thisForm.ADDITIONALINFO.selectedIndex].value;
}
if ( thisForm.ADDITIONALINFO2 != null ) {
for (var i=0; i < thisForm.ADDITIONALINFO2.length; i++)
{
if (thisForm.ADDITIONALINFO2[i].checked)
{
var rad_val = thisForm.ADDITIONALINFO2[i].value;
}
}
strADDTLINFO += "; " + rad_val;
}
if ( thisForm.ADDITIONALINFO3 != null ) {
strADDTLINFO += "; " + thisForm.ADDITIONALINFO3[thisForm.ADDITIONALINFO3.selectedIndex].value;
}
if ( thisForm.ADDITIONALINFO4 != null ) {
strADDTLINFO += "; " + thisForm.ADDITIONALINFO4[thisForm.ADDITIONALINFO4.selectedIndex].value;
}
if ( thisForm.USERENTRY != null ) {
strADDTLINFO += "; " + thisForm.USERENTRY.value;
}
if ( thisForm.USERENTRY2 != null ) {
strADDTLINFO += "; " + thisForm.USERENTRY2.value;
}
if ( thisForm.USERENTRY3 != null ) {
strADDTLINFO += "; " + thisForm.USERENTRY3.value;
}

[jennyp]

Ok I copy and pasted the red portion of the code and pasted in the AddToCart portion of my nopcart.js file. I then created the code below on my form page. I keep getting an error. Will you Pleeaaasse take a look and tell me if I am doing something wrong. Thank you Thank you Thank you....

<form name="MonogramBibOrder">
<input type="hidden" name="PRICE" value="10.00">
<input type="hidden" name="NAME" value="monogramBib">
<input type="hidden" name="ID_NUM" value="MBIB">
<input type="hidden" name="SHIPPING" value="7.00">

<table width="100%" border="0" cellspacing="0" cellpadding="0" height="175">
<tr>
<td valign="top" height="104" width="881">
<div align="left" style="width: 915; height: 500">
<table width="102%" border="0" cellspacing="0" cellpadding="0" height="182">
<tr>
<td width="49%" height="182">
<table width="394" border="0" cellspacing="0" cellpadding="5" height="405">
<tr>
<td colspan="2" height="37" width="382">
<p>
<b><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#000000"><i>&</i></font><u>
<font face="Maiandra GD" size="3" color="#000000">choose a bib color </font></u></b></p>
<table width="367" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="365">
<table width="343" border="0" cellspacing="3" cellpadding="0" height="141">
<tr bgcolor="#FFFFFF">
<td width="36" height="137">
</td>
<td width="113" height="137">
<div align="center">
<p align="left"><font face="Maiandra GD" size="3"><b>
<input type="radio" checked name="ADDITIONALINFO5" value="red">red</b></font>
</div>
<div align="center">
<p align="left"><font face="Maiandra GD" size="3"><b>
<input type="radio" name="ADDITIONALINFO5" value="sltblue">slate blue</b></font>
</div>
<div align="center">
<p align="left"><font face="Maiandra GD" size="3"><b>
<input type="radio" name="ADDITIONALINFO5" value="Navy">navy</b></font>
</div>
<div align="center">
<p align="left"><font face="Maiandra GD" size="3"><b>
<input type="radio" name="ADDITIONALINFO5" value="pink">pink</b></font>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" height="34" width="382">
<div align="left">
<b><u><font face="Maiandra GD" size="3" color="#000000">personalize your bib
<br>
</font></u></b>
</div>
</td>
</tr>
<tr>
<td width="208" height="25">
<div align="right">
<b><font color="#000000" size="3" face="Maiandra GD">initials to personalize:</font></b>
</div>
</td>
<td width="162" height="25"><b><font face="Maiandra GD" size="3" color="#000000">
<input type="text" size="3" name="USERENTRY">
</font></b>
</td>
</tr>
</table>
</td>
<td width="53%" height="182" valign="top">
<div align="center">
<p align="center">
<img border="0" src="images/monogrambib.jpg" width="450" height="387">
</div>
</td>
</tr>
</table>
<b><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#000000">></font></b>
<br>
<p><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#000000"></font>
<u><font face="Maiandra GD" size="3" color="#000000">choose your monogram style</font></u></b>
</div>
<tr>
<td width="872">
<table width="862" border="0" cellspacing="3" cellpadding="3" height="270">
<tr bgcolor="#FFFFFF">
<td height="167" width="214"><input type="radio" name="ADDITIONALINFO4" value="diamondMonogramStyle" checked> <img src="images/diamondmonogram.JPG" align="absmiddle" width="181" height="188">
</td>
<td height="167" width="214"><input type="radio" name="ADDITIONALINFO4" value="scallopMonogramStyle"> <img border="0" src="images/flowermonogram.JPG" align="absmiddle" width="160" height="161">
</td>
<td height="167" width="215"><input type="radio" name="ADDITIONALINFO4" value="largeInitial">&&&
<img src="images/onelettermonogram.jpg" align="absmiddle" width="112" height="150">
</td>
<td height="167" width="215"><input type="radio" name="ADDITIONALINFO4" value="empireMonogramStyle">
<img border="0" src="images/scriptmonogram.jpg" align="absmiddle" width="163" height="139">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="519" height="27">
<div align="right">
<br>
<br>
<p align="left"><font face="Maiandra GD" size="3">
<b>to make arrangements to pay by check please call
972.691.1692</b></font>
</p>
<p align="left">& &<font face="Verdana, Arial, Helvetica, sans-serif" size="1" color="#000000">
<b>
<input type=button value='add to bag' onClick='AddToCart(this.form)' style="font-family: Maiandra GD; font-size: 12pt; font-weight: bold">
</form>

[Stefko]

Please also post your FUNCTION: AddToCart

[jennyp]

Ok, here is my AddToCart function. I am having trouble with my client's server, and cannot upload updated files. Therefore, I cannot post the url. When trying to test through Internet Explorer I do not get a specific error. I just get an error at the bottom of the page "ERROR ON PAGE". I feel stuck. Thanks for any help you can offer...jennyp

function AddToCart(thisForm) {
var iNumberOrdered = 0;
var bAlreadyInCart = false;
var notice = "";
iNumberOrdered = GetCookie("NumberOrdered");

if ( iNumberOrdered == null )
iNumberOrdered = 0;

if ( thisForm.ID_NUM == null )
strID_NUM = "";
else
strID_NUM = thisForm.ID_NUM.value;

if ( thisForm.QUANTITY == null )
strQUANTITY = "1";
else
strQUANTITY = thisForm.QUANTITY.value;

if ( thisForm.PRICE == null )
strPRICE = "0.00";
else
strPRICE = thisForm.PRICE.value;

if ( thisForm.NAME == null )
strNAME = "";
else
strNAME = thisForm.NAME.value;

if ( thisForm.SHIPPING == null )
strSHIPPING = "0.00";
else
strSHIPPING = thisForm.SHIPPING.value;

if ( thisForm.ADDITIONALINFO == null ) {
strADDTLINFO = "";
} else {
strADDTLINFO = thisForm.ADDITIONALINFO[thisForm.ADDITIONALINFO.selectedIndex].value;
}
if ( thisForm.ADDITIONALINFO2 != null ) {
strADDTLINFO += "; " + thisForm.ADDITIONALINFO2[thisForm.ADDITIONALINFO2.selectedIndex].value;
}
if ( thisForm.ADDITIONALINFO3 != null ) {
strADDTLINFO += "; " + thisForm.ADDITIONALINFO3[thisForm.ADDITIONALINFO3.selectedIndex].value;
}
if ( thisForm.ADDITIONALINFO4 != null ) {
for (var i=0; i < thisForm.ADDITIONALINFO4.length; i++)
{
if ( thisForm.ADDITIONALINFO4[I}.checked ) {
var rad_val = thisForm.ADDITIONALINFO4[i].value;
}
if ( thisForm.ADDITIONALINFO5 != null ) {
for (var i=0; i < thisForm.ADDITIONALINFO5.length; i++)
{
if (thisForm.ADDITIONALINFO5[i].checked)
{
var rad_val = thisForm.ADDITIONALINFO5[i].value;
}
}
strADDTLINFO += "; " + rad_val;
}

strADDTLINFO += "; " + rad_val;
} }
if ( thisForm.USERENTRY != null ) {
strADDTLINFO += "; " + thisForm.USERENTRY.value;
}
if ( thisForm.USERENTRY2 != null ) {
strADDTLINFO += "; " + thisForm.USERENTRY2.value;
}
if ( thisForm.USERENTRY3 != null ) {
strADDTLINFO += "; " + thisForm.USERENTRY3.value;
}

[Stefko]

Your code looks wrong, here is your code:

if ( thisForm.ADDITIONALINFO5 != null ) {
for (var i=0; i < thisForm.ADDITIONALINFO5.length; i++)
{
if (thisForm.ADDITIONALINFO5[i].checked)
{
var rad_val = thisForm.ADDITIONALINFO5[i].value;
}
}
strADDTLINFO += "; " + rad_val;
}

strADDTLINFO += "; " + rad_val;
} }

--------------------------------------------------------
remove that which is in red or use the code below:

Code: Select all

if ( thisForm.ADDITIONALINFO5 != null ) {
for (var i=0; i < thisForm.ADDITIONALINFO5.length; i++)
{
if (thisForm.ADDITIONALINFO5[i].checked)
{
var rad_val = thisForm.ADDITIONALINFO5[i].value;
}
}
strADDTLINFO += "; " + rad_val;
}

[cyberious]

Hi there,

Is there a way to implement this code to allow for shipping choices (Flat Rates) on the managecart page?

Fed Ex as $50.00, UPS as $15.00, and Customer's Shipping (Other - to be shipped using customer account so no charge there)

AND....to top it all off, I only need 2 of the 3 order forms to use a shipping method, as the 3rd form doesn't need a shipping charge at all.

ANYONE KNOW HOW TO DO THIS? I am supposed to be finishing this client's site this weekend, and I'm struggling with the shipping lines.

Thanks!

[emma57573]

Tahnks for that its been a big help since most of my form fields are radio buttons

Emma

[mp3markel]

On the Additionalinfo when I have two or more text fields it places them on the same line in the checkout. Can I have two text fields and have the one display underneath the other in the checkout? Thanks for any help!

[Liz]

Oh, I sincerely hope someone answers Cyberious' question. I'm in the same boat Need to add shipping options onto the managecart page so they show up in the check-out. Not by weight, not by number of items, just a customer's choice for shipping so it goes to the shopping cart. The site I'm working on has several choices for shipping, and at the moment, I can't find a way to incorporate them. It's here http://www.vetslides.com

If anyone has a solution, I'd sure appreciate it!!! I don't pretend to understand javascript, I'm an old lady, a great-grannie four times over, so please keep it simple if that's possible

BBL, Liz

[trevsbean]

Hi there, I'm new to webdesigning and I need some help. I am trying to sell some products, but before the customer can add an object to their cart, they need to decide what colour poles(2) they want and what colour wood(4) they want. I have been trying to do this using radio buttons. But I cant get the "add to cart button" to validate the form and include the customers choice in the cart. I think that I must use the additional info, but I'm not sure. If there is anyone who can help me I would greatly appreciate it. Thanks

[Randy]

[select] products, ... what colour poles(2) they want and what colour wood(4) they want.

The easiest method is to use the ADDITIONALINFO drop-down lists.
You can verify a choice has been made for both options before allowing the item to be added to the cart.

I think the PRODUCTSELECTOR route makes the product list too long with 8 lines for each type of product.

Search for "Various Prices" and take a look at the code for verifing a selection.

Randy

[SimonA]

This thread really helped me out, however, I'm still having a few difficulties because the price variation I have on the selections for ADDITIONALINFO just won't increase the value in the cart with the change to radio buttons.

Here's the code for the dropdown version (that works OK):

if ( thisForm.ADDITIONALINFO3 != null ) {
var xx = thisForm.ADDITIONALINFO3[thisForm.ADDITIONALINFO3.selectedIndex].value.split("^");
strADDTLINFO += "; " + xx[0];
strPRICE = parseFloat(strPRICE) + parseFloat( xx[1] );
}

I've redone ADDITIONALINFO1 and 2 so that they are radio buttons, initially to get it working basically like this:

if ( thisForm.ADDITIONALINFO2 != null ) {
for (var i=0; i < thisForm.ADDITIONALINFO2.length; i++)
{
if (thisForm.ADDITIONALINFO2[i].checked)
{
if ( thisForm.ADDITIONALINFO2 != null ) {
for (var i=0; i < thisForm.ADDITIONALINFO2.length; i++)
{
if (thisForm.ADDITIONALINFO2[i].checked)
{
var rad_val = thisForm.ADDITIONALINFO2[i].value.split("^");
}
}
strADDTLINFO += "; " + rad_val;
}
}
}
strADDTLINFO += "; " + rad_val;
}

This got the items adding to cart - note the beginning of addition of the price variation in this line (marked in red):

var rad_val = thisForm.ADDITIONALINFO2[i].value.split("^");

I then added the script to finish off the price uplift function, or so I thought:

if ( thisForm.ADDITIONALINFO2 != null ) {
for (var i=0; i < thisForm.ADDITIONALINFO2.length; i++)
{
if (thisForm.ADDITIONALINFO2[i].checked)
{
var rad_val = thisForm.ADDITIONALINFO2[i].value.split("^");
strADDTLINFO += "; " + xx[0];
strPRICE = parseFloat(strPRICE) + parseFloat( xx[1] );
}
}
strADDTLINFO += "; " + rad_val;
}

The product adds to cart with no problem but the price doesn't vary as expected. Its bound to be my very poor JavaScripting at fault but I can't see what the error is, and therefore no solution

Any help would be very greatly appreciated.

Here's the code from the html page that corresponds:

Select height:<br />
<input type="radio" name="ADDITIONALINFO" value="5' - &pound;255^0"/><label>5' - &pound;255</label><br />
<input type="radio" name="ADDITIONALINFO" value="6' - &pound;275^50"/><label>6' - &pound;275</label><br />
<input type="radio" name="ADDITIONALINFO" value="8' - &pound;365^110"/><label>8' - &pound;365</label><br />
<input type="radio" name="ADDITIONALINFO" value="10' - &pound;475^220"/><label>10' - &pound;475</label><br />
<input type="radio" name="ADDITIONALINFO" value="12' - &pound;755^500"/><label>12' - &pound;755</label><br />
<input type="radio" name="ADDITIONALINFO" value="15' - &pound;1195^940"/><label>15' - &pound;1195</label><br />
<input type="radio" name="ADDITIONALINFO" value="18' - &pound;1195^940"/><label>18' - &pound;1195</label><br />
<input type="radio" name="ADDITIONALINFO" value="20' - &pound;1395^1140"/><label>20' - &pound;1395</label><br />
<input type="radio" name="ADDITIONALINFO" value="25' - &pound;1595^1340"/><label>25' - &pound;1595</label><br />

Select colour scheme:<br />
<input type="radio" name="ADDITIONALINFO2" value="blue and silver^0" /><label>blue and silver</label><br />
<input type="radio" name="ADDITIONALINFO2" value="silver and white^0" /><label>silver and white</label><br />
<input type="radio" name="ADDITIONALINFO2" value="red and gold^0" /><label>red and gold</label><br />
<input type="radio" name="ADDITIONALINFO2" value="gold^0" /><label>gold</label><br />
<input type="radio" name="ADDITIONALINFO2" value="silver^0" /><label>silver</label><br />
<input type="radio" name="ADDITIONALINFO2" value="multi^0" /><label>multi</label><br />

<input name="button" type="button" onclick="AddToCart(this.form);" value=" Add to Cart " />
</form>

Thanks in advance

Simon A