|
JavaScript - Checkout Form
So I have my form built and all but I need to add the total cost of the items selected now. I'm not sure how to get the elements in the form and store them in a variable. Like for the single, that should have the value of $2. How can I get that and store it in a var?
Here is the html: Code: <html>
<head>
<style type="text/css">
#sizeOf {
border-style: solid;
border-width:5px;
border-color:red;
}
#top {
border-style: solid;
border-width:5px;
border-color:red;
}
#price {
border-style: solid;
border-width: 5px;
border-color:red;
}
#ta {
border-style:solid;
border-width: 5px;
border-color:black;
}
<script type="text/javascript" src="cost.js">
</script>
</style>
</head>
<body>
<center> <h1> Joe's Famous Burgers <h1> <br />
<h1> On-Line Order Form </h1></center>
<center>
<form id="sizeOf" name="size">
<p> Select the size burger you want</p>
<label> <input type="radio" id="siingle" name="size"
value="2.00" /> Single - $2.00</label>
<label> <input type="radio" id="double" name="size"
value="3.00" /> Double - $3.00</label>
<label> <input type="radio" id="triple" name="size"
value="4.00" /> Triple- $4.00</label>
</form>
</center>
<br />
<center> <form id="top" name="toppings">
<p> Select the toppings: </p>
<label> <input type ="checkbox" name="cbox"
value="cheese" /> Cheese ($0.50) </label>
<label> <input type ="checkbox" name="cbox"
value="onions" /> Onions ($0.25) </label>
<label> <input type ="checkbox" name="cbox"
value="lettuce" /> Lettuce (FREE) </label>
<br /> <br />
<label> <input type ="checkbox" name="cbox"
value="tomatoes" /> Tomatoes ($0.30) </label>
<label> <input type ="checkbox" name="cbox"
value="mustard" /> Mustard (FREE) </label>
<label> <input type ="checkbox" name="cbox"
value="cheeseOnly" /> Cheese ONLY($0.40) </label>
</form> </center>
<center>
<form id="price" name="total">
<p> <h3> To obtain the price of your order click on the price button below: </h3></p>
<input type="submit" value="Price (Submit Button)" onClick="computeCost();"/>
<input type="submit" value="Clear Form" />
<br />
<br />
<textarea id="ta" rows="10" cols="50">
</textarea>
</form>
</center>
</center
</body>
</html>
Here is the js: Code: //cost.js
function computeCost(){
var single = document.getElementId("single").value;
var double = document.getElementId("double").value;
var triple = document.getElementId("triple").value;
document.write("<p>" + single + "gfgdgfd" + "</p>");
}
Similar TutorialsI have now resolved please delete.
Hi Guys, At the moment we are running the below javascript on the shopping cart page of a website to stop customers purchasing under $500 worth of products. What we need is for the javascript to recognised a discount code entered and allow for purchases under $500 or to recognised a particular password or login used by a special user and then allow them to purchase under $500. We tried to put an 'else if' under the 'if (intotal > 500) { window.location=document.getElementById('catshopbuy').href; }' and added a variable for the discout code on the <td> tag but this broke the shop and we could not checkout at all. We also created and 'if' statement around the below code and said if the discount code was equal to the code we setup then ignore all the below script but this didnt work either. Is this the correct way to go about it, are we missing something or is there an easier way to accomplish this? Code: <script>
function stay() {
var intotal=document.getElementById('intotal').innerHTML;
erro=0;
var k=document.getElementById("ShippingOptions");
if(k){if(k.value<1){document.getElementById('error_msg').innerHTML=Oshoplang.InvalidShip;erro=1;}}
var c=document.getElementById("shippingCountry");ccVal="";if(c){ccVal=c.value}var a=document.getElementById("shippingState");var l="";if(a){l=a
[a.selectedIndex].text;if(a.value<1){document.getElementById('error_msg').innerHTML=Oshoplang.ChooseState;erro=1;}}
var j=document.getElementById("shippingPostcode");var h="";if(j){h=j.value;if(j.value.length<1){document.getElementById
('error_msg').innerHTML=Oshoplang.EnterZip;erro=1;}}
var g=document.getElementById("shippingCalc");if(g){var b=false;var e=g.getElementsByTagName("input");if(e.length>0){for(var d=0;d<e.length;d++){if(e
[d].checked){b=true;break}}}if(!b){document.getElementById('error_msg').innerHTML=Oshoplang.ChooseShip;erro=1;}}
if (erro==1) {document.getElementById('error_msg').style.display="block";}
if (erro==0) {
intotal=parseFloat(intotal.substring(1).replace(/,/gi,"") );
if (intotal > 500) {
window.location=document.getElementById('catshopbuy').href;
}
else
{
document.getElementById('error_msg').innerHTML="ERROR - THE TOTAL AMOUNT OF YOUR ORDER IS BELOW $500";
document.getElementById('error_msg').style.display="block";
}
}
}
</script>
Any guidance would be great. Thanks Rachael I downloaded this Free Shopping Cart in Java Script some months ago, I've been struggling for weeks to get it to work 100% - without success the support forum linked to the homepage has been inactive for years and seems to be dead. This script is totally perfect for our webshop, clean and simple and not a burden on the server, everything seems to work perfectly except for 1 problem... The sendmail function will not work! We desperately need to find a solution to this problem as soon as possible since we're losing orders everyday our webshop is offline. Any help in finding the source of the problem would be very much appreciated! The problem must be in either the checkout.pl file Code: #!/usr/bin/perl
require 5.001;
$header = "/cgi-bin/header.html";
$footer = "cgi-bin/footer.html";
$mailprogram = "/usr/lib/sendmail";
$returnpage = "/";
$youremail = "myname\@mydomain.com";
$csvfilename = "/cgi-bin/orders.csv";
$csvquote = "\"\"";
$mode = "FILE";
#These are required fields. I recommend enforcing these by javascript,
#but let's just make sure here as well.
@required = (
'b_first',
'b_last',
'b_addr',
'b_city',
'b_state',
'b_zip',
'b_phone',
'b_email'
);
sub urlDecode {
my ($string) = @_;
$string =~ tr/+/ /;
$string =~ s/%([\dA-Fa-f][\dA-Fa-f])/pack ("C", hex($1))/eg;
$string =~ s/['"]/\'/g;
return ($string);
}
sub processCGI {
local ($cgiData, $key, $value, $pair, @pairs);
if ($ENV{'REQUEST_METHOD'} eq 'GET') { $cgiData = $ENV{'QUERY_STRING'}; }
else { $cgiData = <STDIN>; }
@pairs = split (/&/, $cgiData);
foreach $pair (@pairs) {
($key, $value) = split (/\=/, $pair);
$key = &urlDecode($key);
$value = &urlDecode($value);
if(defined ${$key}){
${$key} .= ", ".$value;
}else{
${$key} = $value;
}
}
}
sub doFormError {
my ($errString) = @_;
open (HEAD, $header);
@LINES = <HEAD>;
close HEAD;
print "Content-type: text/html\n\n";
print @LINES;
print "<FONT SIZE=+2>The form you submitted was not complete.<BR><BR></FONT>";
print "$errString<BR><BR>\n";
print "<INPUT TYPE=BUTTON ONCLICK='history.back()' VALUE=' Return to the checkout page '><HR>";
open (FOOT, $footer);
@LINES = <FOOT>;
close FOOT;
print @LINES;
exit;
}
sub doError {
my ($errString) = @_;
print "Content-type: text/html\n\n";
open (HEAD, $header);
@LINES = <HEAD>;
close HEAD;
print @LINES;
print "$errString<BR><BR>\n";
open (FOOT, $footer);
@LINES = <FOOT>;
close FOOT;
print @LINES;
exit;
}
sub invalidE {
my ($szEmail) = @_;
my ($user, $host);
$szEmail =~ tr/A-Z/a-z/;
if ($szEmail =~ /\s/) { return 1; }
($user, $host) = split (/\@/, $szEmail);
if ($host =~ /compuserve/i) { ; }
else {
if (! $user =~ /\D/) { return 1; }
if (! $host =~ /\D/) { return 1; }
if (substr ($user,0,1) !~ /[a-z]/) { return 1; }
}
if ($szEmail =~ /\w+\@[\w|\.]/) { return 0; }
else { return 1; }
}
sub populateDateVar {
@months = ();
push(@months,"January");
push(@months,"February");
push(@months,"March");
push(@months,"April");
push(@months,"May");
push(@months,"June");
push(@months,"July");
push(@months,"August");
push(@months,"September");
push(@months,"October");
push(@months,"November");
push(@months,"December");
@days = ();
push(@days,"Sunday");
push(@days,"Monday");
push(@days,"Tuesday");
push(@days,"Wednesday");
push(@days,"Thursday");
push(@days,"Friday");
push(@days,"Saturday");
($sec,$min,$hour,$day,$month,$year,$day2) =
(localtime(time))[0,1,2,3,4,5,6];
if ($sec < 10) { $sec = "0$sec"; }
if ($min < 10) { $min = "0$min"; }
if ($hour < 10) { $hour = "0$hour"; }
if ($day < 10) { $day = "0$day"; }
$year += "1900";
#$todaysdate = "$months[$month] $day, $year $hour:$min:$sec";
}
# process the form input.
&processCGI;
&populateDateVar;
foreach $check(@required) {
unless ($check) {
doFormError("It appears that you forgot to fill in the <strong>$check</strong> field.");
exit;
}
}
# checks for valid email address
if( &invalidE($b_email) ){
doFormError('You submitted an invalid email address.');
}
if( $mode eq "BOTH" || $mode eq "EMAIL") {
# Send email order to you...
open (MAIL,"|$mailprogram");
print MAIL "To: $youremail\n";
print MAIL "From: $b_email\n";
print MAIL "Subject: New Online Order\n";
print MAIL "\n\n";
print MAIL "A new order has been received. A summary of this order appears below.\n";
print MAIL "\n";
print MAIL "Order Date: $months[$month] $day, $year $hour:$min:$sec \n";
print MAIL " \n";
print MAIL "Bill To: \n";
print MAIL "-------- \n";
print MAIL " $b_first $b_last \n";
print MAIL " $b_addr \n";
print MAIL " $b_addr2 \n";
print MAIL " $b_city, $b_state $b_zip \n";
print MAIL " $b_phone \n";
print MAIL " $b_fax \n";
print MAIL " $b_email \n";
print MAIL " \n";
print MAIL " \n";
print MAIL "Ship To: \n";
print MAIL "-------- \n";
print MAIL " $s_first $s_last \n";
print MAIL " $s_addr \n";
print MAIL " $s_addr2 \n";
print MAIL " $s_city, $s_state $s_zip \n";
print MAIL " $s_phone \n";
print MAIL " \n";
print MAIL " \n";
print MAIL "Qty Price(\$) Product ID - Product Name\n";
print MAIL "===================================================================== \n";
print MAIL "$QUANTITY_1 \$$PRICE_1 $ID_1 - $NAME_1 $ADDTLINFO_1 \n";
if( $NAME_2 ) {print MAIL "$QUANTITY_2 \$$PRICE_2 $ID_2 - $NAME_2 $ADDTLINFO_2 \n";}
if( $NAME_3 ) {print MAIL "$QUANTITY_3 \$$PRICE_3 $ID_3 - $NAME_3 $ADDTLINFO_3 \n";}
if( $NAME_4 ) {print MAIL "$QUANTITY_4 \$$PRICE_4 $ID_4 - $NAME_4 $ADDTLINFO_4 \n";}
if( $NAME_5 ) {print MAIL "$QUANTITY_5 \$$PRICE_5 $ID_5 - $NAME_5 $ADDTLINFO_5 \n";}
if( $NAME_6 ) {print MAIL "$QUANTITY_6 \$$PRICE_6 $ID_6 - $NAME_6 $ADDTLINFO_6 \n";}
if( $NAME_7 ) {print MAIL "$QUANTITY_7 \$$PRICE_7 $ID_7 - $NAME_7 $ADDTLINFO_7 \n";}
if( $NAME_8 ) {print MAIL "$QUANTITY_8 \$$PRICE_8 $ID_8 - $NAME_8 $ADDTLINFO_8 \n";}
if( $NAME_9 ) {print MAIL "$QUANTITY_9 \$$PRICE_9 $ID_9 - $NAME_9 $ADDTLINFO_9 \n";}
if( $NAME_10 ){print MAIL "$QUANTITY_10 \$$PRICE_10 $ID_10 - $NAME_10 $ADDTLINFO_10 \n";}
if( $NAME_11 ){print MAIL "$QUANTITY_11 \$$PRICE_11 $ID_11 - $NAME_11 $ADDTLINFO_11 \n";}
if( $NAME_12 ){print MAIL "$QUANTITY_12 \$$PRICE_12 $ID_12 - $NAME_12 $ADDTLINFO_12 \n";}
if( $NAME_13 ){print MAIL "$QUANTITY_13 \$$PRICE_13 $ID_13 - $NAME_13 $ADDTLINFO_13 \n";}
print MAIL "===================================================================== \n";
print MAIL "SUBTOTAL: $SUBTOTAL \n";
print MAIL "TOTAL: $TOTAL \n";
print MAIL "\n";
print MAIL "FREIGHT: $SHIPPING \n";
print MAIL "\n\n";
print MAIL "Comments: \n";
print MAIL "--------- \n";
print MAIL "$comment \n";
print MAIL " \n";
close MAIL;
}
if( $mode eq "BOTH" || $mode eq "FILE") {
$csvcomments = $comment;
#$csvcomments =~ s/\"/$csvquote/ig;
open (CSVF,">>$csvfilename");
print CSVF "\"";
print CSVF "$months[$month] $day, $year $hour:$min:$sec";
print CSVF "\",\"";
print CSVF "$b_first";
print CSVF "\",\"";
print CSVF "$b_last";
print CSVF "\",\"";
print CSVF "$b_addr";
print CSVF "\",\"";
print CSVF "$b_addr2";
print CSVF "\",\"";
print CSVF "$b_city";
print CSVF "\",\"";
print CSVF "$b_state";
print CSVF "\",\"";
print CSVF "$b_zip";
print CSVF "\",\"";
print CSVF "$b_phone";
print CSVF "\",\"";
print CSVF "$b_fax";
print CSVF "\",\"";
print CSVF "$b_email";
print CSVF "\",\"";
print CSVF "$s_first";
print CSVF "\",\"";
print CSVF "$s_last";
print CSVF "\",\"";
print CSVF "$s_addr";
print CSVF "\",\"";
print CSVF "$s_addr2";
print CSVF "\",\"";
print CSVF "$s_city";
print CSVF "\",\"";
print CSVF "$s_state";
print CSVF "\",\"";
print CSVF "$s_zip";
print CSVF "\",\"";
print CSVF "$s_phone";
print CSVF "\",\"";
print CSVF "$QUANTITY_1";
print CSVF "\",\"";
print CSVF "\$$PRICE_1";
print CSVF "\",\"";
print CSVF "$ID_1";
print CSVF "\",\"";
print CSVF "$NAME_1";
print CSVF "\",\"";
print CSVF "$ADDTLINFO_1";
print CSVF "\",\"";
}
# Send email conformation to the customer.....
open (MAIL,"|$mailprogram");
print MAIL "To: $b_email\n";
print MAIL "From: $youremail\n";
print MAIL "Subject: Order Confirmation\n";
print MAIL "\n\n";
print MAIL "A new order has been received. A summary of this order appears below.\n";
print MAIL "\n";
print MAIL "Order Date: $months[$month] $day, $year $hour:$min:$sec \n";
print MAIL " \n";
print MAIL "Bill To: \n";
print MAIL "-------- \n";
print MAIL " $b_first $b_last \n";
print MAIL " $b_addr \n";
print MAIL " $b_addr2 \n";
print MAIL " $b_city, $b_state $b_zip \n";
print MAIL " $b_phone \n";
print MAIL " $b_fax \n";
print MAIL " $b_email \n";
print MAIL " \n";
print MAIL " \n";
print MAIL "Ship To: \n";
print MAIL "-------- \n";
if ( $s_addr eq "" ) {
print MAIL " Use Billing Address\n";
} else {
print MAIL " $s_first $s_last \n";
print MAIL " $s_addr \n";
print MAIL " $s_addr2 \n";
print MAIL " $s_city, $s_state $s_zip \n";
print MAIL " $s_phone \n";
}
print MAIL " \n";
print MAIL " \n";
print MAIL "Qty Price(\$) Product ID - Product Name\n";
print MAIL "===================================================================== \n";
print MAIL "$QUANTITY_1 \$$PRICE_1 $ID_1 - $NAME_1 $ADDTLINFO_1 \n";
if( $NAME_2 ) {print MAIL "$QUANTITY_2 \$$PRICE_2 $ID_2 - $NAME_2 $ADDTLINFO_2 \n";}
if( $NAME_3 ) {print MAIL "$QUANTITY_3 \$$PRICE_3 $ID_3 - $NAME_3 $ADDTLINFO_3 \n";}
if( $NAME_4 ) {print MAIL "$QUANTITY_4 \$$PRICE_4 $ID_4 - $NAME_4 $ADDTLINFO_4 \n";}
if( $NAME_5 ) {print MAIL "$QUANTITY_5 \$$PRICE_5 $ID_5 - $NAME_5 $ADDTLINFO_5 \n";}
if( $NAME_6 ) {print MAIL "$QUANTITY_6 \$$PRICE_6 $ID_6 - $NAME_6 $ADDTLINFO_6 \n";}
if( $NAME_7 ) {print MAIL "$QUANTITY_7 \$$PRICE_7 $ID_7 - $NAME_7 $ADDTLINFO_7 \n";}
if( $NAME_8 ) {print MAIL "$QUANTITY_8 \$$PRICE_8 $ID_8 - $NAME_8 $ADDTLINFO_8 \n";}
if( $NAME_9 ) {print MAIL "$QUANTITY_9 \$$PRICE_9 $ID_9 - $NAME_9 $ADDTLINFO_9 \n";}
if( $NAME_10 ){print MAIL "$QUANTITY_10 \$$PRICE_10 $ID_10 - $NAME_10 $ADDTLINFO_10 \n";}
if( $NAME_11 ){print MAIL "$QUANTITY_11 \$$PRICE_11 $ID_11 - $NAME_11 $ADDTLINFO_11 \n";}
if( $NAME_12 ){print MAIL "$QUANTITY_12 \$$PRICE_12 $ID_12 - $NAME_12 $ADDTLINFO_12 \n";}
if( $NAME_13 ){print MAIL "$QUANTITY_13 \$$PRICE_13 $ID_13 - $NAME_13 $ADDTLINFO_13 \n";}
print MAIL "===================================================================== \n";
print MAIL "SUBTOTAL: $SUBTOTAL \n";
print MAIL "TOTAL: $TOTAL \n";
print MAIL "\n";
print MAIL "FREIGHT: $SHIPPING \n";
print MAIL "\n\n";
print MAIL "Comments: \n";
print MAIL "--------- \n";
print MAIL "$comment \n";
print MAIL " \n";
close MAIL;
print "Content-type: text/html\n\n";
open (HEAD, $header);
@LINES = <HEAD>;
close HEAD;
print @LINES;
print "<h2>Thank you</h2>";
print "Thank you for your order from our online store. You will receive a confirmation email of your order ";
print "momentarily. Please contact us at $youremail if you have any questions or concerns.";
print "<P>";
print "<A HREF=\"$returnpage\" target=_top>Return Home</A>";
print "<P>";
open (FOOT, $footer);
@LINES = <FOOT>;
close FOOT;
print @LINES;
exit;
or in the checkout.html file.. Code: <HTML>
<HEAD>
<TITLE>
CHECKOUT -- Title Here
</TITLE>
<STYLE>
.greetext { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px;color: #006600;}
.blacktext { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px;color: #000000;}
.checkout {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #000000;}
.checkoutinput {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #000000;}
.nopcart {background: #464444;border: 1px;font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff;}
.nopheader {background: #464444;font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #FFFFFF;}
.nopentry {background: #FFFFFF;font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #000000;}
.noptotal {background: #FFFFFF;font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #000000;}
.nopbutton {background: #FFFFFF;font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #000000;}
</STYLE>
<SCRIPT SRC="http://www.mydomain.com/language-en.js"></SCRIPT>
<SCRIPT SRC="http://www.mydomain.com/nopcart.js">
</SCRIPT>
<SCRIPT>
function CheckForm( theform )
{
var bMissingFields = false;
var strFields = "";
if( theform.b_first.value == '' ){
bMissingFields = true;
strFields += " Billing: First Name\n";
}
if( theform.b_last.value == '' ){
bMissingFields = true;
strFields += " Billing: Last Name\n";
}
if( theform.b_addr.value == '' ){
bMissingFields = true;
strFields += " Billing: Address\n";
}
if( theform.b_city.value == '' ){
bMissingFields = true;
strFields += " Billing: City\n";
}
if( theform.b_state.value == '' ){
bMissingFields = true;
strFields += " Billing: State\n";
}
if( theform.b_zip.value == '' ){
bMissingFields = true;
strFields += " Billing: Zipcode\n";
}
if( theform.b_phone.value == '' ){
bMissingFields = true;
strFields += " Billing: Phone\n";
}
if( theform.b_email.value == '' ){
bMissingFields = true;
strFields += " Billing: Email\n";
}
if( bMissingFields ) {
alert( "I'm sorry, but you must provide the following field(s) before continuing:\n" + strFields );
return false;
}
return true;
}
</SCRIPT>
</head>
</HEAD>
<BODY BGCOLOR="White" TEXT="Black">
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=100%>
<TD VALIGN=TOP BGCOLOR=#663333>
<IMG SRC="/images/one.gif" WIDTH=2 HEIGHT=20 ALT="">
<IMG SRC="/images/text.gif" WIDTH=391 HEIGHT=20 ALT="The Ultimate Delicacy">
</TD>
</TR>
</TABLE>
<blockquote>
<NOSCRIPT>
Whoops, we detected that your browser does not have JavaScript, or it is disabled. Our product catalog requires that you
have JavaScript enabled to order products. <a href="http://www.netscape.com">Netscape</a> and <a href="http://www.microsoft.com/ie">Microsoft</a>
offer free browsers which support JavaScript. If you are using a JavaScript compliant browser and still have problems, make sure you
have JavaScript enabled in your browser's preferences.
</NOSCRIPT>
<FONT CLASS="checkout">
<form action="cgi-bin/checkout.pl" method="POST" onSubmit="return CheckForm(this)">
<NOBR>
<SCRIPT>
CheckoutCart();
</SCRIPT>
</NOBR>
<br>
<P>
<font class="blacktext">
<b>Please fill out the following information below to complete your order.</b>
</font>
<p>
<b><font class="greetext">Billing Information:</font></b><P>
<TABLE class="blacktext">
<TR><TD>Name: </TD><TD><input type="text" size="18" name="b_first"> <input type="text" size="15" name="b_last"></TD></TR>
<TR><TD>Address: </TD><TD><input type="text" size="37" name="b_addr"> </TD></TR>
<TR><TD>Address: </TD><TD><input type="text" size="37" name="b_addr2"></TD></TR>
<TR><TD>City: </TD><TD><input type="text" size="21" name="b_city"> </TD></TR>
<TR><TD>State: </TD><TD><input type="text" size="1" name="b_state"> </TD></TR>
<TR><TD>Zip: </TD><TD><input type="text" size="5" name="b_zip"></TD></TR>
<TR><TD>Phone: </TD><TD><input type="text" size="37" name="b_phone"></TD></TR>
<TR><TD>Fax: </TD><TD><input type="text" size="37" name="b_fax"></TD></TR>
<TR><TD>Email: </TD><TD><input type="text" size="37" name="b_email"> </TD></TR>
</TABLE>
<p>
<b><font class="greetext">Shipping Information (if different than billing):</font></b><P>
<TABLE class="blacktext">
<TR><TD>Name: </TD><TD><input type="text" size="18" name="s_first"> <input type="text" size="15" name="s_last"></TD></TR>
<TR><TD>Address: </TD><TD><input type="text" size="37" name="s_addr"> </TD></TR>
<TR><TD>Address: </TD><TD><input type="text" size="37" name="s_addr2"></TD></TR>
<TR><TD>City: </TD><TD><input type="text" size="21" name="s_city"> </TD></TR>
<TR><TD>State: </TD><TD><input type="text" size="1" name="s_state"> </TD></TR>
<TR><TD>Zip: </TD><TD><input type="text" size="5" name="s_zip"></TD></TR>
<TR><TD>Phone: </TD><TD><input type="text" size="37" name="s_phone"></TD></TR>
<TR><TD>Fax: </TD><TD><input type="text" size="37" name="s_fax"></TD></TR>
<TR><TD>Email: </TD><TD><input type="text" size="37" name="s_email"> </TD></TR>
</TABLE>
<p>
<FONT class="blacktext">
<b><font class="greetext">Comments/Special Instructions:</font></b><P>
<TEXTAREA NAME="comment" ROWS=6 COLS=40>
</TEXTAREA>
</font>
<input type=submit Value="Submit Order"> <INPUT type=RESET value=" Clear Form ">
</p>
</center>
</FORM>
</blockquote>
</body>
</html>
Hi, PanM here. Trying to build a website to help my cousin sell his beautiful art. I am using a free web page at weebly.com and they have an option to use either PayPal or Google Checkout to put in shipping costs and go to the cart checkout. However, haven't evaluated Google yet, but PayPal does not do what I want. You have to put in various shipping prices and then it doesn't relate to the state or country unless you select all states, or anyway that's how I see it. I have found one on the net that wants $5 per month, but I am trying to do this for free. UPS, FedEx, and USPS have API's that can probably work, but I would prefer a HTML file or Javascript file in the page on my site. Can anyone help with this problem? Please. Thanks, PanM On my site's shopping cart, when clicking the "buy" button, it merely animates a little item that shows that something is now in the customer's cart. I'd like it to do this, and then redirect to "/cart", cutting down the work of what the user actually has to do (we only have one product). Here's what I'm working with: <!-- START ADD TO CART --> {% if featuredproduct.available %} <span class="featured-product price"><span>{{ featuredproduct.price | money }}</span>{% if featuredproduct.compare_at_price_max > featuredproduct.price %} <del>{{ featuredproduct.compare_at_price | money }}</del>{% endif %}</span> <input type="submit" value="{{ settings.text_addtocart }}" class=" add-to-cart addtocart button primary"> {% else %} <h3 class="featured-product price sold-out"><span>Sold Out</span></h3> <input type="submit" value="{{ settings.text_addtocart }}" class="featured-product add-to-cart button primary disabled" disabled="disabled "> {% endif %} <!-- END ADD TO CART --> Adding an "onclick="location.href='/cart';" after the input classes does not fire the actual act of adding the item to the cart, so it shows an empty cart on the redirect. JS newbie, sorry for the rough explanation. Any help greatly appreciated! Hi, Im using the old nopcard scripts on my site. It does every thing right except it does not send a Email to my to my email adres. I dont know how to correct this because i dont know Javascript. I include the script if anybody know how to alter it so that it will send the info to my email adres as well. Thank you very much for your previous help. Kees Meyer Oudtshoorn South Africa. The checkout.pl script : #!/usr/bin/perl #=====================================================================|| # NOP Design JavaScript Shopping Cart || # PERL CGI Checkout Module || # || # For more information on SmartSystems, or how NOPDesign can help you || # Please visit us on the WWW at http://www.nopdesign.com || # || # Javascript portions of this shopping cart software are available as || # freeware from NOP Design. You must keep this comment unchanged in || # your code. For more information contact FreeCart@NopDesign.com. || # || # JavaScript Shop Module, V.4.4.0 || #=====================================================================|| # || # Function: Writes available form elements from the NOP || # Free Cart (http://www.nopdesign.com/freecart) || # and other form elements to an email file, and || # send user confirmation || # || #=====================================================================|| require 5.001; ######################################################################## # # # User defined variables: # # $header - string value containing the complete # # path of the HTML page header # # $footer - string value containing the complete # # path of the HTML page footer # # $mailprogram - string value containing the complete path to # # the sendmail binary on the system. # # $youremail - string value containing the email address to # # send catalog orders in EMAIL or BOTH modes # # **Don't forget to put a \ before the @ in your # # email address. ie. spam\@nopdesign.com*** # # $returnpage - URL to send user when checkout is complete # # $csvfilename - string value containing the complete # # path of the user database. # # $csvquote - string value containing what to use for quotes # # in the csv file (typically "" or \") # # $mode - string value containing 'EMAIL', 'FILE' or # # 'BOTH' to determine if the script should send # # an email to you with the new order, write the # # order to a CSV file, or do both. # ######################################################################## $header = "header.html"; $footer = "footer.html"; $mailprogram = "/usr/lib/sendmail -t"; $returnpage = "/"; $youremail = "support\@ebookstore.co.za"; $csvfilename = "orders.csv"; $csvquote = "\"\""; $mode = "BOTH"; #These are required fields. I recommend enforcing these by javascript, #but let's just make sure here as well. @required = ( 'b_first', 'b_last', 'b_addr', 'b_city', 'b_state', 'b_zip', 'b_phone', 'b_email' ); ############################################################## #FUNCTION: urlDecode # #RETURNS: The decoded string. # #PARAMETERS: An encoded string. # #PURPOSE: Decodes a URL encoded string. # ############################################################## sub urlDecode { my ($string) = @_; $string =~ tr/+/ /; $string =~ s/%([\dA-Fa-f][\dA-Fa-f])/pack ("C", hex($1))/eg; $string =~ s/['"]/\'/g; return ($string); } ############################################################## #FUNCTION: processCGI # #RETURNS: # #PARAMETERS: # #PURPOSE: Retrieves form data submitted via the 'GET' # # method and decodes it. You may then access # # the passed in variables via calls to $[name] # # where [name] is the name of the form element. # ############################################################## sub processCGI { local ($cgiData, $key, $value, $pair, @pairs); if ($ENV{'REQUEST_METHOD'} eq 'GET') { $cgiData = $ENV{'QUERY_STRING'}; } else { $cgiData = <STDIN>; } @pairs = split (/&/, $cgiData); foreach $pair (@pairs) { ($key, $value) = split (/\=/, $pair); $key = &urlDecode($key); $value = &urlDecode($value); if(defined ${$key}){ ${$key} .= ", ".$value; }else{ ${$key} = $value; } } } ############################################################## #FUNCTION: doFormError # #RETURNS: # #PARAMETERS: A error message string. # #PURPOSE: Generates an HTML page indicating a form # # submission error occurred. # ############################################################## sub doFormError { my ($errString) = @_; open (HEAD, $header); @LINES = <HEAD>; close HEAD; print "Content-type: text/html\n\n"; print @LINES; print "<FONT SIZE=+2>The form you submitted was not complete.<BR><BR></FONT>"; print "$errString<BR><BR>\n"; print "<INPUT TYPE=BUTTON ONCLICK='history.back()' VALUE=' Return to the checkout page '><HR>"; open (FOOT, $footer); @LINES = <FOOT>; close FOOT; print @LINES; exit; } ############################################################## #FUNCTION: doError # #RETURNS: # #PARAMETERS: A error message string. # #PURPOSE: Generates an HTML page indicating an error # # occurred. # ############################################################## sub doError { my ($errString) = @_; print "Content-type: text/html\n\n"; open (HEAD, $header); @LINES = <HEAD>; close HEAD; print @LINES; print "$errString<BR><BR>\n"; open (FOOT, $footer); @LINES = <FOOT>; close FOOT; print @LINES; exit; } ############################################################## #FUNCTION: invalidE # #RETURNS: 1 if invalid, 0 if valid. # #PARAMETERS: An email address variable. # #PURPOSE: Checks to see if a submitted email address is # # of the valid form 'x@y'. # ############################################################## sub invalidE { my ($szEmail) = @_; my ($user, $host); $szEmail =~ tr/A-Z/a-z/; if ($szEmail =~ /\s/) { return 1; } ($user, $host) = split (/\@/, $szEmail); if ($host =~ /compuserve/i) { ; } else { if (! $user =~ /\D/) { return 1; } if (! $host =~ /\D/) { return 1; } if (substr ($user,0,1) !~ /[a-z]/) { return 1; } } if ($szEmail =~ /\w+\@[\w|\.]/) { return 0; } else { return 1; } } sub populateDateVar { (Taken out because Text to long for email) "===================================================================== \n"; print MAIL "$QUANTITY_1 \R$PRICE_1 $ID_1 - $NAME_1 $ADDTLINFO_1 \n"; if( $NAME_2 ) {print MAIL "$QUANTITY_2 \R$PRICE_2 $ID_2 - $NAME_2 $ADDTLINFO_2 \n";} if( $NAME_3 ) {print MAIL "$QUANTITY_3 \R$PRICE_3 $ID_3 - $NAME_3 $ADDTLINFO_3 \n";} if( $NAME_4 ) {print MAIL "$QUANTITY_4 \R$PRICE_4 $ID_4 - $NAME_4 $ADDTLINFO_4 \n";} if( $NAME_5 ) {print MAIL "$QUANTITY_5 \R$PRICE_5 $ID_5 - $NAME_5 $ADDTLINFO_5 \n";} if( $NAME_6 ) {print MAIL "$QUANTITY_6 \R$PRICE_6 $ID_6 - $NAME_6 $ADDTLINFO_6 \n";} if( $NAME_7 ) {print MAIL "$QUANTITY_7 \R$PRICE_7 $ID_7 - $NAME_7 $ADDTLINFO_7 \n";} if( $NAME_8 ) {print MAIL "$QUANTITY_8 \R$PRICE_8 $ID_8 - $NAME_8 $ADDTLINFO_8 \n";} if( $NAME_9 ) {print MAIL "$QUANTITY_9 \R$PRICE_9 $ID_9 - $NAME_9 $ADDTLINFO_9 \n";} if( $NAME_10 ){print MAIL "$QUANTITY_10 \R$PRICE_10 $ID_10 - $NAME_10 $ADDTLINFO_10 \n";} if( $NAME_11 ){print MAIL "$QUANTITY_11 \R$PRICE_11 $ID_11 - $NAME_11 $ADDTLINFO_11 \n";} if( $NAME_12 ){print MAIL "$QUANTITY_12 \R$PRICE_12 $ID_12 - $NAME_12 $ADDTLINFO_12 \n";} if( $NAME_13 ){print MAIL "$QUANTITY_13 \R$PRICE_13 $ID_13 - $NAME_13 $ADDTLINFO_13 \n";} print MAIL "===================================================================== \n"; print MAIL "SUBTOTAL: $SUBTOTAL \n"; print MAIL "TOTAL: $TOTAL \n"; print MAIL "\n"; print MAIL "\n\n"; print MAIL "Comments: \n"; print MAIL "--------- \n"; print MAIL "$comment \n"; print MAIL " \n"; close MAIL; } if( $mode eq "BOTH" || $mode eq "FILE") { $csvcomments = $comment; #$csvcomments =~ s/\"/$csvquote/ig; open (CSVF,">>$csvfilename"); print CSVF "\""; print CSVF "$months[$month] $day, $year $hour:$min:$sec"; print CSVF "\",\""; print CSVF "$b_first"; print CSVF "\",\""; print CSVF "$b_last"; print CSVF "\",\""; print CSVF "$b_addr"; print CSVF "\",\""; print CSVF "$b_addr2"; print CSVF "\",\""; print CSVF "$b_city"; print CSVF "\",\""; print CSVF "$b_state"; print CSVF "\",\""; print CSVF "$b_zip"; print CSVF "\",\""; print CSVF "$b_phone"; print CSVF "\",\""; print CSVF "$b_fax"; print CSVF "\",\""; print CSVF "$b_email"; print CSVF "\",\""; print CSVF "$s_first"; print CSVF "\",\""; print CSVF "$s_last"; print CSVF "\",\""; print CSVF "$s_addr"; print CSVF "\",\""; print CSVF "$s_addr2"; print CSVF "\",\""; print CSVF "$s_city"; print CSVF "\",\""; print CSVF "$s_state"; print CSVF "\",\""; print CSVF "$s_zip"; print CSVF "\",\""; print CSVF "$s_phone"; print CSVF "\",\""; print CSVF "$QUANTITY_1"; print CSVF "\",\""; print CSVF "\R$PRICE_1"; print CSVF "\",\""; print CSVF "$ID_1"; print CSVF "\",\""; print CSVF "$NAME_1"; print CSVF "\",\""; print CSVF "$ADDTLINFO_1"; print CSVF "\",\""; print CSVF "$QUANTITY_2"; print CSVF "\",\""; print CSVF "\R$PRICE_2"; print CSVF "\",\""; print CSVF "$ID_2"; print CSVF "\",\""; print CSVF "$NAME_2"; print CSVF "\",\""; print CSVF "$ADDTLINFO_2"; print CSVF "\",\""; print CSVF "$QUANTITY_3"; print CSVF "\",\""; print CSVF "\R$PRICE_3"; print CSVF "\",\""; print CSVF "$ID_3"; print CSVF "\",\""; print CSVF "$NAME_3"; print CSVF "\",\""; print CSVF "$ADDTLINFO_3"; print CSVF "\",\""; print CSVF "$QUANTITY_4"; print CSVF "\",\""; print CSVF "\R$PRICE_4"; print CSVF "\",\""; print CSVF "$ID_4"; print CSVF "\",\""; print CSVF "$NAME_4"; print CSVF "\",\""; print CSVF "$ADDTLINFO_4"; print CSVF "\",\""; print CSVF "$QUANTITY_5"; print CSVF "\",\""; print CSVF "\R$PRICE_5"; print CSVF "\",\""; print CSVF "$ID_5"; print CSVF "\",\""; print CSVF "$NAME_5"; print CSVF "\",\""; print CSVF "$ADDTLINFO_5"; print CSVF "\",\""; print CSVF "$QUANTITY_6"; print CSVF "\",\""; print CSVF "\R$PRICE_6"; print CSVF "\",\""; print CSVF "$ID_6"; print CSVF "\",\""; print CSVF "$NAME_6"; print CSVF "\",\""; print CSVF "$ADDTLINFO_6"; print CSVF "\",\""; print CSVF "$QUANTITY_7"; print CSVF "\",\""; print CSVF "\R$PRICE_7"; print CSVF "\",\""; print CSVF "$ID_7"; print CSVF "\",\""; print CSVF "$NAME_7"; print CSVF "\",\""; print CSVF "$ADDTLINFO_7"; print CSVF "\",\""; print CSVF "$QUANTITY_8"; print CSVF "\",\""; print CSVF "\R$PRICE_8"; print CSVF "\",\""; print CSVF "$ID_8"; print CSVF "\",\""; print CSVF "$NAME_8"; print CSVF "\",\""; print CSVF "$ADDTLINFO_8"; print CSVF "\",\""; print CSVF "$QUANTITY_9"; print CSVF "\",\""; print CSVF "\R$PRICE_9"; print CSVF "\",\""; print CSVF "$ID_9"; print CSVF "\",\""; print CSVF "$NAME_9"; print CSVF "\",\""; print CSVF "$ADDTLINFO_9"; print CSVF "\",\""; print CSVF "$QUANTITY_10"; print CSVF "\",\""; print CSVF "\R$PRICE_10"; print CSVF "\",\""; print CSVF "$ID_10"; print CSVF "\",\""; print CSVF "$NAME_10"; print CSVF "\",\""; print CSVF "$ADDTLINFO_10"; print CSVF "\",\""; print CSVF "$QUANTITY_11"; print CSVF "\",\""; print CSVF "\R$PRICE_11"; print CSVF "\",\""; print CSVF "$ID_11"; print CSVF "\",\""; print CSVF "$NAME_11"; print CSVF "\",\""; print CSVF "$ADDTLINFO_11"; print CSVF "\",\""; print CSVF "$QUANTITY_12"; print CSVF "\",\""; print CSVF "\R$PRICE_12"; print CSVF "\",\""; print CSVF "$ID_12"; print CSVF "\",\""; print CSVF "$NAME_12"; print CSVF "\",\""; print CSVF "$ADDTLINFO_12"; print CSVF "\",\""; print CSVF "$QUANTITY_13"; print CSVF "\",\""; print CSVF "\R$PRICE_13"; print CSVF "\",\""; print CSVF "$ID_13"; print CSVF "\",\""; print CSVF "$NAME_13"; print CSVF "\",\""; print CSVF "$ADDTLINFO_13"; print CSVF "\",\""; print CSVF "$SUBTOTAL"; print CSVF "\",\""; print CSVF "$TOTAL"; print CSVF "\",\""; print CSVF "$SHIPPING"; print CSVF "\",\""; print CSVF "$comment"; print CSVF "\"\n"; close CSVF; } # Send email conformation to the customer..... open (MAIL,"|$mailprogram"); print MAIL "To: $b_email\n"; print MAIL "From: $youremail\n"; print MAIL "Subject: Order Confirmation\n"; print MAIL "\n\n"; print MAIL "A new order has been received. A summary of this order appears below.\n"; print MAIL "\n"; print MAIL "Order Date: $months[$month] $day, $year $hour:$min:$sec \n"; print MAIL " \n"; print MAIL "Bill To: \n"; print MAIL "-------- \n"; print MAIL " $b_first $b_last \n"; print MAIL " $b_addr \n"; print MAIL " $b_addr2 \n"; print MAIL " $b_city, $b_state $b_zip \n"; print MAIL " $b_phone \n"; print MAIL " $b_fax \n"; print MAIL " $b_email \n"; print MAIL " \n"; print MAIL " \n"; print MAIL "-------- \n"; if ( $s_addr eq "" ) { print MAIL " Use Billing Address\n"; } else { print MAIL " $s_first $s_last \n"; print MAIL " $s_addr \n"; print MAIL " $s_addr2 \n"; print MAIL " $s_city, $s_state $s_zip \n"; print MAIL " $s_phone \n"; } print MAIL " \n"; print MAIL " \n"; print MAIL "Qty Price(\R) Product ID - Product Name\n"; print MAIL "===================================================================== \n"; print MAIL "$QUANTITY_1 \R$PRICE_1 $ID_1 - $NAME_1 $ADDTLINFO_1 \n"; if( $NAME_2 ) {print MAIL "$QUANTITY_2 \R$PRICE_2 $ID_2 - $NAME_2 $ADDTLINFO_2 \n";} if( $NAME_3 ) {print MAIL "$QUANTITY_3 \R$PRICE_3 $ID_3 - $NAME_3 $ADDTLINFO_3 \n";} if( $NAME_4 ) {print MAIL "$QUANTITY_4 \R$PRICE_4 $ID_4 - $NAME_4 $ADDTLINFO_4 \n";} if( $NAME_5 ) {print MAIL "$QUANTITY_5 \R$PRICE_5 $ID_5 - $NAME_5 $ADDTLINFO_5 \n";} if( $NAME_6 ) {print MAIL "$QUANTITY_6 \R$PRICE_6 $ID_6 - $NAME_6 $ADDTLINFO_6 \n";} if( $NAME_7 ) {print MAIL "$QUANTITY_7 \R$PRICE_7 $ID_7 - $NAME_7 $ADDTLINFO_7 \n";} if( $NAME_8 ) {print MAIL "$QUANTITY_8 \R$PRICE_8 $ID_8 - $NAME_8 $ADDTLINFO_8 \n";} if( $NAME_9 ) {print MAIL "$QUANTITY_9 \R$PRICE_9 $ID_9 - $NAME_9 $ADDTLINFO_9 \n";} if( $NAME_10 ){print MAIL "$QUANTITY_10 \R$PRICE_10 $ID_10 - $NAME_10 $ADDTLINFO_10 \n";} if( $NAME_11 ){print MAIL "$QUANTITY_11 \R$PRICE_11 $ID_11 - $NAME_11 $ADDTLINFO_11 \n";} if( $NAME_12 ){print MAIL "$QUANTITY_12 \R$PRICE_12 $ID_12 - $NAME_12 $ADDTLINFO_12 \n";} if( $NAME_13 ){print MAIL "$QUANTITY_13 \R$PRICE_13 $ID_13 - $NAME_13 $ADDTLINFO_13 \n";} print MAIL "===================================================================== \n"; print MAIL "SUBTOTAL: $SUBTOTAL \n"; print MAIL "TOTAL: $TOTAL \n"; print MAIL "\n"; print MAIL "\n\n"; print MAIL "Comments: \n"; print MAIL "--------- \n"; print MAIL "$comment \n"; print MAIL " \n"; close MAIL; print "Content-type: text/html\n\n"; open (HEAD, $header); @LINES = <HEAD>; close HEAD; print @LINES; print "<h2>Thank you</h2>"; print "Thank you for your order."; print "Please contact us at $youremail if you have any problems questions or concerns. Thank U again for your support Kees Meyer."; print "<P>"; print "<A HREF=\"$returnpage\" rel="nofollow" target=_top>Return Home</A>"; print "<P>"; open (FOOT, $footer); @LINES = <FOOT>; close FOOT; print @LINES; exit; Hello I've been struggling trying to get a small order form to work the way I want it to. Here is a link to the live page: http://www.watphotos.com/introductio...otography.html And here is the code in question: Code: <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
var initial = 0
var total = 0;
var services = 0;
function addServices()
{
initial = 150
total = initial
services = 0;
$("input:checked").each(function(){
value = $(this).attr("value");
services += parseInt(value);
});
}
$(function()
{
addServices();
total += services;
$("form").before('<p class="price"></p>')
$("p.price").text("Total Price: US$" + total);
});
$("input:radio, input:checkbox").click(function () {
addServices();
total += services
$("p.price").text("Total Price: US$" + total);
});
});
</script>
I have two questions... Question 1 How can I make this piece of script act a little smarter. Look at the order form, I'm catering for up to 4 people and providing lunch for them. If they select 3 people and the spaghetti bol for lunch, it's only adding $10 where it should be adding $30. Obviously this is simple multiplication but since the values in my form are prices it makes it a little tricky. I'm guessing an onselect on the first part of the form which changes the pricing of the other items would be the way to go, but how do I do this? Question 2 The "Total Price" is placed before the <form> tag by the script. This is ok but it's not where I want it. How can I position this text elsewhere in the document? Thanks in advance! I've literally tried everything. Read 26 tutorials, interchanged code, etc. My validation functions all work. My AJAX functions work (tested manually using servlet URL's). The second servlet validates the reCaptcha form that's generated on my webpage. After the form is validated, even if everything's correct, nothing happens upon clicking submit. I even have an alert pop up if with the captcha result, just for middle-layer debugging purposes. I want to do all of my validation clientside; none serverside. However, going to be tough if I can't get my god damn form to submit. I've been puzzled by this for close to 36 hours straight. I can't see, and I'm going to get some rest and hope that there is some useful insight on my problem when I return. html form: Code: <form id="f1" name="form1" onsubmit="validate_form(this); return false;" action="register" method="post">
<table cellspacing="5" style="border: 2px solid black;">
<tr>
<td valign="top">
<table cellspacing="5">
<tr>
<td>*First name</td>
<td align="right"><span id="valid_one"></span></td>
<td><input type="text" style="width: 320px;" id="fn" name="fn" onBlur="validate_one();"></td>
</tr>
<tr>
<td align="left">*Last name</td>
<td align="right"><span id="valid_two"></span></td>
<td><input type="text" style="width: 320px;" id="ln" name="ln" onBlur="validate_two();"></td>
</tr>
<tr>
<td align="left">*Email address</td>
<td align="right"><span id="result"></span></td>
<td><input type="text" style="width: 320px;" id="mailfield" name="email" onBlur="startRequest();"></td>
</tr>
<tr>
<td align="left">*Phone number</td>
<td align="right"><span id="valid_three"></span></td>
<td><input type="text" style="width: 320px;" id="pn" name="pn" onBlur="validate_three();"></td>
</tr>
<tr>
<td align="left">*City/Town</td>
<td align="right"><span id="valid_four"></span></td>
<td><input type="text" style="width: 320px;" id="c" name="c" onBlur="validate_four();"></td>
</tr>
<tr>
<td></td>
<td></td>
<td>
<select name="s">
<option value="AL">Alabama
<option value="AK">Alaska
<option value="AZ">Arizona
<option value="AR">Arkansas
<option value="CA">California
<option value="CO">Colorado
<option value="CT">Connecticut
<option value="DE">Delaware
<option value="FL">Florida
<option value="GA">Georgia
<option value="HI">Hawaii
<option value="ID">Idaho
<option value="IL">Illinois
<option value="IN">Indiana
<option value="IA">Iowa
<option value="KS">Kansas
<option value="KY">Kentucky
<option value="LA">Louisiana
<option value="ME">Maine
<option value="MD">Maryland
<option value="MA">Massachusetts
<option value="MI">Michigan
<option value="MN">Minnesota
<option value="MS">Mississippi
<option value="MO">Missouri
<option value="MT">Montana
<option value="NE">Nebraska
<option value="NV">Nevada
<option value="NH">New Hampshire
<option value="NJ">New Jersey
<option value="NM">New Mexico
<option value="NY">New York
<option value="MC">North Carolina
<option value="ND">North Dakota
<option value="OH">Ohio
<option value="OK">Oklahoma
<option value="OR">Oregon
<option value="PA">Pennsylvania
<option value="RI">Rhode Island
<option value="SC">South Carolina
<option value="SD">South Dakota
<option value="TN">Tennessee
<option value="TX">Texas
<option value="UT">Utah
<option value="VT">Vermont
<option value="VA">Virginia
<option value="WA">Washington
<option value="WV">West Virginia
<option value="WI">Wisconsin
<option value="WY">Wyoming
</select>
</td>
</tr>
<tr>
<td>
<br>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td><span id="error"></span></td>
</tr>
<tr>
<td valign="top">*Anti-Spam Verification</td>
<td></td>
<td id="reCaptcha"></td>
</tr>
</table>
</td>
<td valign="top">
<table cellspacing="5">
<tr>
<td align="left">*Affiliation</td>
<td align="right"><span id="valid_five"></span></td>
<td><input type="text" style="width: 320px;" id="affl" name="affl" onBlur="validate_five();"></td>
</tr>
<tr>
<td align="left">*Research Area:</td>
<td align="right"><span id="valid_six"></span></td>
<td><input type="text" style="width: 320px;" id="ra" name="ra" onBlur="validate_six();"></td>
</tr>
<tr>
<td valign="top" align="left">*Research Overview</td>
<td align="right"><span id="valid_seven"></span></td>
<td><textarea cols="38" rows="6" id="ro" name="ro" onKeyDown="limitText(this.form.ro,this.form.countdown,500)" onKeyUp="limitText(this.form.ro,this.form.countdown,500)" onBlur="validate_seven();"></textarea></td>
</tr>
<tr>
<td></td>
<td></td>
<td><font size="1">You have <input readonly type="text" name="countdown" size="1" value="500"> characters remaining.</font></td>
</tr>
<tr>
<td align="left">*Talk Availability</td>
<td></td>
<td>
<input type="radio" name="ta" value="In person">In person
<input type="radio" name="ta" value="Online">Online
<input type="radio" name="ta" value="Both" checked>Both
</td>
</tr>
<tr>
<td align="left" valign="top">Links</td>
<td></td>
<td>
<table id="linkTable" border="0">
<td><input type="text" style="width: 320px;" name="link"></td>
<td><div id="result"></div></td>
</table>
</td>
<td align="left" valign="top"><input type="button" value="Add Link" onclick="addLink('linkTable')"></td>
</tr>
<tr>
<td></td>
<td><span style="color: red;"></span></td>
</tr>
</table>
</td>
</tr>
</table>
<br />
<input type="submit" id="submit" name="submit" value="Submit Form">
</form>
Javascript file: Code: /*
* script.js - ajax and table functions
*/
var xmlHttp; // global instance of XMLHttpRequest
var xmlHttp2; // second for captcha functions
var validAjax = new Boolean();
var validCaptcha = new Boolean();
var valid_one = new Boolean();
var valid_two = new Boolean();
var valid_three = new Boolean();
var valid_four = new Boolean();
var valid_five = new Boolean();
var valid_six = new Boolean();
var valid_seven = new Boolean();
function init() {
showRecaptcha('reCaptcha');
// Separate booleans for AJAX funcs
validAjax = false;
validCaptcha = false;
// Booleanse for fields that don't require servlet validation
valid_one = false;
valid_two = false;
valid_three = false;
valid_four = false;
valid_five = false;
valid_six = false;
valid_seven = false;
}
function showRecaptcha(element) {
Recaptcha.create("6Le1a8ESAAAAAGtxX0miZ2bMg0Wymltnth7IG-Mj", element, {theme: "red", callback: Recaptcha.focus_response_field});
}
function validate_form() {
if (valid_one && valid_two && valid_three && valid_four && validEmail) {
startCaptchaRequest();
if (validCaptcha) {
return true;
}
}
else {
alert("Submission contains errors. Please fill out all required fields before submitting.");
return false;
}
}
function validate_one() {
if (document.getElementById("fn").value == 0) {
valid_one = false;
document.getElementById("valid_one").innerHTML = "No";
}
else {
valid_one = true;
document.getElementById("valid_one").innerHTML = "";
}
}
function validate_two() {
if (document.getElementById("ln").value == 0) {
valid_two = false;
document.getElementById("valid_two").innerHTML = "No";
}
else {
valid_two = true;
document.getElementById("valid_two").innerHTML = "";
}
}
function validate_three() {
if (document.getElementById("pn").value == 0) {
valid_three = false;
document.getElementById("valid_three").innerHTML = "No";
}
else {
valid_three = true;
document.getElementById("valid_three").innerHTML = "";
}
}
function validate_four() {
if (document.getElementById("c").value == 0) {
valid_four = false;
document.getElementById("valid_four").innerHTML = "No";
}
else {
valid_four = true;
document.getElementById("valid_four").innerHTML = "";
}
}
function validate_five() {
if (document.getElementById("affl").value == 0) {
valid_five = false;
document.getElementById("valid_five").innerHTML = "No";
}
else {
valid_five = true;
document.getElementById("valid_five").innerHTML = "";
}
}
//
//function validate_six() {
// if (document.getElementById("ra").value == 0) {
// valid_six = false;
// document.getElementById("valid_six").innerHTML = "No";
// }
// else {
// valid_six = true;
// document.getElementById("valid_six").innerHTML = "";
// }
//}
//
//function validate_seven() {
// if (document.getElementById("ro").value == 0) {
// valid_seven = false;
// document.getElementById("valid_seven").innerHTML = "No";
// }
// else {
// valid_seven = true;
// document.getElementById("valid_seven").innerHTML = "";
// }
//}
function addLink(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "text";
element1.name = "link" + rowCount;
element1.style.width = "320px";
cell.appendChild(element1);
}
function limitText(limitField, limitCount, limitNum) {
if (limitField.value.length > limitNum) {
limitField.value = limitField.value.substring(0, limitNum);
}
else {
limitCount.value = limitNum - limitField.value.length;
}
}
function createXmlHttpRequest() {
if(window.ActiveXObject) {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest) {
xmlHttp=new XMLHttpRequest();
}
}
function startRequest() {
createXmlHttpRequest();
var param1 = document.getElementById('mailfield').value;
if (param1 == "") {
validEmail = false;
document.getElementById("result").innerHTML = "Blank";
}
else {
xmlHttp.open("GET", "http://localhost:1979/PolarSpeakers/servlet/mailCheck.do?e=" + param1, true)
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.send(null);
}
}
function handleStateChange() {
if(xmlHttp.readyState==4) {
if(xmlHttp.status==200) {
var message =
xmlHttp.responseXML
.getElementsByTagName("valid")[0]
.childNodes[0].nodeValue;
if (message == "Unregistered") {
validEmail = true;
document.getElementById("result").style.color = "green";
}
else {
validEmail = false;
document.getElementById("result").style.color = "red";
}
document.getElementById("result").innerHTML = message;
}
else {
alert("Error checking e-mail address - " + xmlHttp.status +
" : " + xmlHttp.statusText);
}
}
}
function createCaptchaRequest() {
if(window.ActiveXObject) {
xmlHttp2=new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest) {
xmlHttp2=new XMLHttpRequest();
}
}
function startCaptchaRequest() {
alert('made it to captcha requeswt');
createCaptchaRequest();
var param1 = Recaptcha.get_challenge();
var param2 = Recaptcha.get_response();
xmlHttp2.open("POST", "http://localhost:1979/PolarSpeakers/servlet/captchaCheck.do?c=" + param1 + "&r=" + param2, true)
xmlHttp2.onreadystatechange = handleStateChangeCaptcha;
xmlHttp2.send(null);
}
function handleStateChangeCaptcha() {
if(xmlHttp2.readyState==4) {
if(xmlHttp2.status==200) {
var message =
xmlHttp2.responseXML
.getElementsByTagName("result")[0]
.childNodes[0].nodeValue;
if (message == "Valid") {
alert("captcha valid");
validCaptcha = true;
}
else {
document.getElementById("error").innerHTML = message;
validCaptcha = false;
}
}
else {
alert("Error checking captcha validity - " + xmlHttp2.status +
" : " + xmlHttp2.statusText);
}
}
}
I have a order form page and on submitting it opens a new web page that displays the order totals. Below is my code and most probably wrong but for me it seems logic. Please assist. Order Form: Code: <td colspan="1" height="120" align="left"> <select style="margin-left: 60px; background-color: #00FF77;" name="prod_bed_359" onchange="calculateValue(this.form)"> <option value="0">0</option> <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> </select> R359</td></tr> New page I called a unction to print: Code: function itemsOrdered() {
var beds = document.forms[2].prod_bed_359.value;
document.write("<pre><strong>Description\t\tQuantity\tPrice</strong></pre>");
document.write("<pre>Doggie Bed\t\t" + beds + "</pre>");
}
This is still basic as I need to get this right before adding the prices and totals which is also extracted from the order page. Hello all, I have a multistep jquery form that validates user input and then should send me an email. Problem is, right now, I can only get it to validate the first page, then it sends the email before the rest of the pages are viewed. I'm just trying to delay the submission of the form until the "submit_fourth" button is pressed. I've got $25 via paypal for the one who sticks with this one for long enough to come up with a workable solution. Here is my code... I know it's a lot, but I wasn't sure how much would be helpful. HTML code is in the second post in this thread (it was just too much to fit in one go). Cheers! -Dave The Javascript: Code: $(function validateForm(){
//original field values
var field_values = {
//id : value
'name' : 'your name',
'email' : 'email',
'phone' : '(555) 123-4567',
'other' : 'other',
'detail' : 'project overview'
};
//inputfocus
$('input#name').inputfocus({ value: field_values['name'] });
$('input#email').inputfocus({ value: field_values['email'] });
$('input#phone').inputfocus({ value: field_values['phone'] });
$('input#other').inputfocus({ value: field_values['other'] });
$('input#detail').inputfocus({ value: field_values['detail'] });
//reset progress bar
$('#progress').css('width','0');
$('#progress_text').html('0% Complete');
//first_step
$('form').submit(function(){ });
$('#submit_first').click(function(){
//remove classes
$('#first_step input').removeClass('error').removeClass('valid');
//ckeck if inputs aren't empty
var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
var fields1 = $('#first_step input[type=text]');
var error = 0;
fields1.each(function(){
var value = $(this).val();
if( value.length<5 || value==field_values[$(this).attr('id')] || ( $(this).attr('id')=='email' && !emailPattern.test(value) ) ) {
$(this).addClass('error');
$(this).effect("shake", { times:3 }, 50);
error++;
} else {
$(this).addClass('valid');
}
});
if(error <= 0) {
//update progress bar
$('#progress_text').html('25% Complete');
$('#progress').css('width','85px');
//slide steps
$('#first_step').slideUp();
$('#second_step').slideDown();
} else
return false;
});
$('#back_second').click(function(){
//update progress bar
$('#progress_text').html('0% Complete');
$('#progress').css('width','0px');
//slide steps
$('#second_step').slideUp();
$('#first_step').slideDown();
});
$('#submit_second').click(function(){
//remove classes
$('#second_step input').removeClass('error').removeClass('valid');
var fields2 = $('#second_step input[textarea]');
var error = 0;
fields2.each(function(){
var value = $(this).val();
if( value.length<5 || value==field_values[$(this).attr('id')] ) {
$(this).addClass('error');
$(this).effect("shake", { times:3 }, 50);
error++;
} else {
$(this).addClass('valid');
}
});
if(error <= 0) {
//update progress bar
$('#progress_text').html('50% Complete');
$('#progress').css('width','170px');
//slide steps
$('#second_step').slideUp();
$('#third_step').slideDown();
} else
return false;
});
$('#back_third').click(function(){
//update progress bar
$('#progress_text').html('25% Complete');
$('#progress').css('width','85px');
//slide steps
$('#third_step').slideUp();
$('#second_step').slideDown();
});
$('#submit_third').click(function(){
//update progress bar
$('#progress_text').html('75% Complete');
$('#progress').css('width','255px');
//prepare the fourth step
var fields3 = new Array(
$('#time').val(),
$('#budget').val()
);
var fields2half = new Array(
$('#detail').val()
);
var fields2 = new Array(
$('#other').val(),
$('#pages').val()
);
var fields1 = new Array(
$('#name').val(),
$('#email').val(),
$('#phone').val(),
$('#contact').val(),
$('#url').val()
);
var tr = $('#fourth_step tr');
tr.each(function(){
//alert( fields[$(this).index()] )
$(this).children('.1 td:nth-child(2)').html(fields1[$(this).index()]);
$(this).children('.2 td:nth-child(2)').html(fields2[$(this).index()]);
$(this).children('.2half td:nth-child(2)').html(fields2half[$(this).index()]);
$(this).children('.3 td:nth-child(2)').html(fields3[$(this).index()]);
});
//slide steps
$('#third_step').slideUp();
$('#fourth_step').slideDown();
});
$('#back_fourth').click(function(){
//update progress bar
$('#progress_text').html('50% Complete');
$('#progress').css('width','170px');
//slide steps
$('#fourth_step').slideUp();
$('#third_step').slideDown();
});
$('#submit_fourth').click(function(){
//send information to server
//update progress bar
$('#progress_text').html('100% Complete');
$('#progress').css('width','339px');
//slide steps
$('#fifth_step').slideUp();
$('#fourth_step').slideDown();
if(error <= 0) {
return true
}
else{
return false
}
});
});
Hi, I have a working contact form with 3 of the fields requiring validation and they work well. I have added extra fields to the form (StatusClass, Project, CameFrom). These 3 fields return fine but I need to validated them. My problem is that the new fields don't show in the behaviours/validate panel even though they are within the form tag. Can anyone give me any help and advice as to how to accomplish this? Many thanks Code below.... Code: <script type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_validateForm() { //v4.0
var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=MM_findObj(args[i]);
if (val) { nm=val.name; if ((val=val.value)!="") {
if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address.\n';
} else if (test!='R') { num = parseFloat(val);
if (isNaN(val)) errors+='- '+nm+' must contain a number.\n';
if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
min=test.substring(8,p); max=test.substring(p+1);
if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';
} } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; }
} if (errors) alert('The following error(s) occurred:\n'+errors);
document.MM_returnValue = (errors == '');
}
//-->
</script
> Code: <form action="contact_us.asp" method="post" name="contact" target="_parent" class="contentText" id="contact" onsubmit="MM_validateForm('FullName','','R','Telephone','','RisNum','Email','','RisEmail');return document.MM_returnValue">
<table width="100%" border="0" cellspacing="5" cellpadding="0">
<tr>
<td width="54%" class="subHeader">Full Name* </td>
<td width="46%" class="subHeader"><input name="FullName" type="text" id="FullName" /></td>
</tr>
<tr>
<td class="subHeader">Company Name </td>
<td class="subHeader"><input name="CompanyName" type="text" id="CompanyName" /></td>
</tr>
<tr>
<td class="subHeader">Address</td>
<td class="subHeader"><input name="Address1" type="text" id="Address1" /></td>
</tr>
<tr>
<td class="subHeader"> </td>
<td class="subHeader"><input name="Address2" type="text" id="Address2" /></td>
</tr>
<tr>
<td class="subHeader"> </td>
<td class="subHeader"><input name="Address3" type="text" id="Address3" /></td>
</tr>
<tr>
<td class="subHeader">Postcode</td>
<td class="subHeader"><input name="Postcode" type="text" id="Postcode" /></td>
</tr>
<tr>
<td class="subHeader">Telephone Number* </td>
<td class="subHeader"><input name="Telephone" type="text" id="Telephone" /></td>
</tr>
<tr>
<td class="subHeader">Mobile Number </td>
<td class="subHeader"><input name="Mobile" type="text" id="Mobile" /></td>
</tr>
<tr>
<td height="25" class="subHeader">Email Address* </td>
<td class="subHeader"><input name="Email" type="text" id="Email" /></td>
</tr>
<tr>
<td height="30" class="subHeader">Status*</td>
<td class="subHeader"><select name="StatusClass" id="StatusClass">
<option selected="selected">Please Choose</option>
<option>Architect</option>
<option>Interior Designer</option>
<option>Private Client</option>
<option>Student</option>
<option>Trade Enquiry</option>
</select> </td>
</tr>
<tr>
<td height="23" class="subHeader">Project*</td>
<td class="subHeader"><select name="Project" size="1" id="Project">
<option selected="selected">Please Choose</option>
<option>Planning Stages</option>
<option>New Build</option>
<option>Refurbishment</option>
<option>Barn Conversion</option>
<option>No project - information only</option>
</select> </td>
</tr>
<tr>
<td height="37" class="subHeader">How did you hear about us?*</td>
<td class="subHeader"><select name="CameFrom" size="1" id="CameFrom">
<option selected="selected">Please Choose</option>
<option>Web Search</option>
<option>Grand Designs</option>
<option>Living Etc</option>
<option>Home Building & Renovation</option>
<option>Architect</option>
<option>Friend/Family</option>
<option>Magazine/Editorial</option>
<option>Newspaper Article</option>
<option>Trade Show/Exhibition</option>
<option>Other</option>
</select></td>
</tr>
<tr>
<td height="24" class="subHeader">Brochure Request </td>
<td class="subHeader"><input name="Brochure" type="checkbox" id="Brochure" value="checkbox" /></td>
</tr>
<tr>
<td class="subHeader">Message</td>
<td class="subHeader"><span class="style4">
<textarea name="Message" id="Message"></textarea>
</span></td>
</tr>
<tr>
<td class="subHeader"> </td>
<td class="subHeader"><input name="Submit" type="submit" value="Submit" /></td>
</tr>
<tr>
<td colspan="2" class="subHeader"><em>* Required fields</em></td>
</tr>
</table>
</form>
I've set up a mock registration form page so I can learn a bit about javascript's form validation. (newbie) I want to try to attempt to style the border of a form field green when the user enters the correct info into the form text field and red on all other fields if the user doesnt enter any info into them. When i test it, enter the right info into the username field, leave the others blank, and hit the submit button it styles the username field green ok but it doesnt make the next fields (password and so on) red. Could someone please explain what I am doing wrong? here is my code so far... Note: just for testing purposes I've put return false on everything so it displays a message when everythings ok. Code: ....
<script type="text/javascript">
window.onload = function() {
document.forms[0].username.focus();
}
function validate(form)
{
var form = document.getElementById("reg");
var e = document.getElementById("error");
e.style.background = "red";
for(var i = 0; i < form.elements.length; i++)
{
var el = form.elements[i];
if(el.type == "text" || el.type == "password")
{
if(el.value == "")
{
e.innerHTML = "Please fill in all fields!";
el.style.border = "1px solid red";
el.focus();
return false;
} else {
el.style.border = "1px solid green";
return false;
}
}
}
var un = form.username;
un.value = un.value.replace(/^\s+|\s+$/g,"");
if((un.value.length < 3)|| (/[^a-z0-9\_]/gi.test(un.value)))
{
e.innerHTML = "Only letters,numbers and the underscore are allowed (no spaces) - 3-16 characters";
un.focus();
return false;
}
var pw = form.password;
pw.value = pw.value.replace(/^\s+|\s+$/g,"");
if((pw.value.length < 3) || (/[^a-z0-9]/gi.test(pw.value)))
{
e.innerHTML = "Only letters and numbers are allowed (no spaces) - 3-16 characters";
pw.focus();
return false;
}
e.innerHTML = "You filled in all the fields, well done!";
e.style.background = "green";
return false;
}
</script>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>My Cool Website</h1>
</div>
<div id="content">
<div class="padding">
<h2>Registration</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>
<form id="reg" action="#" method="post" onsubmit="return validate(this)">
<div id="error"></div>
<div><label for="username">Username</label></div>
<div><input type="text" name="username" id="username" size="30" maxlength="16" /></div>
<div><label for="password">Password</label></div>
<div><input type="password" name="password" id="password" size="30" maxlength="16" /></div>
<div><label for="c_password">Confirm Password</label></div>
<div><input type="password" name="c_password" id="c_password" size="30" maxlength="16" /></div>
<div><label for="email">Email address</label></div>
<div><input type="text" name="email" id="email" size="30" maxlength="200" /></div>
<div><label for="c_email">Confirm Email address</label></div>
<div><input type="text" name="c_email" id="c_email" size="30" maxlength="200" /></div>
<div><label for="firstname">First name</label></div>
<div><input type="text" name="firstname" id="firstname" size="30" maxlength="100" /></div>
<div><label for="surname">Surname</label></div>
<div><input type="text" name="surname" id="surname" size="30" maxlength="100" /></div>
<div><label for="gender">Gender</label></div>
<div>
<div><input type="radio" name="gender" id="gender" value="m" checked="checked" />Male</div>
<div><input type="radio" name="gender" value="f" />Female</div>
</div>
<div><input type="submit" value="Register" name="submit" /></div>
</form>
</div>
</div>
<div id="footer">
<p>Copyright © 2009 My Cool Website</p>
</div>
</div>
</body>
</html>
Hi guys, Been stuck for a few days with this scenario. Any help? The alert box appears on an error. But the submitting won't stop. The details are submitted and the form is processed. Any help is greatly appreciated... Code: <html>
<head>
<script type="text/javascript" src="email_helper/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
// General options
mode : "textareas",
theme : "simple"
});
</script>
<script language="javascript">
function MM_openBrWindow(theURL,winName,features) {
window.open(theURL,winName,features);
}
function err_check(){
var email = document.getElementById('to_email').value;
if(email.length==0){
alert('Please Enter Email Address');
return false;
}
var AtPos = email.indexOf("@")
var StopPos = email.lastIndexOf(".")
if (AtPos == -1 || StopPos == -1) {
alert("Please Enter Valid Email Address");
document.getElementById('email').focus();
return false;
}
email = document.getElementById('cc_email').value;
if(email.length != 0){
var AtPos = email.indexOf("@")
var StopPos = email.lastIndexOf(".")
if (AtPos == -1 || StopPos == -1) {
alert("Please Enter Valid Email Address");
document.getElementById('email').focus();
return false;
}
}
var answer = confirm ("Send E-Mail?");
if (!answer){
return false;
}
}
</script>
<!-- /TinyMCE -->
<style type="text/css">
body, table, td, th{
background-color:#CCCCCC;
font-family: Arial;
font-size:14px;
}
.que{
font-weight:bold;
}
</style>
</head>
<body>
<form method="post" enctype="multipart/form-data">
<?php
include 'library/database.php';
include 'library/opendb.php';
$query = mysql_query("SELECT email,contact,mobile FROM users WHERE user_id='$uid'") or die(mysql_error());
$row = mysql_fetch_row($query);
$from_email = $row[0];
$from_person = $row[1];
$from_mobile = $row[2];
$query = mysql_query("SELECT customer_id FROM campaign_summary WHERE camp_id='$camp_id'") or die(mysql_error());
$row = mysql_fetch_row($query);
$cusid = $row[0];
$query = mysql_query("SELECT email FROM client_info WHERE comp_id='$cusid'") or die(mysql_error());
$row = mysql_fetch_row($query);
$toer = $row[0];
include 'library/closedb.php';
?>
<table width="100%" border="0">
<tr><td rowspan="4"><input type="submit" name="send_email" id="send_email" style="height:50px; width:100px;" value="SEND" onClick="return err_check();" /></td><td><span class="que">From : </span></td><td colspan="3"><?php echo $from_email; ?><input type="hidden" name="from_mail" id="from_mail" /><input type="hidden" name="camp_id" id="camp_id" value="<?php echo $camp_id;?>"/></td></tr>
<tr><td><span class="que">To : </span></td><td colspan="3"><input name="to_email" id="to_email" style="width:250px;" value="<?php echo $toer;?>"/></td></tr>
<tr><td><span class="que">CC : </span></td><td colspan="3"><input name="cc_email" id="cc_email" style="width:250px;"/></td></tr>
<tr><td><span class="que">Subject : </span></td><td colspan="3"><input style="width:300px;" name="subject" id="subject" /></td></tr>
<tr><td rowspan="1" colspan="2"> </td><td><input type="checkbox" name="ori_pdf" id="ori_pdf" checked /> PDF Quotation</td><td> </td><td> </td></tr><tr><td colspan="2"><span class="que">Credit Application</span></td><td><input type="checkbox" name="corporate" id="corporate"/>Corporate</td><td><input type="checkbox" name="individual" id="individual" />Individual</td><td><input type="checkbox" name="cash" id="cash" />Cash Account</td>
</tr>
<tr>
<td colspan="2" rowspan="3"></td><td><input type="checkbox" name="tabloid" id="tabloid" />Tabloid Example</td>
<td><input type="checkbox" name="broadsheet" id="broadsheet" />Broadsheet Example</td></tr>
<tr><td><input type="checkbox" name="colmt" id="colmt" />Column Sizes Tabloid</td>
<td><input type="checkbox" name="colmb" id="colmb" />Column Sizes Broadsheet</td></tr>
<tr><td><input type="checkbox" name="maps" id="maps" />Maps / Distribution</td><td colspan="2" align="right">External Attachments <input id="upload_file" name="upload_file" type="file"/> </td></tr>
<tr><td colspan="2"><span class="que">Message :</span></td><td colspan="3">
<textarea id="elm1" name="elm1" rows="15" cols="80" style="width: 100%">
<?php
echo "<br><br><br>" . $from_person . "<br>" . $from_mobile;
?>
</textarea>
</td></tr>
</table>
</form>
</body>
</html>
I'm using the jquery plugin found here. I love the look but I have a form that uses functions like this: Code: function cascadeCountry(value) {
if (document.getElementById("srchlookstate_province") != null) {
http.open('get', 'cascade_search.php?a=country&v=' + value );
document.getElementById('srchlookstate_province').innerHTML=" "+loadingTag;
http.onreadystatechange = handleResponse;
http.send(null);
}
}
So, when you select a country and it retrieves the state/province text input, the jquery css is not applied to it. Is there something I need to add to the code above or to the jquery initialization code he Code: $(function() {
$("form.jqtransform").jqTransform();
});
I'm a long time lurker on here just barely created an account to ask this question. I work at a call center, and we use different webapps to fill out tickets. One I've used for a long time allows dynamically updating forms with javascript. I have a whole bunch of bookmarked javascript injections like: Code: javascript:if((top.detail.findObj('X31').value="Inquiry")!="");
That code will fill out most everything in that ticket, leaving me to fill in the details. I have one of those for all of the most common tickets, and can create and finish a ticket in less than 30 seconds when it takes others 3-4 minutes. I recently switched to a different system and I'm having trouble with my code. I'm a noob at javascript for sure, but I'm not new to programming. Anyway any pointers would be nice. The system we use doesn't allow me to see the source... I'm not sure how to explain it. It loads everything in a frame. In chrome I can right click then inspect element and get the ID but it the above javascript doesn't work. Examples: Old app source ex: Code: <label for="X31">Category:</label> was all i needed new app(before the body code is just code for the login form, etc): Code: <body onLoad="startit()" onUnload="stopit()">
</body>
<div align="center" valign="center" id="LoadMessageID" style="position: relative; top:40%; color:#0069A5; font-size:100% ;">
<img src="/arsys/shared/images/Progress_NonModal-circle.gif" alt="wait image"/>
Loading...
</div>
</html>
formloader: Code: <form name="form1" action="/arsys/forms/bmcitsm/HPD:Incident+Management+Console/Default+User+View+(Support)/?cacheid=a22a36a8" method="post"> example of inspect element in chrome (something i want to change with javascript injection): Code: <input id="arid301602600" type="text" class="text " style="top:0; left:0; width:225; height:21;" readonly=""> I have been hard at work coding a fancy JQuery form validation script. Problem is, when I run validation on my form, it seems to work, but no email is sent. But when I disable validation, the email sends just fine. I am fairly new to JavaScript, and need some help pinpointing where my error is. Here is the code. Code: // BEGIN JAVASCRIPT
$(function(){
//original field values
var field_values = {
//id : value
'name' : 'your name',
'email' : 'your email',
'yourmessage' : 'I would like to inquire about'
};
//inputfocus
$('input#name').inputfocus({ value: field_values['name'] });
$('input#email').inputfocus({ value: field_values['email'] });
$('textarea#yourmessage').inputfocus({ value: field_values['yourmessage'] });
//form validation
$('form').submit(function validateForm(){ return false }); // removing this return false seems to mess up validation
$('#submit').click(function(){
//remove classes
$('#sendamessage input').removeClass('error').removeClass('valid');
//ckeck if inputs aren't empty
var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
var fields1 = $('#sendamessage input[type=text],#sendamessage textarea');
var error = 0;
fields1.each(function(){
var value = $(this).val();
if( value.length<2 || value==field_values[$(this).attr('id')] || ( $(this).attr('id')=='email' && !emailPattern.test(value) ) ) {
$(this).addClass('error'); // css class
$(this).effect("shake", { times:3 }, 50);
error++;
} else {
$(this).addClass('valid'); // css class
}
});
if(!error) {
// this is where I get confused. How do I make this send the form?
alert('Data sent');
});
}
});
});
// END JAVASCRIPT
<form method="post" action="" onsubmit="return validateForm()" >
<input type="hidden" name="ccf_customhtml" value="1" />
<input type="hidden" name="success_message" value="Thank you for filling out our form!" />
<input type="hidden" name="destination_email" value="dauidus@gmail.com" />
<input type="hidden" name="required_fields" value="" />
<label for="name">Name</label>
<input type="text" name="name" id="name" value="your name" />
<label for="email">Email</label>
<input type="text" name="email" id="email" value="your email" />
<label for="yourmessage">Your Message</label>
<textarea name="yourmessage" id="yourmessage" value="I would like to inquire about" style="margin-bottom:20px;" />I would like to inquire about</textarea>
<input class="send submit" id="submit" type="submit" value="" style="position: relative; bottom: -70px; left: 25px; " />
</form>
I am using a WordPress plugin to automatically send the contents of the form to email. It works without the javascript enabled. But when I turn on JS the form gets validated, but no email is sent. Please let me know if I should include anything else here... I've been looking at this code so much that I'm having a hard time doing it with fresh eyes. The problem page is on http://new.dauidusdesign.com/contact/. FYI, I am also looking to make this work with the 'request a quote' link on the same page. Cheers! -Dave So I have a little calendar widget on my site, for people to choose their dates for a reservation system. They then click a 'Book Now' button which creates a dynamic url (using their start date and the number of dates) to the booking engine. The problem is, the way it accomplishes this (window.location.href=), breaks cross-domain tracking on Google Analytics. And I'm not smart enough to figure out how to do it any other way. What I'd like to do is have clicking the Book Now button change the URL in the form action within the form with ID resForm, and then submit the form. I'm hoping someone can help me edit the form so that it accomplishes this. I'd be incredibly thankful. This is what I currently have: Code: <script>
jQuery(document).ready(function($) {
$(".book-now").click(function() {
if($('#check-in').length > 0 && $('#DepartureDate').val() != '') {
var data = $('#check-in').val();
var arr = data.split('/');
var datac = $('#DepartureDate').val();
var arr2 = datac.split('/');
var oneDay = 24*60*60*1000; // hours*minutes*seconds*milliseconds
var firstDate = new Date(arr[2],arr[0] -1,arr[1]);
var secondDate = new Date(arr2[2],arr2[0] -1,arr2[1]);
var diffDays = Math.round((firstDate.getTime() - secondDate.getTime())/(oneDay));
if ((diffDays) < 0)
{
diffDays = Math.abs(diffDays);
var link = "https://res.windsurfercrs.com/bbe/page1.aspx?propertyID=13841&checkin=" + arr[0] + "/" + arr[1] + "/" + arr[2] + "&nights=" + diffDays;
console.log(link);
window.location.href= link;
}
else
{
alert ('Please fill in correct Check-In and Check-Out dates. The Check-In date must be before the Check-Out date.');
}
} else {
alert ('Please fill in a Check-In and Check-Out date, thanks!');
}
});
});
</script>
The form looks like this: Code: <form action="#" onSubmit="_gaq.push(['_linkByPost',this]);" method="post" id="resForm"> <input type='text' name="checkin" id="check-in" readonly="readonly" style="cursor: text" data-default="MM/DD/YYYY" class='arrivaldate'/> <input name="checkout" id="DepartureDate" readonly="readonly" style="cursor: text" data-default="MM/DD/YYYY" class='departuredate'/> <input type="button" value="BOOK NOW" class='book-now' /> </form> Reply With Quote 01-25-2015, 12:46 AM #2 Old Pedant View Profile View Forum Posts Supreme Master coder! Join Date Feb 2009 Posts 28,310 Thanks 82 Thanked 4,754 Times in 4,716 Posts Just call the _gaq() function manually. Code: _gaq.push(['_linkByPost',document.getElementBy("resForm")])
window.location.href= link;
Hello, I have 2 things I'm trying to figure out. 1. First form on the page has questions with radio buttons. Each radio's value is a number so a score is assessed at the end. 2. Second form on the page is an email the admin form, which duplicates the score in one field. Question: I would like to know how to write the form results to a text area in second form. However, I can't do this for one, and secondly, the value is a number, can I use labels? Here's the code I've 'made up' so far... JS (i know it's wrong) Code: <script LANGUAGE="JavaScript" type="text/javascript">
function display() {
message = "<ul><li><b>Question 1: </b>" + document.quizform.Q1.label;
message = "<li><b>Question 2: </b>" + document.quizform.Q2.label;
message = "<li><b>Question 3: </b>" + document.quizform.Q3.label;
message = "<li><b>Question 4: </b>" + document.quizform.Q4.label;
message = "<li><b>Question 5: </b>" + document.quizform.Q5.label;
message = "<li><b>Question 6: </b>" + document.quizform.Q6.label + "</ul>";
document.write(message);
}
</script>
Form field example: Code: Question 1:<BR> <label for="Yes"><input type="radio" name="Q1" value="0" checked></label>Yes<br> <label for="No"><input type="radio" name="Q1" value="10"></label>No<br> <label for="I don't know"><input type="radio" name="Q1" value="10"></label>I don't know<br> I am no javascript expert, very much a beginner. I am trying to incorporate some into a web-based form. The problem is the button I created to add extra fields does not work, and I can't find exactly where the problem is. I'm in need of some help from a javascript guru. Help me enjoy my Friday afternoon by solving this! The javascript is mostly borrowed and slightly altered, the "additem" I wrote myself so that is probably where the problem lies! Here is the html: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"/>
<title></title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript">
function showAsset(id,str)
{
if (str=="")
{
document.getElementById("assetinfo"+id).innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("assetinfo"+id).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getasset.php?q="+str,true);
xmlhttp.send();
}
var noFields = "5";
function additem()
{
var fieldrow = document.createElement('tr');
var fieldcolumn1 = document.createElement('td');
var fieldinput = document.createElement('input');
fieldinput.name = "asset";
fieldinput.onChange = "showAsset("+noFields+",this.value)";
var fieldcolumn2 = document.createElement('td');
fieldcolumn2.id = "assetinfo"+noFields;
fieldcolumn1.appendChild(fieldinput);
var fieldcolumns = fieldcolumn1 + fieldcolumn2;
fieldrow.appendChild(fieldcolumns);
var addbefore = document.getElementById('fieldend');
document.body.insertBefore(fieldrow, addbefore);
noFields = noFields++;
}
</script>
</head>
<body>
<form>
<table>
<tr>
<td><input name="asset" onChange="showAsset(1,this.value)"></td>
<td id="assetinfo1"></td>
</tr>
<tr>
<td><input name="asset" onChange="showAsset(2,this.value)"></td>
<td id="assetinfo2"></td>
</tr>
<tr>
<td><input name="asset" onChange="showAsset(3,this.value)"></td>
<td id="assetinfo3"></td>
</tr>
<tr>
<td><input name="asset" onChange="showAsset(4,this.value)"></td>
<td id="assetinfo4"></td>
</tr>
<tr>
<td><input name="asset" onChange="showAsset(5,this.value)"></td>
<td id="assetinfo5"></td>
</tr>
<tr id="fieldend">
<td><input id="addfield" type="button" value="add item" onClick="addfield()"></td>
</tr>
</table>
</form>
</body>
</html>
Here is the associated getasset.php: Code: <?php
$q=$_GET["q"];
$con = mysql_connect('localhost', 'root', 'root');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("assettracking", $con);
$sql="SELECT * FROM assets WHERE assetID = '".$q."'";
$result = mysql_query($sql);
while($row = mysql_fetch_array($result))
{
echo "<b>".$row['make'] ." ".$row['model'] ." - ".$row['serialnumber']."</b> | Status: ".$row['statusID']." | Comments: ".$row['comments'];
}
mysql_close($con);
?>
|
|||||||