PDA

View Full Version : How to select 2 commands at once in HTML?



mzee
23-07-2008, 08:32 PM
I am using PayPal on a web site. Problem is that if I wish to select 2 freight rates, I have to select twice to do it. How can I select once:-

<TR>
<td><font face="Arial" size="2"><b>Auckland:</b></font></TD>
<td>
<input type="checkbox" name="shipping" value="10.00"></TD>
<td><input type="checkbox" name="shipping2" value="5.00"></TD>
</TR>

How can I combine the two Inputs to be controlled by one action (tick, radio, button, select-option)? I have tried all sorts but when you put them together only the first one works.:help:

mzee
23-07-2008, 08:38 PM
Maybe I should explain why both are required at the same time.

"shipping" is the rate which is charged for the first item. "shipping2" is a reduced rate charged on subsequent purchases of the same item.

The selection is required to cover different areas within New Zealand.

bevy121
23-07-2008, 10:03 PM
Not sure what you want to do there mzee?

The 'value' of "5.00" and "10.00" you have set are not integer values (numbers) they are the text representaion, so you can't "add" them together (if that's what you were wanting to do)

I could be wrong, but I think that is the case

mzee
24-07-2008, 04:17 PM
You are right- they are text values:-

<TR>
<td><font face="Arial" size="2"><b>Auckland:</b></font></TD>
<td>
<input type="checkbox" name="shipping" value="10.00"></TD>
<td><input type="checkbox" name="shipping2" value="5.00"></TD>
</TR>

By adding I mean to have the name="shipping" value="10.00" and the name="shipping2" value="5.00" in one input instead of two.

Something like:<input type="checkbox" name="shipping" value="10.00" name="shipping2" value="5.00">. This does not work, only gets the first name="shipping"

If I could somehow link both checkbox's so one tick would suffice?

bevy121
24-07-2008, 04:50 PM
Multiple choice - use checkbox type input



<form name="myform" action="http://www.mydomain.com/myformhandler.cgi" method="POST">
<div align="center"><br>
<input type="checkbox" name="shipping" value="10.00" checked>First item shipping<br>
<input type="checkbox" name="shipping2" value="5.00"> Subsequent items shipping<br>

<br>
</div>
</form>


Exclusive single choice only - use radio buttons input



<form name="myform" action="http://www.mydomain.com/myformhandler.cgi" method="POST">
<div align="center"><br>
<input type="radio" name="shipping" value="10.00"> First item shipping<br>
<input type="radio" name="shipping" value="5.00" checked> Subsequent items shipping<br>
</div>


With this type the input name (shipping) remains constant for all options no matter how many. (because there can only be one value returned)
When read, the "shipping" value will reflect the users choice - either 10.00 or 5.00

Does that make sense to you?

mzee
24-07-2008, 05:11 PM
The double checkbox works fine, because there has to be 2 values with 2 names, name="shipping" & name="shipping2". What I need is a way of activating both statements with one physical action instead of two.

Picture a dual pole switch ie. 2 circuits with one lever :nerd:

dyewitness
24-07-2008, 05:39 PM
Still a bit confusing what you are asking for, but anyway this bit of javascript will check both checkbox if you click the first one.

What is processing the form once it's submitted, is this in your control, or does it just get submitted through to paypal?



<html>
<head>
<script language="javascript">
function CheckBothCheckboxes() {
if (document.form1.checkbox1.checked) {
document.form1.checkbox2.checked = true;
}
}
</script>
</head>
<body>
<form name="form1" action="#" method="post">
<input type="checkbox" name="checkbox1" value="10" onClick="CheckBothCheckboxes()">checkbox1: 10
<br>
<input type="checkbox" name="checkbox2" value="5">checkbox2: 5
<br>
<input type="submit">
</form>
</body>
</html>

mzee
24-07-2008, 06:59 PM
I will try it.
The form gets submitted to PayPal and works well, its just that customers are less likely to forget to tick one than both. If the second one is not ticked they only get charged freight on one item. Maybe I can put <input type="hidden" name="shipping2" value="10.00"> in before the selection, it would then be true if the second box was not ticked, better than nothing!

Will try the script.

mzee
24-07-2008, 07:54 PM
Tried the script. Error "document.form1.shipping.is null or not an object"

I am trying to place this in an existing form, so don't know what to do with the:

<form name="form1" action="#" method="post">
<input type="submit">

Will keep trying :crying

dyewitness
24-07-2008, 08:37 PM
Can you post the exact HTML of your form?

(the previous post was just an example, it will need to be tweaked to match your checkbox names etc).

mzee
24-07-2008, 10:19 PM
This works if I tick both box's, but comes up with an error & will not self-tick the 2nd box.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

<HTML>
<HEAD>
<TITLE>Untitled</TITLE>
<script language="javascript">
function CheckBothCheckboxes() {
if (document.freight.shipping.checked) {
document.freight.shipping2.checked = true;
}
}
</script>

</HEAD>

<BODY>
<TABLE style="font-family: Arial; font-size: 10pt; font-weight: bold" width="242"><TR><TD colspan=2 ALIGN="LEFT" width="234"><font color="#0000FF"><b><font size="2">&nbsp;NZ$ 550.00 + Freight.</font></b></font><BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<IMG SRC="visa.gif" WIDTH=77 HEIGHT=31 BORDER=0 ALT="Visa and Master Card">
<br>
Please tick 2 boxes in the same row.<br>
For your shipping Area.
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post"></TD></TR><tr><td VALIGN="TOP" width="134">

<TABLE>
<TR>
<TD><name="freight">
<input type="checkbox" name="shipping" value="10.00" onClick="CheckBothCheckboxes()">
</TD>
<TD><input type="checkbox" name="shipping2" value="5.00"><FONT SIZE="-1"><B>Auckland</B></FONT></TD>
</TR>
<TR>
<TD><!--Ditto Waikato--></TD>
<TD></TD>
</TR>
<TR>
<TD><!--Ditto Wellington--></TD>
<TD></TD>
</TR>
<TR>
<TD><!--Ditto Christchurch--></TD>
<TD></TD>
</TR>
</TABLE>

<TABLE CELLSPACING=0 CELLPADDING=1 BORDER=0>
<TR>
<TD><font face="Arial" size="2"><B>Quantity</B></font></TD>
<TD><input type="text" size="1" maxlength="4" name="quantity" value="1"></TD>
</TR>
</TABLE>
</td></tr><TD width=134 VALIGN="TOP" ALIGN="RIGHT"><input type="image" src= "submit.jpg""https://www.paypal.com//en_US/" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
<input type="hidden" name="add" value="1">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="business" value="sales@xxxxxxxxxx.co.nz">
<input type="hidden" name="item_name" value="Enviromower">
<input type="hidden" name="item_number" value="En24v">
<input type="hidden" name="amount" value="550.00">
<input type="hidden" name="page_style" value="PayPal">
<input type="hidden" name="no_shipping" value="2">
<input type="hidden" name="return" value="http://www.xxxxxxx.co.nz">
<input type="hidden" name="currency_code" value="NZD">
<input type="hidden" name="lc" value="NZ">
<input type="hidden" name="bn" value="PP-ShopCartBF">
</form>
</TD><TD VALIGN="TOP" ALIGN="LEFT" width="94"><form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="business" value="sales@xxxxxxx.co.nz">
<input type="image" src="cart.jpg""https://www.paypal.com/en_US/ border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
<input type="hidden" name="display" value="1">
<input type="hidden" name="page_style" value="PayPal">
</form></TD></TABLE>


</BODY>
</HTML>

dyewitness
25-07-2008, 01:05 PM
Your HTML has errors and is not well formed.

What I have done is just cleaned it up slightly, eg. removed the duplicate form tag, and some other invalid markup



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

<HTML>
<HEAD>
<TITLE>Untitled</TITLE>
<script language="javascript">
function CheckBothCheckboxes() {
if (document.freightform.shipping.checked) {
document.freightform.shipping2.checked = true;
}
}
</script>

</HEAD>
<BODY>
<form name="freightform" target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<TABLE style="font-family: Arial; font-size: 10pt; font-weight: bold" width="242">
<TR>
<TD colspan=2 ALIGN="LEFT" width="234">
<font color="#0000FF"><b><font size="2">&nbsp;NZ$ 550.00 + Freight.</font></b></font>
<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp ;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<IMG SRC="visa.gif" WIDTH=77 HEIGHT=31 BORDER=0 ALT="Visa and Master Card">
<br>
Please tick 2 boxes in the same row.<br>
For your shipping Area.

</TD>
</TR>
<tr>
<td VALIGN="TOP" width="134">
<TABLE>
<TR>
<TD>
<input type="checkbox" name="shipping" value="10.00" onClick="CheckBothCheckboxes()">
</TD>
<TD><input type="checkbox" name="shipping2" value="5.00"><FONT SIZE="-1"><B>Auckland</B></FONT></TD>
</TR>
<TR>
<TD><!--Ditto Waikato--></TD>
<TD></TD>
</TR>
<TR>
<TD><!--Ditto Wellington--></TD>
<TD></TD>
</TR>
<TR>
<TD><!--Ditto Christchurch--></TD>
<TD></TD>
</TR>
</TABLE>
<TABLE CELLSPACING=0 CELLPADDING=1 BORDER=0>
<TR>
<TD><font face="Arial" size="2"><B>Quantity</B></font></TD>
<TD><input type="text" size="1" maxlength="4" name="quantity" value="1"></TD>
</TR>
</TABLE>
</td>
</tr>
<tr>
<TD width=134 VALIGN="TOP" ALIGN="RIGHT">
<input type="image" src= "submit.jpg""https://www.paypal.com//en_US/" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
<input type="hidden" name="add" value="1">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="business" value="sales@xxxxxxxxxx.co.nz">
<input type="hidden" name="item_name" value="Enviromower">
<input type="hidden" name="item_number" value="En24v">
<input type="hidden" name="amount" value="550.00">
<input type="hidden" name="page_style" value="PayPal">
<input type="hidden" name="no_shipping" value="2">
<input type="hidden" name="return" value="http://www.xxxxxxx.co.nz">
<input type="hidden" name="currency_code" value="NZD">
<input type="hidden" name="lc" value="NZ">
<input type="hidden" name="bn" value="PP-ShopCartBF">
</TD>
</tr>
</TABLE>
</form>
</BODY>
</HTML>

bevy121
25-07-2008, 05:03 PM
Nicely cleaned up there DW :)

mzee - you know the user could still un-check one of the boxes after they both are checked eh

and you could just as easy make it so both become checked no matter which one is clicked by the user ;)



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

<HTML>
<HEAD>
<TITLE>Untitled</TITLE>
<script language="javascript">
function CheckBothCheckboxes() {
if (document.freightform.shipping.checked) {
document.freightform.shipping2.checked = true;
}
}
</script>

<script language="javascript">
function CheckBothCheckboxes2() {
if (document.freightform.shipping2.checked) {
document.freightform.shipping.checked = true;
}
}
</script>


</HEAD>
<BODY>
<form name="freightform" target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<TABLE style="font-family: Arial; font-size: 10pt; font-weight: bold" width="242">
<TR>
<TD colspan=2 ALIGN="LEFT" width="234">
<font color="#0000FF"><b><font size="2">&nbsp;NZ$ 550.00 + Freight.</font></b></font>
<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp ;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<IMG SRC="visa.gif" WIDTH=77 HEIGHT=31 BORDER=0 ALT="Visa and Master Card">
<br>
Please tick 2 boxes in the same row.<br>
For your shipping Area.

</TD>
</TR>
<tr>
<td VALIGN="TOP" width="134">
<TABLE>
<TR>
<TD>
<input type="checkbox" name="shipping" value="10.00" onClick="CheckBothCheckboxes()">
</TD>
<TD><input type="checkbox" name="shipping2" onClick="CheckBothCheckboxes2()" value="5.00"><FONT SIZE="-1"><B>Auckland</B></FONT></TD>
</TR>
<TR>
<TD><!--Ditto Waikato--></TD>
<TD></TD>
</TR>
<TR>
<TD><!--Ditto Wellington--></TD>
<TD></TD>
</TR>
<TR>
<TD><!--Ditto Christchurch--></TD>
<TD></TD>
</TR>
</TABLE>
<TABLE CELLSPACING=0 CELLPADDING=1 BORDER=0>
<TR>
<TD><font face="Arial" size="2"><B>Quantity</B></font></TD>
<TD><input type="text" size="1" maxlength="4" name="quantity" value="1"></TD>
</TR>
</TABLE>
</td>
</tr>
<tr>
<TD width=134 VALIGN="TOP" ALIGN="RIGHT">
<input type="image" src= "submit.jpg""https://www.paypal.com//en_US/" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
<input type="hidden" name="add" value="1">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="business" value="sales@xxxxxxxxxx.co.nz">
<input type="hidden" name="item_name" value="Enviromower">
<input type="hidden" name="item_number" value="En24v">
<input type="hidden" name="amount" value="550.00">
<input type="hidden" name="page_style" value="PayPal">
<input type="hidden" name="no_shipping" value="2">
<input type="hidden" name="return" value="http://www.xxxxxxx.co.nz">
<input type="hidden" name="currency_code" value="NZD">
<input type="hidden" name="lc" value="NZ">
<input type="hidden" name="bn" value="PP-ShopCartBF">
</TD>
</tr>
</TABLE>
</form>
</BODY>
</HTML>

mzee
25-07-2008, 05:59 PM
You guys are brilliant! Works a treat, select either box & they both tick.

If I could make the second box invisible it would be less confusing maybe? Is this possible?

Thanks again.

mzee
25-07-2008, 06:35 PM
Ooops! I spoke too soon!

It only works with one pair of checkbox's.
As soon as you enter another pair, it stops working, only ticks one box. Problem is all box;s have the same names, "shipping" or "shipping2" so it gets confused.
Any way of placing an entry in the field to use as ID so that it does not use the name= ?

bevy121
25-07-2008, 10:18 PM
Right then - this is the reply from your earlier post about having the second checkbox hidden

This code will now do that, and will also set the shipping2 value to "5" if the user checks the visible "10.00" checkbox, and reset the shipping2 back to "0" if it is unchecked again



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

<HTML>
<HEAD>
<TITLE>Untitled</TITLE>

<script language="javascript">
function CheckBothCheckboxes() {
if (document.freightform.shipping.checked == true) {
document.freightform.shipping2.value = "5.00";
}
if (document.freightform.shipping.checked == false) {
document.freightform.shipping2.value = "0";
}
}
</script>


</HEAD>
<BODY>
<form name="freightform" target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<TABLE style="font-family: Arial; font-size: 10pt; font-weight: bold" width="242">
<TR>
<TD colspan=2 ALIGN="LEFT" width="234">
<font color="#0000FF"><b><font size="2">&nbsp;NZ$ 550.00 + Freight.</font></b></font>
<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp ;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<IMG SRC="visa.gif" WIDTH=77 HEIGHT=31 BORDER=0 ALT="Visa and Master Card">
<br>
Please tick 2 boxes in the same row.<br>
For your shipping Area.

</TD>
</TR>
<tr>
<td VALIGN="TOP" width="134">
<TABLE>
<TR>
<TD>
<input type="checkbox" name="shipping" value="10.00" onClick="CheckBothCheckboxes()"><FONT SIZE="-1"><B>Auckland</B></FONT>
</TD>
<TD>
<input type="hidden" name="shipping2" value="0">
</TD>
</TR>
<TR>
<TD><!--Ditto Waikato--></TD>
<TD></TD>
</TR>
<TR>
<TD><!--Ditto Wellington--></TD>
<TD></TD>
</TR>
<TR>
<TD><!--Ditto Christchurch--></TD>
<TD></TD>
</TR>
</TABLE>
<TABLE CELLSPACING=0 CELLPADDING=1 BORDER=0>
<TR>
<TD><font face="Arial" size="2"><B>Quantity</B></font></TD>
<TD><input type="text" size="1" maxlength="4" name="quantity" value="1"></TD>
</TR>
</TABLE>
</td>
</tr>
<tr>
<TD width=134 VALIGN="TOP" ALIGN="RIGHT">
<input type="image" src= "submit.jpg""https://www.paypal.com//en_US/" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
<input type="hidden" name="add" value="1">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="business" value="sales@xxxxxxxxxx.co.nz">
<input type="hidden" name="item_name" value="Enviromower">
<input type="hidden" name="item_number" value="En24v">
<input type="hidden" name="amount" value="550.00">
<input type="hidden" name="page_style" value="PayPal">
<input type="hidden" name="no_shipping" value="2">
<input type="hidden" name="return" value="http://www.xxxxxxx.co.nz">
<input type="hidden" name="currency_code" value="NZD">
<input type="hidden" name="lc" value="NZ">
<input type="hidden" name="bn" value="PP-ShopCartBF">
</TD>
</tr>
</TABLE>
</form>
</BODY>
</HTML>



Let me think about the other checkbox sets you have.
You do of course need to name them all different - their own unique name.
And each Form name is unique as well, as thats how you "call" them with javascript.

How many sets of checkboxes is there?

sal
25-07-2008, 10:33 PM
I have to say I believe you should be using radio buttons but I don't really get what is going on here so I could be wrong.

bevy121
25-07-2008, 10:50 PM
yea - it is getting a bit confusing now LOL

I did suggest radio buttons earlier and now think that is probably the way it should be...


mzee - can you tell me what you want to end up with exactly?

Do you want the value of "shipping2" to be 5.00 if any of the locations are selected at all, or is this number to be variable too, depending on the location selected?

mzee
26-07-2008, 02:32 PM
There are 4 pairs of check box's, each pair represents a different freight rate area. The first box sets name="shipping" value="10.00" (amount varies depending on weight, location etc)
The second box sets name="shipping2" value="5.00" (lower freight rate on multiple orders. This varies as well)

The form works OK as it is with manual ticking of the box's, but if a customer forgets to tick the second box he will only be charged freight for the first item.

The idea is to 'lock' each pair together so that when one is ticked, they both tick. This, thanks to you all, has now been achieved. Only problem is as soon as there is more than one pair of box's it stops working! I think the problem is because the same 'names' are used for each pair. Is there a way of identifying the check box apart from the 'name'?
We could then have multiple scripts for each pair of box's
Radio buttons would not do as only one selection could be made, & the same problem would apply.

mzee
26-07-2008, 02:39 PM
This is the part of the form which works as it is.

<TABLE style="font-family: Arial; font-size: 10pt; font-weight: bold" width="242"><TR><TD colspan=2 ALIGN="LEFT" width="234"><font color="#0000FF"><b><font size="2">&nbsp;NZ$ 550.00 + Freight.</font></b></font><BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<IMG SRC="visa.gif" WIDTH=77 HEIGHT=31 BORDER=0 ALT="Visa and Master Card">
<br>
Please tick 2 boxes in the same row.<br>
For your shipping Area.
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post"></TD></TR><tr><td VALIGN="TOP" width="134"><TABLE BORDER=0 CELLSPACING=0 CELLPADDING=1>
<TR>
<td><font face="Arial" size="2"><b>Auckland:</b></font></TD>
<td>
<input type="checkbox" name="shipping" value="5.00"></TD>
<td><input type="checkbox" name="shipping2" value="5.00"></TD>
</TR>
<TR>
<td><font face="Arial" size="2"><b>Waikato:</b></font></TD>
<td><input type="checkbox" name="shipping" value="10.00"></TD>
<td><input type="checkbox" name="shipping2" value="8.00"></TD>
</TR>
<TR>
<td><font face="Arial" size="2"><b>Wellington:&nbsp;</b></font></TD>
<td><input type="checkbox" name="shipping" value="15.00"></TD>
<td><input type="checkbox" name="shipping2" value="10.00"></TD>
</TR>
<TR>
<td><font face="Arial" size="2"><b>Christchurch:</b></font></TD>
<td><input type="checkbox" name="shipping" value="20.00"></TD>
<td><input type="checkbox" name="shipping2" value="15.00"></TD>
</TR>
</TABLE><TABLE CELLSPACING=0 CELLPADDING=1 BORDER=0>
<TR>
<TD><font face="Arial" size="2"><B>Select Quantity</B></font></TD>
<TD><input type="hidden" name="quantity" value=""><select name="quantity">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option></select></TD>
</TR>
</TABLE>

mzee
27-07-2008, 01:57 PM
I have just tried Radio buttons which are better as they restrict selection to 1 pair at a time. Could not get them to self tick, probably because I don't know the Radio button equivalent to onClick="CheckBothCheckboxes()"

The same problem will apply with the names being the same.

bevy121
27-07-2008, 02:55 PM
Got something here half done - will finish it this evening and post for you

Have got to go out for the afternoon just now...

(and yes, it is radio buttons you want, not checkbox's - you don't want the user to be able to select Auckland AND Christchurch etc)

bevy121
27-07-2008, 11:50 PM
OK - I've tried a couple methods, but this seems be the one I think

The info popup I added mainly for testing the values as I was coding lol
If if you want it I'll post you the page code with it out.

I tested it thru paypal as well - all the locations and numbers of items I tried were correctly charged the freight

Works fine on IE and Firefox - didnt test it on any other browsers
Hope this is what you wanted

:D




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

<HTML>
<HEAD>
<TITLE>Untitled</TITLE>

<SCRIPT LANGUAGE="JavaScript">
<!--
function setFreightCosts(frm){
var location = ""
var ship = ""
var ship2 = ""
//Find the checked radio button and set shipping values according to the location then break and show freight info

for (var i = 0; i < frm.Whereabout.length; i++){
if (frm.Whereabout[i].checked){
location = frm.Whereabout[i].value;

if (location == "Auckland"){
document.freightform.shipping.value = "5.00";
document.freightform.shipping2.value = "5.00";
}
if (location == "Waikato"){
document.freightform.shipping.value = "10.00";
document.freightform.shipping2.value = "8.00";
}
if (location == "Wellington"){
document.freightform.shipping.value = "15.00";
document.freightform.shipping2.value = "10.00";
}
if (location == "Christchurch"){
document.freightform.shipping.value = "20.00";
document.freightform.shipping2.value = "15.00";
}
break
}
}
var ship = document.freightform.shipping.value;
var ship2 = document.freightform.shipping2.value;
alert( " " + location + "\n\n" + " First item freight charge = $ " + ship + "\n\n" + " Subsequent items freight = $ " + ship2 + " each. ");
}

//-->
</SCRIPT>


</HEAD>
<BODY>
<form name="freightform" target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<TABLE style="font-family: Arial; font-size: 10pt; font-weight: bold" width="242">
<TR>
<TD colspan=2 ALIGN="LEFT" width="234">
<font color="#0000FF"><b><font size="2">&nbsp;NZ$ 550.00 + Freight.</font></b></font>
<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp ;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<IMG SRC="visa.gif" WIDTH=77 HEIGHT=31 BORDER=0 ALT="Visa and Master Card">
<br>
Please select your location.
</TD>
</TR>
<TR>
<TD VALIGN="TOP" width="134">

<TABLE>
<input type="hidden" name="shipping" value="0">
<input type="hidden" name="shipping2" value="0">
<TD><INPUT TYPE="radio" NAME="Whereabout" VALUE="Auckland" onClick="setFreightCosts(this.form)"CHECKED><B><FONT SIZE="-1">Auckland</FONT></B></TD>
</TR>
<TR>
<TD><INPUT TYPE="radio" NAME="Whereabout" VALUE="Waikato" onClick="setFreightCosts(this.form)"><B><FONT SIZE="-1">Waikato</FONT></B></TD>
</TR>
<TR>
<TD><INPUT TYPE="radio" NAME="Whereabout" VALUE="Wellington" onClick="setFreightCosts(this.form)"><B><FONT SIZE="-1">Wellington</FONT></B></TD>
</TR>
<TR>
<TD><INPUT TYPE="radio" NAME="Whereabout" VALUE="Christchurch" onClick="setFreightCosts(this.form)"><B><FONT SIZE="-1">Christchurch</FONT></B></TD>
</TR>
</TABLE>

<TABLE CELLSPACING=0 CELLPADDING=1 BORDER=0>
<TR>
<TD><font face="Arial" size="2"><B>Quantity</B></font></TD>
<TD><input type="text" size="1" maxlength="4" name="quantity" value="1"></TD>
</TR>
</TABLE>
</TD>
</TR>
<TR>
<TD width=134 VALIGN="TOP" ALIGN="RIGHT">
<input type="image" src= "submit.jpg""https://www.paypal.com//en_US/" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
<input type="hidden" name="add" value="1">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="business" value="sales@xxxxxxxxxx.co.nz">
<input type="hidden" name="item_name" value="Enviromower">
<input type="hidden" name="item_number" value="En24v">
<input type="hidden" name="amount" value="550.00">
<input type="hidden" name="page_style" value="PayPal">
<input type="hidden" name="no_shipping" value="2">
<input type="hidden" name="return" value="http://www.xxxxxxx.co.nz">
<input type="hidden" name="currency_code" value="NZD">
<input type="hidden" name="lc" value="NZ">
<input type="hidden" name="bn" value="PP-ShopCartBF">
</TD>
</TR>
</TABLE>
</form>
</BODY>
</HTML>

mzee
28-07-2008, 01:10 PM
Hi Bevvy11. Thanks for your help, works well except that if I have a much heavier or larger item on the same page I would require an alternative script. I have tried this and changed the form names, but it always reads the second script. If its not possible to separate them, maybe I should put the order form, script on a new page with a link to it?

~~~~~~~~~~~
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

<HTML>
<HEAD>
<TITLE>Untitled</TITLE>

<SCRIPT LANGUAGE="JavaScript">
<!--
function setFreightCosts(frm){
var location = ""
var ship = ""
var ship2 = ""
//Find the checked radio button and set shipping values according to the location then break and show freight info

for (var i = 0; i < frm.Whereabout.length; i++){
if (frm.Whereabout[i].checked){
location = frm.Whereabout[i].value;

if (location == "Auckland"){
document.freightform.shipping.value = "5.00";
document.freightform.shipping2.value = "5.00";
}
if (location == "Waikato"){
document.freightform.shipping.value = "10.00";
document.freightform.shipping2.value = "8.00";
}
if (location == "Wellington"){
document.freightform.shipping.value = "15.00";
document.freightform.shipping2.value = "10.00";
}
if (location == "Christchurch"){
document.freightform.shipping.value = "20.00";
document.freightform.shipping2.value = "15.00";
}
break
}
}
var ship = document.freightform.shipping.value;
var ship2 = document.freightform.shipping2.value;
alert( " " + location + "\n\n" + " First item freight charge = $ " + ship + "\n\n" + " Subsequent items freight = $ " + ship2 + " each. ");
}

//-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!--
function setFreightCosts(frm){
var location = ""
var ship = ""
var ship2 = ""
//Find the checked radio button and set shipping values according to the location then break and show freight info

for (var i = 0; i < frm.Whereabout.length; i++){
if (frm.Whereabout[i].checked){
location = frm.Whereabout[i].value;

if (location == "Auckland"){
document.freightform2.shipping.value = "10.00";
document.freightform2.shipping2.value = "5.00";
}
if (location == "Waikato"){
document.freightform2.shipping.value = "15.00";
document.freightform2.shipping2.value = "10.00";
}
if (location == "Wellington"){
document.freightform2.shipping.value = "20.00";
document.freightform2.shipping2.value = "15.00";
}
if (location == "Christchurch"){
document.freightform2.shipping.value = "25.00";
document.freightform2.shipping2.value = "20.00";
}
break
}
}
var ship = document.freightform2.shipping.value;
var ship2 = document.freightform2.shipping2.value;
alert( " " + location + "\n\n" + " First item freight charge = $ " + ship + "\n\n" + " Subsequent items freight = $ " + ship2 + " each. ");
}

//-->
</SCRIPT>

</HEAD>
<BODY><!--form for 1st item-->
<form name="freightform" target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<TABLE style="font-family: Arial; font-size: 10pt; font-weight: bold" width="242">
<TR>
<TD colspan=2 ALIGN="LEFT" width="234">
<font color="#0000FF"><b><font size="2">&nbsp;NZ$ 550.00 + Freight.</font></b></font>
<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp ;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<IMG SRC="visa.gif" WIDTH=77 HEIGHT=31 BORDER=0 ALT="Visa and Master Card">
<br>
Please select your location.
</TD>
</TR>
<TR>
<TD VALIGN="TOP" width="134">

<TABLE>
<input type="hidden" name="shipping" value="0">
<input type="hidden" name="shipping2" value="0">
<TD><INPUT TYPE="radio" NAME="Whereabout" VALUE="Auckland" onClick="setFreightCosts(this.form)"CHECKED><B><FONT SIZE="-1">Auckland</FONT></B></TD>
</TR>
<TR>
<TD><INPUT TYPE="radio" NAME="Whereabout" VALUE="Waikato" onClick="setFreightCosts(this.form)"><B><FONT SIZE="-1">Waikato</FONT></B></TD>
</TR>
<TR>
<TD><INPUT TYPE="radio" NAME="Whereabout" VALUE="Wellington" onClick="setFreightCosts(this.form)"><B><FONT SIZE="-1">Wellington</FONT></B></TD>
</TR>
<TR>
<TD><INPUT TYPE="radio" NAME="Whereabout" VALUE="Christchurch" onClick="setFreightCosts(this.form)"><B><FONT SIZE="-1">Christchurch</FONT></B></TD>
</TR>
</TABLE>

<TABLE CELLSPACING=0 CELLPADDING=1 BORDER=0>
<TR>
<TD><font face="Arial" size="2"><B>Quantity</B></font></TD>
<TD><input type="text" size="1" maxlength="4" name="quantity" value="1"></TD>
</TR>
</TABLE>
</TD>
</TR>
<TR>
<TD width=134 VALIGN="TOP" ALIGN="RIGHT">
<input type="image" src= "submit.jpg""https://www.paypal.com//en_US/" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
<input type="hidden" name="add" value="1">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="business" value="sales@xxxxxxxxxx.co.nz">
<input type="hidden" name="item_name" value="Enviromower">
<input type="hidden" name="item_number" value="En24v">
<input type="hidden" name="amount" value="550.00">
<input type="hidden" name="page_style" value="PayPal">
<input type="hidden" name="no_shipping" value="2">
<input type="hidden" name="return" value="http://www.xxxxxxx.co.nz">
<input type="hidden" name="currency_code" value="NZD">
<input type="hidden" name="lc" value="NZ">
<input type="hidden" name="bn" value="PP-ShopCartBF">
</TD>
</TR>
</TABLE>
</form>
<form name="freightform2" target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<TABLE style="font-family: Arial; font-size: 10pt; font-weight: bold" width="242">
<TR>
<TD colspan=2 ALIGN="LEFT" width="234">
<font color="#0000FF"><b><font size="2">&nbsp;NZ$ 750.00 + Freight.</font></b></font>
<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp ;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<IMG SRC="visa.gif" WIDTH=77 HEIGHT=31 BORDER=0 ALT="Visa and Master Card">
<br>
Please select your location.
</TD>
</TR>
<TR>
<TD VALIGN="TOP" width="134">

<TABLE>
<input type="hidden" name="shipping" value="0">
<input type="hidden" name="shipping2" value="0">
<TD><INPUT TYPE="radio" NAME="Whereabout" VALUE="Auckland" onClick="setFreightCosts(this.form)"CHECKED><B><FONT SIZE="-1">Auckland</FONT></B></TD>
</TR>
<TR>
<TD><INPUT TYPE="radio" NAME="Whereabout" VALUE="Waikato" onClick="setFreightCosts(this.form)"><B><FONT SIZE="-1">Waikato</FONT></B></TD>
</TR>
<TR>
<TD><INPUT TYPE="radio" NAME="Whereabout" VALUE="Wellington" onClick="setFreightCosts(this.form)"><B><FONT SIZE="-1">Wellington</FONT></B></TD>
</TR>
<TR>
<TD><INPUT TYPE="radio" NAME="Whereabout" VALUE="Christchurch" onClick="setFreightCosts(this.form)"><B><FONT SIZE="-1">Christchurch</FONT></B></TD>
</TR>
</TABLE>

<TABLE CELLSPACING=0 CELLPADDING=1 BORDER=0>
<TR>
<TD><font face="Arial" size="2"><B>Quantity</B></font></TD>
<TD><input type="text" size="1" maxlength="4" name="quantity" value="1"></TD>
</TR>
</TABLE>
</TD>
</TR>
<TR>
<TD width=134 VALIGN="TOP" ALIGN="RIGHT">
<input type="image" src= "submit.jpg""https://www.paypal.com//en_US/" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
<input type="hidden" name="add" value="1">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="business" value="sales@xxxxxxxxxx.co.nz">
<input type="hidden" name="item_name" value="Masport">
<input type="hidden" name="item_number" value="E222">
<input type="hidden" name="amount" value="750.00">
<input type="hidden" name="page_style" value="PayPal">
<input type="hidden" name="no_shipping" value="2">
<input type="hidden" name="return" value="http://www.xxxxxxx.co.nz">
<input type="hidden" name="currency_code" value="NZD">
<input type="hidden" name="lc" value="NZ">
<input type="hidden" name="bn" value="PP-ShopCartBF">
</TD>
</TR>
</TABLE>
</form>
</BODY>
</HTML>

bevy121
28-07-2008, 01:12 PM
Oops!

Forgot to initialize the values back to "5" to match the default checked "Auckland" location.

If user clicked paypal without clicking any radio button there would be values of 0 for both freight costs even tho the Auckland location is pre selected by default.

(no excuse! I forgot to re set them after testing hehe)

Anyway - find this and set both value's to "5.00"



<TABLE>
<input type="hidden" name="shipping" value="0">
<input type="hidden" name="shipping2" value="0">

bevy121
28-07-2008, 01:41 PM
no you don't require an extra script - just extra radio buttons and "if then" parameters in the "setFreightCosts" function.

That's really one of the reasons I done it that way, so you could add locations and/or other items and the script I wrote should still handle it just the same, just by adding the extra handlers.

Can also add comlete new sets of radio buttons and handle them similarly with the same script (with a bit of extra code)

I got to take the grandson in to town now, but I'd be able to have a look after tea and get what you want sorted

Listen, do you msn meesanger ?

would be easier to "talk" over what you want etc

I've sent you a pm with my msn ..

mzee
28-07-2008, 05:19 PM
Thanks- I have put in the default rates.
I think the way to go is use a new page for each order. It will be very small and load quickly.
I have removed: var ship = document.freightform.shipping.value;
var ship2 = document.freightform.shipping2.value;
alert( " " + location + "\n\n" + " First item freight charge = $ " + ship + "\n\n" + " Subsequent items freight = $ " + ship2 + " each. ");

and seems Ok. I have parked it at the bottom of the page as a comment.
Should I remove the command 'break' as well?
I may put it back in later.
I may need to add a couple of buttons later if we get more freight areas.

Once again, thanks for your help. I should study Java script

bevy121
28-07-2008, 06:46 PM
Yea - don't need the "break" - and don't need the "variable declarations" without the info popup - and a couple other bits

The "loading faster" you were talking of would only be noticeable when the page is loading images etc.
The running of javascript code like this one, even extended to handle multiple radio button and checkbox list values would only be mere nano-seconds diference in time for execution :D

Anyhoo - here's the (final version?) cleaned up one... :thumbs:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

<HTML>
<HEAD>
<TITLE>Untitled</TITLE>

<SCRIPT LANGUAGE="JavaScript">
<!--
function setFreightCosts(frm){

//Find the checked radio button and set both shipping values according to the location

for (var i = 0; i < frm.Whereabout.length; i++){
if (frm.Whereabout[i].checked){
var location = frm.Whereabout[i].value;

if (location == "Auckland"){
document.freightform.shipping.value = "5.00";
document.freightform.shipping2.value = "5.00";
}
if (location == "Waikato"){
document.freightform.shipping.value = "10.00";
document.freightform.shipping2.value = "8.00";
}
if (location == "Wellington"){
document.freightform.shipping.value = "15.00";
document.freightform.shipping2.value = "10.00";
}
if (location == "Christchurch"){
document.freightform.shipping.value = "20.00";
document.freightform.shipping2.value = "15.00";
}
}
}
}

//-->
</SCRIPT>


</HEAD>
<BODY>
<form name="freightform" target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<TABLE style="font-family: Arial; font-size: 10pt; font-weight: bold" width="242">
<TR>
<TD colspan=2 ALIGN="LEFT" width="234">
<font color="#0000FF"><b><font size="2">&nbsp;NZ$ 550.00 + Freight.</font></b></font>
<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<IMG SRC="visa.gif" WIDTH=77 HEIGHT=31 BORDER=0 ALT="Visa and Master Card">
<br>
Please select your location.
</TD>
</TR>
<TR>
<TD VALIGN="TOP" width="134">

<TABLE>
<input type="hidden" name="shipping" value="5">
<input type="hidden" name="shipping2" value="5">
<TD><INPUT TYPE="radio" NAME="Whereabout" VALUE="Auckland" onClick="setFreightCosts(this.form)"CHECKED><B><FONT SIZE="-1">Auckland</FONT></B></TD>
</TR>
<TR>
<TD><INPUT TYPE="radio" NAME="Whereabout" VALUE="Waikato" onClick="setFreightCosts(this.form)"><B><FONT SIZE="-1">Waikato</FONT></B></TD>
</TR>
<TR>
<TD><INPUT TYPE="radio" NAME="Whereabout" VALUE="Wellington" onClick="setFreightCosts(this.form)"><B><FONT SIZE="-1">Wellington</FONT></B></TD>
</TR>
<TR>
<TD><INPUT TYPE="radio" NAME="Whereabout" VALUE="Christchurch" onClick="setFreightCosts(this.form)"><B><FONT SIZE="-1">Christchurch</FONT></B></TD>
</TR>
</TABLE>

<TABLE CELLSPACING=0 CELLPADDING=1 BORDER=0>
<TR>
<TD><font face="Arial" size="2"><B>Quantity</B></font></TD>
<TD><input type="text" size="1" maxlength="4" name="quantity" value="1"></TD>
</TR>
</TABLE>
</TD>
</TR>
<TR>
<TD width=134 VALIGN="TOP" ALIGN="RIGHT">
<input type="image" src= "submit.jpg""https://www.paypal.com//en_US/" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
<input type="hidden" name="add" value="1">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="business" value="sales@xxxxxxxxxx.co.nz">
<input type="hidden" name="item_name" value="Enviromower">
<input type="hidden" name="item_number" value="En24v">
<input type="hidden" name="amount" value="550.00">
<input type="hidden" name="page_style" value="PayPal">
<input type="hidden" name="no_shipping" value="2">
<input type="hidden" name="return" value="http://www.xxxxxxx.co.nz">
<input type="hidden" name="currency_code" value="NZD">
<input type="hidden" name="lc" value="NZ">
<input type="hidden" name="bn" value="PP-ShopCartBF">
</TD>
</TR>
</TABLE>
</form>
</BODY>
</HTML>

mzee
29-07-2008, 11:20 AM
Thanks for that.
Works well.:)

dyewitness
29-07-2008, 02:55 PM
... I should study Java script

Yeah I think it's a good call to learn javascript and html/xhtml etc.

The following is a good resource for this:
http://www.w3schools.com/