Hi Rainie,
Here's a version that seems to work OK (checked in FireFox and IE8). I've moved all the script out of the Form HTML and into the Form JavaScript box; I've also added ids to the inputs and used them in some MooTools syntax.
Form HTML:<input class="right" type='text' id="firstBox" name="firstBox" value="" ><br />
+ <input class="right" type='text' id="secondBox" name="secondBox" value="" ><br />
= <input class="right" type='text' id="thirdBox" name="thirdBox" readonly='readonly' >
Form JavaScript:window.addEvent('domready', function() {
$('firstBox').addEvents({
focus: startCalc,
blur: stopCalc
});
$('secondBox').addEvents({
focus: startCalc,
blur: stopCalc
});
var interval = '';
});
function startCalc(){
interval = setInterval("calc()", 1);
};
function stopCalc(){
clearInterval(interval);
};
function calc(){
var val = parseFloat($('firstBox').value) + parseFloat($('secondBox').value);
if ( isNaN(val) ) {
val = '';
}
$('thirdBox').value = val;
};
Bob
It's works! Thanks again Bob for all your help!
Have a great weekend, Rainie dey
Hi Rainie,
If you load the functions twice (one for each form) then they interfere with each other. You'll need to change the names for one of the forms.
JavaScript has a formatting method that you can use to round the results.
Bob
Hello,
I'm new to this chronoforms and javascript. Based on code provided by Bob,
window.addEvent('domready', function() {
$('firstBox').addEvents({
focus: startCalc,
blur: stopCalc
});
$('secondBox').addEvents({
focus: startCalc,
blur: stopCalc
});
var interval = '';
});
function startCalc(){
interval = setInterval("calc()", 1);
};
function stopCalc(){
clearInterval(interval);
};
function calc(){
var val = parseFloat($('firstBox').value) + parseFloat($('secondBox').value);
if ( isNaN(val) ) {
val = '';
}
$('thirdBox').value = val;
};
I did code as below for my form. My form contained 2 radio button and 2 text field to calculate total amount.My problem now is how to make sure only selected radio button will be included in the calculation.
window.addEvent('domready', function() {
$('radio_new').addEvents({
click: startCalc,
blur: stopCalc
});
$('radio_return').addEvents({
click: startCalc,
blur: stopCalc
});
$('user_cost').addEvents({
focus: startCalc,
blur: stopCalc
});
$('users').addEvents({
focus: startCalc,
blur: stopCalc
});
var interval = '';
});
//START CALCULATION
function startCalc(){
interval = setInterval("calc()", 1);
};
function stopCalc(){
clearInterval(interval);
};
function calc(){
var val = (parseFloat($('user_cost').value) * parseFloat($('users').value)) + (parseFloat($('radio_new').value) + parseFloat($('radio_return').value));
if ( isNaN(val) ) {
val = '';
}
$('payable').value = val;
};
Any help please. Thanks you.
Hi izulismail,
If you post the Form HTML as well - at least these inputs, or a link to the form then it might be possible to give you clue.
Bob
Dear Bob,
Below is my form
<table border="0" cellspacing="3" cellpadding="2">
<tbody>
<tr>
<td mce_style="background-color: #2396a8; background-image: url(images/stories/bg-ocean.png);" colspan="3" align="center"><span mce_style="color: #ffffff;">Subscription, 3 Months</span></td>
</tr>
<tr mce_style="background-color: #ffffff;">
<td>*One-Time Setup Fee</td>
<td><input id="radio_new" name="radio0" type="radio" value="1000" /></td>
<td>New Customer: $100</td>
</tr>
<tr mce_style="background-color: #ffffff;">
<td><br mce_bogus="1" /></td>
<td mce_style="; background-image: url(images/stories/bg-pearl.png);"><input id="radio_return" name="radio0" type="radio" value="0" /></td>
<td mce_style=" background-image: url(images/stories/bg-pearl.png);">Returning Customer: No setup fee if customer has signed-up and paid setup fee during 1-month free trial.</td>
</tr>
<tr mce_style="background-color: #ffffff;">
<td mce_style="; background-image: url(images/stories/bg-pearl.png);" width="150">Cost per concurrent user</td>
<td mce_style="background-image: url(images/stories/bg-pearl.png);" colspan="2">$10.00</td>
</tr>
<tr mce_style="background-color: #ffffff;">
<td width="150">Input number of users required (minimum 2)</td>
<td mce_style="; background-image: url(images/stories/bg-pearl.png);" colspan="2"><input id="users" maxlength="150" name="users" size="30" type="text" /></td>
</tr>
<tr>
<td mce_style="background-image: url(images/stories/bg-pearl.png);">Total Payable</td>
<td mce_style="; background-image: url(images/stories/bg-pearl.png);" colspan="2"><input id="payable" maxlength="150" name="payable" size="30" type="text" /></td>
</tr>
<tr>
<td><br mce_bogus="1" /></td>
<td colspan="2"><input name="button_6" type="submit" value="Sign-Up Now!" /></td>
</tr>
</tbody>
</table>
Hi izulismail,
You have a user_cost input in the JavaScript that doesn't seem to appear in the Form HTML. Where does that come from?
Bob
Dear Bob,
I think I missed that user_cost <input>. It's from the cost for concurrent userrow. Below is codes with user_cost. But as this user_cost are fixed value. I am thinking it should be put in javascript code instead of in the form.
<table border="0" cellspacing="3" cellpadding="2">
<tbody>
<tr>
<td mce_style="background-color: #2396a8; background-image: url(images/stories/bg-ocean.png);" colspan="3" align="center"><span mce_style="color: #ffffff;">Subscription, 3 Months</span></td>
</tr>
<tr mce_style="background-color: #ffffff;">
<td>*One-Time Setup Fee</td>
<td><input id="radio_new" name="radio0" type="radio" value="1000" /></td>
<td>New Customer: $100</td>
</tr>
<tr mce_style="background-color: #ffffff;">
<td><br mce_bogus="1" /></td>
<td mce_style="; background-image: url(images/stories/bg-pearl.png);"><input id="radio_return" name="radio0" type="radio" value="0" /></td>
<td mce_style=" background-image: url(images/stories/bg-pearl.png);">Returning Customer: No setup fee if customer has signed-up and paid setup fee during 1-month free trial.</td>
</tr>
<tr mce_style="background-color: #ffffff;">
<td mce_style="; background-image: url(images/stories/bg-pearl.png);" width="150">Cost per concurrent user</td>
<td mce_style="background-image: url(images/stories/bg-pearl.png);" colspan="2">$10.00<input id="user_cost" name="user_cost" type="hidden" value="10" /></td>
</tr>
<tr mce_style="background-color: #ffffff;">
<td width="150">Input number of users required (minimum 2)</td>
<td mce_style="; background-image: url(images/stories/bg-pearl.png);" colspan="2"><input id="users" maxlength="150" name="users" size="30" type="text" /></td>
</tr>
<tr>
<td mce_style="background-image: url(images/stories/bg-pearl.png);">Total Payable</td>
<td mce_style="; background-image: url(images/stories/bg-pearl.png);" colspan="2"><input id="payable" maxlength="150" name="payable" size="30" type="text" /></td>
</tr>
<tr>
<td><br mce_bogus="1" /></td>
<td colspan="2"><input name="button_6" type="submit" value="Sign-Up Now!" /></td>
</tr>
</tbody>
</table>
Hi izulismail,
window.addEvent('domready', function() {
$('radio0').addEvent('click', calc);
$('users').addEvent('keyup', calc);
});
function calc(){
var user_cost = 10;
var users = 0 || $('users').value;
var setup = 0 || $('radio0').value;
var payable = 0;
if ( users > 0 ) {
payable = users * user_cost + setup;
}
$('payable').value = payable;
};Not tested and may need debugging.
Bob
Bob
Hi There,
How can i make this work for the following scenario:
we are giving away free daily planners but will charge an amount (50) per each additional planner:
amount * 50 -50 =
How can i integrate this into the email so it only shows a price when a person orders more than one as otherwise its free?
The form does not necessarily have to show the total but would be nice the main thing is the confirmation email to show the price to pay if ordered more than one for the customer....
Any tips will be welcomed!
Hi Dudley,
What is the HTML for the part of the form that collects the quantity?
Bob
hi buddy here is what i have for collecting the amount of 'daily planners' applied for:
<div class="ccms_form_element cfdiv_text" id="i_would_like_this_many_planners__container_div"><label>I Would like this many planners:</label><input maxlength="150" size="30" class=" validate['required','number']" title="" label_over="0" hide_label="0" type="text" value="" name="input_copies" />
<div class="clear"></div><div id="error-message-input_copies"></div></div>
Hi Dudley,
First, add an id='input_copies' to this input.
Second, add a new Text input element with the name and id set to amount.
Third, drag in a Load JS action and add this code to it.window.addEvent('domready', function() {
$('amount').readOnly = true;
$('input_copies').addEvent('change', function() {
$('amount').value = 50 * (parseInt($('input_copies').value) -1 );
});
});This sets the amount input to be readonly (you can't easily do this in the ChronoForms configuration); and adds the calculation you want.
Bob
Thanks Bob you come to the rescue yet again😉
Its working now so thanks! Next step is i have to get a unique reference generator added as well and its ready to launch how exciting when stuff actually works.
Is there a way to display 'Free' instead of a '0' when people only to choose one?
Hi Dudley,
Try thiswindow.addEvent('domready', function() {
$('amount').readOnly = true;
$('input_copies').addEvent('change', function() {
var quantity = parseInt($('input_copies').value);
if ( quantity > 0 ) {
$('amount').value = 50 * (quantity - 1 );
} else {
$('amount').value = 'Free';
}
});
});
Bob
Hi Dudley,
Bravo !!
All of the main browsers have quite good web developer tools now that are invaluable in debugging JaavScript. FireBug in FireFox, Shift+Ctrl+I in Chrome, F12 in IE 8 & 9, etc.
Bob
PS I'll correct my original post in case someone else copies it.
Hi Bob,
thanks for the tip starting to look at the F12 in chrome now so that will be helpful! right now i am looking at how to have the 'amount' field update dynamically while i enter numbers into the 'input_copies' field as right now a user has to click outside the field after entering the number before he/she can see the price.
Does this look like a good way to do it?
<form name="form1">
<input type="text" name="test">
<a href="#" onClick="dynamicurl();">Click Here</a>
</form>
<script>
function dynamicurl()
{
location.href = document.form1.test.value;
}
</script>
Only just realized that another thing is that i had to change the value on line 5 from 0 > 1 because i want 1 = Free and 2 = 50, 3 = 100, 4 = 150 ....
window.addEvent('domready', function() {
$('amount').readOnly = true;
$('input_copies').addEvent('change', function() {
var quantity = parseInt($('input_copies').value;
if ( quantity > 1 ) {
$('amount').value = 50 * (quantity - 1 );
} else {
$('amount').value = 'Free';
}
});
});
I am getting excited i know these are baby steps but i feel like i have a chance to learn this, a glimpse of hope😉
Hi Dudley,
You can try changing the event in this line from 'change' to 'keyup'$('input_copies').addEvent('change', function() {
Bob
That did the trick thank you 'Ajarn Bob' it means 'Head Instructor Bob' in Thai😉
Off to sleep here and there is a beer on the way for you mate enjoy😉
