Forum Home
Press F1
 
Thread ID: 91937 2008-07-23 08:32:00 How to select 2 commands at once in HTML? mzee (3324) Press F1
Post ID Timestamp Content User
691416 2008-07-27 01:57:00 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. 		mzee (3324)
691417 2008-07-27 02:55:00 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 (117)
691418 2008-07-27 11:50:00 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="www.paypal.com 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""www.paypal.com border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
<img alt="" border="0" src="www.paypal.com 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 (117)
691419 2008-07-28 01:10:00 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= " " " target="_blank">www.paypal.com 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 " " " " target="_blank">www.paypal.com border= " 0 " name= " submit " alt= " Make payments with PayPal - it's fast, free and secure! " >
<img alt= " " border= " 0 " src= " " " target="_blank">www.paypal.com 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= " " " target="_blank">www.paypal.com 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 " " " " target="_blank">www.paypal.com border= " 0 " name= " submit " alt= " Make payments with PayPal - it's fast, free and secure! " >
<img alt= " " border= " 0 " src= " " " target="_blank">www.paypal.com 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> 		mzee (3324)
691420 2008-07-28 01:12:00 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 (117)
691421 2008-07-28 01:41:00 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 .. 		bevy121 (117)
691422 2008-07-28 05:19:00 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 		mzee (3324)
691423 2008-07-28 06:46:00 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=" . paypal . com/cgi-bin/webscr"" target="_blank">www . paypal . com 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"" . paypal . com//en_US/"" target="_blank">www . paypal . com border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
<img alt="" border="0" src=" . paypal . com/en_US/i/scr/pixel . gif"" target="_blank">www . paypal . com 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 (117)
691424 2008-07-28 23:20:00 Thanks for that.
Works well.:) 		mzee (3324)
691425 2008-07-29 02:55:00 ... 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/ 		dyewitness (9398)
1 2 3