Home Downloads Forums Shop FAQs Blog Contact Demo Login
Home
/
Forums
/
Convert a Form to a working form for Joomla 1.6/1.7

Convert a Form to a working form for Joomla 1.6/1.7

ar
armagh 12 Aug, 2011
Hi I would like the form below converted (or a simpler version used) to a working Chronoform which adds the totals as shown and on Submit goes to a page where the user can review their details including totals and change/go back to change any details.

Then I need the form to send the "AMOUNT1" ie amount={AMOUNT1} field and a unique Order identification field ie
orderid={ORDER_ID} (Which can be hidden in the customer view of the form) to a second form called submit_your_order (Which I have already created) ie something like this address appears in the browser window: http://www.xxxxxxxxxx/index.php?chronoform=submit_your_order&option=com_chronoforms&amount=122.20&orderid=1232123

I need the Customer to receive an email saying "Thanks for your Order" and including details of their submission as entered and for me to receive a copy of that sent to [email]myemailaddress@newry.info[/email]

It should be easy for me to attach the form to a database table

As usual I need it done as soon as possible. I am offering $80, €60 or £50 so hope that sounds fair. If not let me know.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Safari Live</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" safari, animals" />
<meta name="description" content="safari live" />

<script type="text/javascript">// mredkj.com
// OrderForm.js - v0.4
// v0.4 - 2007-02-01
// v0.3 - 2006-04-09
// v0.2 - 2006-04-08
// v0.1 - 2006-04-06

function OrderForm(prefix, precision, firstChoice) {
	
	this.prefix = prefix ? prefix : '';
	
	// ****************************
	// Configure here
	// ****************************
	// names - Set these according to how the html ids are set
	this.FORM_NAME ='SafariLiveBooking';
	this.TXT_OUT ='AMOUNT1';
	
	// partial names - Set these according to how the html ids are set
	this.CHK = this.prefix + 'chk';
	this.SEL = this.prefix + 'sel';
	this.PRICE = this.prefix + 'txtPrice';
	
	// precision for the decimal places
	// If not set, then no decimal adjustment is made
	this.precision = precision ? precision : -1;
	
	// if the drop down has the first choice after index 1
	// this is used when checking or unchecking a checkbox
	this.firstChoice = firstChoice ? firstChoice : 1;
	// ****************************
	
	// form
	this.frm = document.getElementById(this.FORM_NAME);
	
	// checkboxes
	this.chkReg = new RegExp(this.CHK + '([0-9]+)');
	this.getCheck = function(chkId) {
		return document.getElementById(this.CHK + chkId);
	};
	
	// selects
	this.selReg = new RegExp(this.SEL + '([0-9]+)');
	this.getSelect = function(selId) {
		return document.getElementById(this.SEL + selId);
	};
	
	// price spans
	this.priceReg = new RegExp(this.PRICE + '([0-9]+)');
	
	// text output
	this.txtOut = document.getElementById(this.TXT_OUT);
	
	// button
	this.btnTotal = document.getElementById(this.BTN_TOTAL);
	
	// price array
	this.prices = new Array();
	
	var o = this;
	this.getCheckEvent = function() {
		return function() {
			o.checkRetotal(o, this);
		};
	};
	
	this.getSelectEvent = function() {
		return function() {
			o.totalCost(o);
		};
	};
	
	this.getBtnEvent = function() {
		return function() {
			o.totalCost(o);
		};
	};
	
	/*
	 * Calculate the cost
	 * 
	 * Required:
	 *  Span tags around the prices with IDs formatted
	 *  so each item's numbers correspond its select elements and input checkboxes.
	 */
	this.totalCost = function(orderObj) {
		var spanObj = orderObj.frm.getElementsByTagName('span');
		var total = 0.0;
		for (var i=0; i<spanObj.length; i++) {
			var regResult = orderObj.priceReg.exec(spanObj[i].id);
			if (regResult) {
				var itemNum = regResult[1];
				var chkObj = orderObj.getCheck(itemNum);
				var selObj = orderObj.getSelect(itemNum);
				var price = orderObj.prices[itemNum];
				var quantity = 0;
				if (selObj) {
					quantity = parseFloat(selObj.options[selObj.selectedIndex].text);
					quantity = isNaN(quantity) ? 0 : quantity;
					if (chkObj) chkObj.checked = quantity;
				} else if (chkObj) {
					quantity = chkObj.checked ? 1 : 0;
				}
				total += quantity * price;
			}
		}
		if (this.precision == -1) {
			orderObj.txtOut.value = total
		} else {
			orderObj.txtOut.value = total.toFixed(this.precision);
		}
	};

	/*
	 * Handle clicks on the checkboxes
	 *
	 * Required:
	 *  The corresponding select elements and input checkboxes need to be numbered the same
	 *
	 */
	this.checkRetotal = function(orderObj, obj) {
		var regResult = orderObj.chkReg.exec(obj.id);
		if (regResult) {
			var optObj = orderObj.getSelect(regResult[1]);
			if (optObj) {
				if (obj.checked) {
					optObj.selectedIndex = orderObj.firstChoice;
				} else {
					optObj.selectedIndex = 0;
				}
			}
			orderObj.totalCost(orderObj);
		}
	};
	
	/*
	 * Set up events
	 */
	this.setEvents = function(orderObj) {
		var spanObj = orderObj.frm.getElementsByTagName('span');
		for (var i=0; i<spanObj.length; i++) {
			var regResult = orderObj.priceReg.exec(spanObj[i].id);
			if (regResult) {
				var itemNum = regResult[1];
				var chkObj = orderObj.getCheck(itemNum);
				var selObj = orderObj.getSelect(itemNum);
				if (chkObj) {
					chkObj.onclick = orderObj.getCheckEvent();
				}
				if (selObj) {
					selObj.onchange = orderObj.getSelectEvent();
				}
				if (orderObj.btnTotal) {
					orderObj.btnTotal.onclick = orderObj.getBtnEvent();
				}
			}
		}
	};
	this.setEvents(this);

	/*
	 *
	 * Grab the prices from the html
	 * Required:
	 *  Prices should be wrapped in span tags, numbers only.
	 */
	this.grabPrices = function(orderObj) {
		var spanObj = orderObj.frm.getElementsByTagName('span');
		for (var i=0; i<spanObj.length; i++) {
			if (orderObj.priceReg.test(spanObj[i].id)) {
				var regResult = orderObj.priceReg.exec(spanObj[i].id);
				if (regResult) {
					orderObj.prices[regResult[1]] = parseFloat(spanObj[i].innerHTML);
				}
			}
		}
	};
	this.grabPrices(this);
	
}

</script>
<script type="text/javascript">
//<![CDATA[
window.onload = setupScripts;
function setupScripts()
{
	var anOrder1 = new OrderForm();
	var anOrder2 = new OrderForm('a_');
	var anOrder3 = new OrderForm('b_', 2);
	var anOrder4 = new OrderForm('c_', -1, 2);
	var anOrder5 = new OrderForm('d_');
}
//]]>
</script>
<style type="text/css">
.chkbox {
	clear: left;
	float: left;
}
.desc {
	float: left;
	width: 9em;
	padding-left: 1em;
}
.price {
	float: left;
	width: 4em;
	padding-right: 1em;
	text-align: right;
}
.selbox {
	clear: right;
}
.total {
	clear: left;
}


</style>
</head>
<body>

<div id="topbanner">
<div id="logo">
<a href="../index.html"> </a>
</div>

</div>

<div id="content">
	<div id="innercontent">


To Book Stand Space at Safari Live Please fill in the form below before Saturday the 24th of September 2011<br><br><form id="SafariLiveBooking"><div class="ccms_form_element cfdiv_text" id="name_container_div"><label>Name</label><input maxlength="150" size="30" class="" title="" type="text" value="" name="NAME" />
<div class="clear"></div><div id="error-message-NAME"></div></div><div class="ccms_form_element cfdiv_text" id="company_name_container_div"><label>Company Name</label><input maxlength="150" size="50" class="" title="" type="text" value="" name="COMPANY" />
<div class="clear"></div><div id="error-message-COMPANY"></div></div><div class="ccms_form_element cfdiv_text" id="position_container_div"><label>Position</label><input maxlength="150" size="30" class="" title="" type="text" value="" name="POSITION" />
<div class="clear"></div><div id="error-message-POSITION"></div></div><div class="ccms_form_element cfdiv_text" id="address_line_1_container_div"><label>Address Line 1</label><input maxlength="300" size="100" class="" title="" type="text" value="" name="ADDRESS_1" />
<div class="clear"></div><div id="error-message-ADDRESS_1"></div></div><div class="ccms_form_element cfdiv_text" id="address_line_2_container_div"><label>Address Line 2</label><input maxlength="150" size="100" class="" title="" type="text" value="" name="ADDRESS_2" />
<div class="clear"></div><div id="error-message-ADDRESS_2"></div></div><div class="ccms_form_element cfdiv_text" id="town_city_container_div"><label>Town/ City</label><input maxlength="150" size="50" class="" title="" type="text" value="" name="TOWN" />
<div class="clear"></div><div id="error-message-TOWN"></div></div><div class="ccms_form_element cfdiv_text" id="postcode_container_div"><label>Postcode</label><input maxlength="150" size="30" class="" title="" type="text" value="" name="POSTCODE" />
<div class="clear"></div><div id="error-message-POSTCODE"></div></div><div class="ccms_form_element cfdiv_text" id="telephone_container_div"><label>Telephone</label><input maxlength="150" size="30" class="" title="" type="text" value="" name="TELEPHONE" />
<div class="clear"></div><div id="error-message-TELEPHONE"></div></div><div class="ccms_form_element cfdiv_text" id="mobile_container_div"><label>Mobile</label><input maxlength="150" size="30" class="" title="" type="text" value="" name="MOBILE" />
<div class="clear"></div><div id="error-message-MOBILE"></div></div><div class="ccms_form_element cfdiv_text" id="email_address_container_div"><label>Email Address</label><input maxlength="150" size="30" class="" title="" type="text" value="" name="EMAIL" />
<div class="clear"></div><div id="error-message-EMAIL"></div></div><div class="ccms_form_element cfdiv_text" id="your_product_or_service_container_div"><label>Your Product or Service</label><input maxlength="150" size="100" class="" title="" type="text" value="" name="PRODUCT" />
<div class="clear"></div><div id="error-message-PRODUCT"></div></div><div class="ccms_form_element cfdiv_text" id="website_container_div"><label>Website</label><input maxlength="150" size="30" class="" title="" type="text" value="" name="WEBSITE" />
<div class="clear"></div><div id="error-message-WEBSITE"></div></div>
Price per stand includes:<br><br>

1 table approximately 6ft wide <br>
2 chairs<br><br>

Power sockets and additional chairs/tables incur a small additional charge: see below. You may bring your own additional tables if desired at no extra cost.<br><br><table>
	<tr>
		<td>Stand Category 1 width 6ft x depth 6ft</td>
	  <td>£<span id="d_txtPrice3">96.20</span></td>
		<td>
			<input type="checkbox" id="d_chk3" />
		</td>
	</tr>
	<tr>
		<td>Stand Category 2 width 12ft x depth 6ft</td>
	  <td>£<span id="d_txtPrice4">155</span></td>
  <td>
			<input type="checkbox" id="d_chk4" />
		</td>
	</tr>
    	<tr>
		<td>Power Sockets</td>
		<td>£<span id="d_txtPrice0">7</span></td>
		<td>
			<select id="d_sel0">
				<option value="val0">0</option>
				<option value="val1">1</option>
				<option value="val2">2</option>
				<option value="val3">3</option>
                <option value="val4">4</option>
				<option value="val5">5</option>
				<option value="val6">6</option>
				<option value="val7">7</option>
			</select>
		</td>
	</tr>
	<tr>
		<td>Extra Tables</td>
		<td>£<span id="d_txtPrice1">7</span></td>
		<td>
			<select id="d_sel1">
				<option value="val0">0</option>
				<option value="val1">1</option>
				<option value="val2">2</option>
				<option value="val3">3</option>
			</select>
		</td>
	</tr>
	<tr>
		<td>Extra Chairs</td>
		<td>£<span id="d_txtPrice2">3</span></td>
  <td>
			<select id="d_sel2">
				<option value="val0">0</option>
				<option value="val1">1</option>
				<option value="val2">2</option>
				<option value="val3">3</option>
                <option value="val4">4</option>
				<option value="val5">5</option>
				<option value="val6">6</option>
				<option value="val7">7</option>
			</select>
		</td>
	</tr>
</table>
<p>
Total:
<input type="text" id="AMOUNT1" size="8" />
</p>
Bookings are only valid when accompanied with either emailable or a postal copy of valid public liability insurance. Thanks for your help.<div class="ccms_form_element cfdiv_file" id="upload_your_public_liability_insurance_container_div"><label>Upload Your Public Liability Insurance</label><input class="" title="" type="file" name="PUBLIC_LIABILITY" />
<div class="small-message">Upload your Copy of your Current Public Liability Insurance if you have a digital copy or otherwise post us a copy to Safari Live, xxxxxxxxxxxxxx.</div><div class="clear"></div><div id="error-message-PUBLIC_LIABILITY"></div></div><div class="ccms_form_element cfdiv_checkbox" id="i_have_uploaded_a_copy_of_our_current_public_liability_insurance_or_will_post_a_copy_of_it_to_the_address_above_container_div"><input value="1" title="" type="checkbox" name="PUBLIC_CHECK" class="label_right" />
<label class="full_label">I Have Uploaded a copy of our current Public Liability Insurance or will post a copy of it to the address above</label><div class="clear"></div><div id="error-message-PUBLIC_CHECK"></div></div>
<div class="ccms_form_element cfdiv_submit" id="submit_container_div"><input name="SUBMIT" class="" value="Submit" type="submit" />
<div class="clear"></div><div id="error-message-SUBMIT"></div></div></form>
</body>
</html>
Gr
GreyHead 12 Aug, 2011
Hi armagh,

I'll look at this for you if you still need it.

Please email or PM me the site URL and a SuperAdmin login and I'll take a look.

Bob
ar
armagh 12 Aug, 2011
Hi Bob, I emailed you a message thanks.
This topic is locked and no more replies can be posted.

ChronoForms v8 is now WordPress ready, ChronoMails is out

The JED needs volunteers!

Terms Of Use Privacy Policy Business Partners

We accept paypal logo  stripe logo

© 2006 - 2025 ChronoEngine.com