Buy Now
Sign in

Help with adding javascript into backend

deons1@iafrica.com , September 30 2007, 02:03
D
deons1@iafrica.com 17
September 30 2007, 02:03 #2537
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
admin 29
September 30 2007, 02:04 #2538
No files attached!!
Max
If your main question got answered then please mark the answer using the button!
Did you try the new ChronoForms7 ? if yes then please send us your comments!!
admin 29
September 30 2007, 08:35 #2542
Hi, this is JS code :

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>&nbsp;</p>


you should put this in the from tag attachment field :

 onsubmit="return verify();"
Max
If your main question got answered then please mark the answer using the button!
Did you try the new ChronoForms7 ? if yes then please send us your comments!!
D
deons1@iafrica.com 17
September 30 2007, 20:37 #2543
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.
admin 29
October 01 2007, 17:17 #2546
Hi Deons,


    [*]The random number wouldn't appear because the page body tag will need to be edited, it looks like this at the original file :
    <body onload="get_random()">
    , So you will need to open your template main file index.php, find the body tag and add the onload function to it
    [/*]
    [*]You can find the form tag attachment field in the general tab at your form editing page!!
    [/*]


Cheers

Max
Max
If your main question got answered then please mark the answer using the button!
Did you try the new ChronoForms7 ? if yes then please send us your comments!!