Please help me divide the attached file seperating the html, javascript calculation & javascript validation. I just need to know what to seperate. [file name=form_code.txt size=21605]http://www.chronoengine.com/components/com_fireboard/uploaded/files/form_code.txt[/file]<br><br>Post edited by: [email]deons1@iafrica.com[/email], at: 2007/09/29 22:05
No files attached!!🙂
Hi, this is JS code :
this is HTML :
you should put this in the from tag attachment field :
function setSubTotal(packageName)
{
//Set SubTotal
var packageValue = document.getElementById(''+packageName+'').value;
document.getElementById('doses_total').value = packageValue;
current_cream = document.getElementById('cream_total').value;
document.getElementById('ex_postage').value = (current_cream*1) + (packageValue*1);
//Set Total
var postTotal = 0;
if(document.getElementById('Postal_overnight').checked)
{
postTotal = document.getElementById('Postal_overnight').value;
}
if(document.getElementById('Postal_registered').checked)
{
postTotal = document.getElementById('Postal_registered').value;
}
var finalTotal = (subTotal*1) + (postTotal*1);
document.getElementById('total').value = finalTotal;
}
function setSubTotal2(creamName)
{
// Set SubTotal - add cream subtotal
var creamValue = document.getElementById(creamName).value;
document.getElementById('cream_total').value = creamValue;
current_package = document.getElementById('doses_total').value;
document.getElementById('ex_postage').value = (current_package*1) + (creamValue*1);
//Set Total
var postTotal = 0;
if(document.getElementById('Postal_overnight').checked)
{
postTotal = document.getElementById('Postal_overnight').value;
}
if(document.getElementById('Postal_registered').checked)
{
postTotal = document.getElementById('Postal_registered').value;
}
var finalTotal = (subTotal*1) + (postTotal*1);
document.getElementById('total').value = finalTotal;
}
function setTotal(postalSelection, postalShow)
{
//Set Postage Amounts
var postTotal = document.getElementById(''+postalSelection+'').value;
document.getElementById(''+postalShow+'').value = postTotal;
//Get Postal Amount
var postTotal = 0;
if(document.getElementById('Postal_overnight').checked)
{
postTotal = document.getElementById('Postal_overnight').value;
document.getElementById('registered').value = "";
}
if(document.getElementById('Postal_registered').checked)
{
postTotal = document.getElementById('Postal_registered').value;
document.getElementById('overnight').value = "";
}
//Set Total
var subTotal = document.getElementById('ex_postage').value;
var finalTotal = (subTotal*1) + (postTotal*1);
document.getElementById('total').value = finalTotal;
}
function get_random()
{
var date = new Date();
var ranNum= Math.floor(Math.random()*100);
var ranTime = date.getTime();
document.getElementById('ref_no').value = ranTime +""+ ranNum;
}
function verify()
{
//total
if(document.getElementById('ex_postage').value == ""«»)
{
alert("Please select a Package."«»);
document.getElementById('2_doses').focus();
return false;
}
doses_total = document.getElementById('doses_total').value;
cream_total = document.getElementById('cream_total').value;
if ((doses_total == "0"«») && (cream_total == "0"«»)) {
alert("Please select a Package."«»);
return false;
}
if (document.getElement)
//postal
var postTotal = 0;
if(document.getElementById('Postal_overnight').checked)
{
postTotal = document.getElementById('Postal_overnight').value;
}
if(document.getElementById('Postal_registered').checked)
{
postTotal = document.getElementById('Postal_registered').value;
}
if(postTotal == 0)
{
alert("Please select a Postal Package."«»);
document.getElementById('Postal_overnight').focus();
return false;
}
//Client Details
if(document.getElementById('firstname').value == ""«»)
{
alert("Please enter your Name."«»);
document.getElementById('firstname').focus();
return false;
}
if(document.getElementById('surname').value == ""«»)
{
alert("Please enter your Surname."«»);
document.getElementById('surname').focus();
return false;
}
if(document.getElementById('contact_no').value == ""«»)
{
alert("Please enter your Contact Number."«»);
document.getElementById('contact_no').focus();
return false;
}
if(document.getElementById('email').value == ""«»)
{
alert("Please enter your Email Address."«»);
document.getElementById('email').focus();
return false;
}
else
{
//full email validation
var exclude=/[^@\-\.\w]|^[_@\.\-]|[\._\-]{2}|[@\.]{2}|(@)[^@]*\1/;
var check=/@[\w\-]+\./;
var checkend=/\.[a-zA-Z]{2,8}$/;
if(((document.getElementById('email').value.search(exclude) != -1)||(document.getElementById('email').value.search(check)) == -1)||(document.getElementById('email').value.search(checkend) == -1))
{
alert("Please enter a valid email address"«»);
document.getElementById('email').focus();
return false;
}
}
//Delivery Details
if(document.getElementById('add_1').value == ""«»)
{
alert("Please enter your Address."«»);
document.getElementById('add_1').focus();
return false;
}
if(document.getElementById('city').value == ""«»)
{
alert("Please enter your City."«»);
document.getElementById('city').focus();
return false;
}
if(document.getElementById('province').value == ""«»)
{
alert("Please enter your Province."«»);
document.getElementById('province').focus();
return false;
}
if(document.getElementById('code').value == ""«»)
{
alert("Please enter your Postal Code."«»);
document.getElementById('code').focus();
return false;
}
//Payment Options
var paymentOption = "";
if(document.getElementById('eft').checked)
{
paymentOption = document.getElementById('eft').value;
}
if(document.getElementById('cc').checked)
{
paymentOption = document.getElementById('cc').value;
//Credit Card Information
if(document.getElementById('cc_no').value == ""«»)
{
alert("Please enter your Credit Card Number."«»);
document.getElementById('cc_no').focus();
return false;
}
if(document.getElementById('cc_expiry').value == ""«»)
{
alert("Please enter your Credit Card Expiry Date."«»);
document.getElementById('cc_expiry').focus();
return false;
}
if(document.getElementById('cvv').value == ""«»)
{
alert("Please enter your Credit Card CVV Number."«»);
document.getElementById('cvv').focus();
return false;
}
if(document.getElementById('cc_name').value == ""«»)
{
alert("Please enter the name on the Credit Card."«»);
document.getElementById('cc_name').focus();
return false;
}
}
if(paymentOption == ""«»)
{
alert("Please select a Payment Option."«»);
document.getElementById('eft').focus();
return false;
}
//Card Type
var cardType = "";
if(document.getElementById('cc_visa').checked)
{
cardType = document.getElementById('cc_visa').value;
}
if(document.getElementById('cc_mastercard').checked)
{
cardType = document.getElementById('cc_mastercard').value;
}
if(cardType == ""«»)
{
alert("Please select a Card Type."«»);
document.getElementById('cc_visa').focus();
return false;
}
}
function ResetFields()
{
for(i=0; i<document.orderForm.elements.length; i++)
{
if(document.orderForm.elements[i].name != "ref_no"«»)
{
if(document.orderForm.elements[i].type=="radio"«»)
{
document.orderForm.elements[i].checked=false;
}
else if(document.orderForm.elements[i].type !="button" && document.orderForm.elements[i].type !="submit"«»)
{
document.orderForm.elements[i].value = "";
}
}
}
}this is HTML :
<p>
<object classid="clsid:«»D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="500" height="60">
<param name="movie" value="http://www.staminafit.eu/images/flash_header/banner.swf" />
<param name="quality" value="high" />
<embed src="http://www.staminafit.eu/images/flash_header/banner.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="500" height="60"></embed>
</object>
<br />
<br />
<img src="http://www.staminafit.eu/images/flash_header/order_online.jpg" width="500" height="35" /></p>
<input type="hidden" id="doses_total" value="0" />
<input type="hidden" id="cream_total" value="0" />
<table width="500" height="640" border="1" cellpadding="5" cellspacing="0" bordercolor="#FFFFFF" bgcolor="#CCCCCC">
<!--DWLayoutTable-->
<tr bgcolor="#FFFFFF">
<td height="31" colspan="4" bgcolor="#F3F3F3"><div align="center">ORDER STAMINAFIT </div></td>
</tr>
<tr>
<td width="179" height="31" bgcolor="#F3F3F3"><div align="center">Tablets</div></td>
<td colspan="2" valign="top" nowrap="nowrap" bgcolor="#F3F3F3"><div align="center">Package</div></td>
<td width="90" valign="top" nowrap="nowrap" bgcolor="#F3F3F3"><div align="center">Price</div></td>
</tr>
<tr>
<td rowspan="7" valign="middle" bgcolor="#F3F3F3"><div align="center"><img src="http://staminafit.eu/images/flash_header/box2.jpg" width="179" height="134" /></div></td>
<td height="34" colspan="2" valign="top" nowrap="nowrap" bgcolor="#F3F3F3"><div align="left">
<input id="2_doses" name="packages" type="radio" value="79" onclick="setSubTotal('2_doses');" />
2 Doses </div></td>
<td valign="top" nowrap="nowrap" bgcolor="#F3F3F3"><div align="right">R79 </div></td>
</tr>
<tr>
<td height="34" colspan="2" valign="top" nowrap="nowrap" bgcolor="#F3F3F3"><div align="left">
<input id="4_doses" name="packages" type="radio" value="158" onclick="setSubTotal('4_doses');" />
4 Doses </div></td>
<td valign="top" nowrap="nowrap" bgcolor="#F3F3F3"><div align="right">R158 </div></td>
</tr>
<tr>
<td height="34" colspan="2" valign="top" nowrap="nowrap" bgcolor="#F3F3F3"><div align="left">
<input id="8_doses" name="packages" type="radio" value="280" onclick="setSubTotal('8_doses');" />
8 Doses </div></td>
<td valign="top" nowrap="nowrap" bgcolor="#F3F3F3"><div align="right">R280</div></td>
</tr>
<tr>
<td height="34" colspan="2" valign="top" nowrap="nowrap" bgcolor="#F3F3F3"><div align="left">
<input id="16_doses" name="packages" type="radio" value="512" onclick="setSubTotal('16_doses');" />
16 Doses </div></td>
<td valign="top" nowrap="nowrap" bgcolor="#F3F3F3"><div align="right">R512</div></td>
</tr>
<tr>
<td height="34" colspan="2" valign="top" nowrap="nowrap" bgcolor="#F3F3F3"><div align="left">
<input id="32_doses" name="packages" type="radio" value="896" onclick="setSubTotal('32_doses');" />
32 Doses </div></td>
<td valign="top" nowrap="nowrap" bgcolor="#F3F3F3"><div align="right">R896 </div></td>
</tr>
<tr>
<td height="34" colspan="2" valign="top" nowrap="nowrap" bgcolor="#F3F3F3"><div align="left">
<input id="64_doses" name="packages" type="radio" value="1600" onclick="setSubTotal('64_doses');" />
64 Doses </div></td>
<td valign="top" nowrap="nowrap" bgcolor="#F3F3F3"><div align="right">R1600</div></td>
</tr>
<tr>
<td height="34" colspan="2" valign="top" nowrap="nowrap" bgcolor="#F3F3F3"><div align="left">
<input id="128_doses" name="packages" type="radio" value="2688" onclick="setSubTotal('128_doses');" />
128 Doses </div></td>
<td valign="top" nowrap="nowrap" bgcolor="#F3F3F3"><div align="right">R2688</div></td>
</tr>
<tr>
<td height="34" valign="middle" bgcolor="#F3F3F3"><div align="center">Cream</div></td>
<td height="34" colspan="2" valign="middle" nowrap="nowrap" bgcolor="#F3F3F3"><div align="center">Package</div></td>
<td valign="middle" nowrap="nowrap" bgcolor="#F3F3F3"><div align="center">Price</div></td>
</tr>
<tr>
<td rowspan="3" valign="middle" bgcolor="#F3F3F3"><div align="center"><img src="http://www.staminafit.eu/images/flash_header/cream.jpg" width="156" height="136" /></div></td>
<td height="34" colspan="2" valign="middle" nowrap="nowrap" bgcolor="#F3F3F3"><div align="left">
<input id="One_G2" name="creams" type="radio" value="295" onclick="setSubTotal2('One_G2');" />
One G2 Kit</div></td>
<td valign="middle" nowrap="nowrap" bgcolor="#F3F3F3"><div align="right">R295</div></td>
</tr>
<tr>
<td height="34" colspan="2" valign="middle" nowrap="nowrap" bgcolor="#F3F3F3"><div align="left">
<input id="Three_G2" name="creams" type="radio" value="796" onclick="setSubTotal2('Three_G2');" />
Three G2 Kit</div></td>
<td valign="middle" nowrap="nowrap" bgcolor="#F3F3F3"><div align="right">R796</div></td>
</tr>
<tr>
<td height="34" colspan="2" valign="middle" nowrap="nowrap" bgcolor="#F3F3F3"><div align="left">
<input id="Five_G" name="creams" type="radio" value="1255" onclick="setSubTotal2('Five_G');" />
Five G2 Kit</div></td>
<td valign="middle" nowrap="nowrap" bgcolor="#F3F3F3"><div align="right">R1255</div></td>
</tr>
<tr>
<td height="34" colspan="3" valign="middle" bgcolor="#F3F3F3"><div align="right">Sub Total ex Postage </div></td>
<td valign="middle" nowrap="nowrap" bgcolor="#F3F3F3"><div align="right">R
<input name="ex_postage" type="text" id="ex_postage" size="13" />
</div></td>
</tr>
<tr>
<td height="50" colspan="2" valign="top" bgcolor="#F3F3F3">Speed Service Couriers (Over Night) - <strong>R50.00</strong> per package</td>
<td width="74" valign="middle" bgcolor="#F3F3F3"><div align="left">
<input id="Postal_overnight" name="postalService" type="radio" value="50" onclick="setTotal('Postal_overnight', 'overnight')" />
</div></td>
<td valign="middle" nowrap="nowrap" bgcolor="#F3F3F3"><div align="right"> R
<input name="overnight" type="text" id="overnight" size="13" />
</div></td>
</tr>
<tr>
<td height="50" colspan="2" valign="middle" bgcolor="#F3F3F3">Or Registered Post - <strong>R20.00</strong> per package</td>
<td valign="middle" bgcolor="#F3F3F3"><div align="left">
<input id="Postal_registered" name="postalService" type="radio" value="20" onclick="setTotal('Postal_registered', 'registered')" />
</div></td>
<td valign="middle" nowrap="nowrap" bgcolor="#F3F3F3"><div align="right"> R
<input name="registered" type="text" id="registered" size="13" />
</div></td>
</tr>
<tr>
<td height="34" colspan="3" valign="middle" bgcolor="#F3F3F3"><div align="right">Total Incl Postage </div></td>
<td valign="middle" nowrap="nowrap" bgcolor="#F3F3F3"><div align="right"> R
<input name="total" type="text" id="total" size="13" />
</div></td>
</tr>
<tr>
<td height="34" colspan="3" valign="middle" bgcolor="#F3F3F3"><div align="right">Reference Number </div></td>
<td valign="middle" nowrap="nowrap" bgcolor="#F3F3F3"><div align="right">
<input name="ref_no" type="text" id="ref_no" size="15" />
</div></td>
</tr>
</table>
<br />
<table width="500" height="193" border="1" cellpadding="5" cellspacing="0" bordercolor="#FFFFFF" bgcolor="#CCCCCC">
<!--DWLayoutTable-->
<tr>
<td height="31" colspan="2" valign="top" bgcolor="#F3F3F3"><div align="center">Client Details </div></td>
</tr>
<tr>
<td height="16" valign="middle" bgcolor="#F3F3F3">Name</td>
<td width="291" height="16" valign="middle" bgcolor="#F3F3F3"><input name="firstname" type="text" id="firstname" size="40" /></td>
</tr>
<tr>
<td height="16" valign="middle" bgcolor="#F3F3F3">Surname</td>
<td height="16" valign="middle" bgcolor="#F3F3F3"><input name="surname" type="text" id="surname" size="40" /></td>
</tr>
<tr>
<td height="16" valign="middle" bgcolor="#F3F3F3">Contact Number </td>
<td height="16" valign="middle" bgcolor="#F3F3F3"><input name="contact_no" type="text" id="contact_no" size="40" /></td>
</tr>
<tr>
<td height="16" valign="middle" bgcolor="#F3F3F3">E-mail Address </td>
<td height="16" valign="middle" bgcolor="#F3F3F3"><input name="email" type="text" id="email" size="40" /></td>
</tr>
<tr>
<td height="16" colspan="2" valign="middle" bgcolor="#F3F3F3"><div align="center">Delivery Address </div></td>
</tr>
<tr>
<td height="16" valign="middle" bgcolor="#F3F3F3">Address Line 1 </td>
<td height="16" valign="middle" bgcolor="#F3F3F3"><input name="add_1" type="text" id="add_1" size="40" /></td>
</tr>
<tr>
<td height="16" valign="middle" bgcolor="#F3F3F3">Address Line 2 </td>
<td height="16" valign="middle" bgcolor="#F3F3F3"><input name="add_2" type="text" id="add_2" size="40" /></td>
</tr>
<tr>
<td height="16" valign="middle" bgcolor="#F3F3F3">City</td>
<td height="16" valign="middle" bgcolor="#F3F3F3"><input name="city" type="text" id="city" size="40" /></td>
</tr>
<tr>
<td height="16" valign="middle" bgcolor="#F3F3F3">Province</td>
<td height="16" valign="middle" bgcolor="#F3F3F3"><input name="province" type="text" id="province" size="40" /></td>
</tr>
<tr>
<td height="16" valign="middle" bgcolor="#F3F3F3">Postal Code </td>
<td height="16" valign="middle" bgcolor="#F3F3F3"><input name="code" type="text" id="code" size="40" /></td>
</tr>
</table>
<br />
<table width="500" height="104" border="1" cellpadding="5" cellspacing="0" bordercolor="#FFFFFF" bgcolor="#CCCCCC">
<!--DWLayoutTable-->
<tr>
<td height="31" colspan="3" valign="top" bgcolor="#F3F3F3"><div align="center"> Payment Options </div></td>
</tr>
<tr>
<td width="114" height="8" valign="middle" bgcolor="#F3F3F3">EFT</td>
<td width="59" valign="middle" bgcolor="#F3F3F3"><input id="eft" name="paymentOption" type="radio" value="EFT" /></td>
<td width="289" valign="middle" bgcolor="#F3F3F3">Lisan International Account Details<br />
Account Holder: Lisan Technology <br />
Bank: Nedbank<br />
Branch: Buitekant Street<br />
Account Number: 1028 244 789<br />
Branch Code: 102809</td>
</tr>
<tr>
<td height="9" valign="middle" bgcolor="#F3F3F3">Credit Card </td>
<td height="9" colspan="2" valign="middle" bgcolor="#F3F3F3"><input id="cc" name="paymentOption" type="radio" value="Credit Card" /></td>
</tr>
<tr>
<td height="9" colspan="2" valign="middle" bgcolor="#F3F3F3">Credit Card Number </td>
<td height="9" valign="middle" bgcolor="#F3F3F3"><label>
<input name="cc_no" type="text" id="cc_no" size="40" maxlength="16" />
<br />
(no spaces, no dashes, i.e. 4100111100001111)</label></td>
</tr>
<tr>
<td height="9" colspan="2" valign="middle" bgcolor="#F3F3F3">Expiry Date</td>
<td height="9" valign="middle" bgcolor="#F3F3F3"><input name="cc_expiry" type="text" id="cc_expiry" size="40" />
<br />
month- MM/year- YY</td>
</tr>
<tr>
<td height="9" colspan="2" valign="middle" bgcolor="#F3F3F3">CVV Number:<br />
(the last 3/4 digits on the back of the card</td>
<td height="9" valign="middle" bgcolor="#F3F3F3"><input name="cvv" type="text" id="cvv" size="40" maxlength="3" /></td>
</tr>
<tr>
<td height="9" colspan="2" valign="middle" bgcolor="#F3F3F3">Name exactly as it appears on the card:</td>
<td height="9" valign="middle" bgcolor="#F3F3F3"><input name="cc_name" type="text" id="cc_name" size="40" /></td>
</tr>
<tr>
<td height="9" colspan="2" rowspan="2" valign="middle" bgcolor="#F3F3F3">Card Type </td>
<td height="4" valign="middle" bgcolor="#F3F3F3"><input name="cardType" id="cc_visa" type="radio" value="Visa" />
Visa </td>
</tr>
<tr>
<td height="5" valign="middle" bgcolor="#F3F3F3"><input name="cardType" id="cc_mastercard" type="radio" value="Master Card" />
Master Card </td>
</tr>
</table>
<table width="500" height="33" border="1" cellpadding="5" cellspacing="0" bordercolor="#FFFFFF" bgcolor="#CCCCCC">
<!--DWLayoutTable-->
<tr>
<td height="31" colspan="2" valign="middle" bgcolor="#F3F3F3"><div align="center">
<label>
<input type="submit" name="Submit" value="Submit" />
</label>
<label>
<input type="button" name="Submit2" value="Cancel" onclick="ResetFields()"/>
</label>
</div></td>
</tr>
</table>
<p> </p>you should put this in the from tag attachment field :
onsubmit="return verify();"
Dear Admin
Thanks for the info, once the java script is inserted I notice that the Random Reference number does not display in the form where it worked in the origional html file. Please let me know where exactly the form tag attachment field is to insert: onsubmit="return verify();"
Thanks for your assistance.
Thanks for the info, once the java script is inserted I notice that the Random Reference number does not display in the form where it worked in the origional html file. Please let me know where exactly the form tag attachment field is to insert: onsubmit="return verify();"
Thanks for your assistance.
Hi Deons,
[list]
The random number wouldn't appear because the page body tag will need to be edited, it looks like this at the original file :
You can find the form tag attachment field in the general tab at your form editing page!!
[/list]
Cheers
Max
[list]
<body onload="get_random()">Cheers
Max
This topic is locked and no more replies can be posted.
