ChronoEngine.com homepage
Downloads Blog Shop FAQs Contact Forums Login Demo

Forums

Please write a review for the extension you are using on the Joomla extensions directory before posting a new question as we are being spammed by many negative reviews.

Thank you for your support!

Help with adding javascript into backend

de
deons1@iafrica.com 30 Sep, 2007
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
Max_admin 30 Sep, 2007
No files attached!!🙂
Max
ChronoForms developer...
Did you try ChronoMyAdmin for managing your Joomla database tables ?
Max_admin 30 Sep, 2007
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> </p>

you should put this in the from tag attachment field :

 onsubmit="return verify();"
Max
ChronoForms developer...
Did you try ChronoMyAdmin for managing your Joomla database tables ?
de
deons1@iafrica.com 30 Sep, 2007
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.
Max_admin 01 Oct, 2007
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 : 
    <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!!
    • [/list]

    Cheers

    Max
    Max
    ChronoForms developer...
    Did you try ChronoMyAdmin for managing your Joomla database tables ?
    This topic is locked and no more replies can be posted.
    Terms of use Privacy Policy Business Partners

    2Checkout.com

    2CheckOut.com Inc. (Ohio, USA) is an authorized retailer for goods and services provided by ChronoEngine.com