Simple calculation form

Good evening, I need some assistance on a simple calculation form. The code below works in Dreamweaver.

HTML:

<div style="width: 200px; text-align: center;">
<form name="autoSumForm">
  
<input class="right" type=text name="firstBox" value="" onFocus="startCalc();" onBlur="stopCalc();"><br>
+ <input class="right" type=text name="secondBox" value="" onFocus="startCalc();" onBlur="stopCalc();"><br>
= <input class="right" type=text name="thirdBox">
</form>
</div>

JAVASCRIPT:

function startCalc(){
  interval = setInterval("calc()",1);
}
function calc(){
  one = document.autoSumForm.firstBox.value;
  two = document.autoSumForm.secondBox.value; 
  document.autoSumForm.thirdBox.value = (one * 1) + (two * 1);
}
function stopCalc(){
  clearInterval(interval);
}

After going through Chapter 9 in your book, I'm still a little confused on how to exactly configure this form. Here's what I have so far.
HTML:

<input class="right" type=text name="firstBox" value="" onFocus="startCalc();" onBlur="stopCalc();"><br>
+ <input class="right" type=text name="secondBox" value="" onFocus="startCalc();" onBlur="stopCalc();"><br>
= <input class="right" type=text name="thirdBox">

JAVASCRIPT:

 <?php
    $script = "
      function startCalc(){
  interval = setInterval("calc()",1);
}
function calc(){
  one = document.autoSumForm.firstBox.value;
  two = document.autoSumForm.secondBox.value; 
  document.autoSumForm.thirdBox.value = (one * 1) + (two * 1);
}
function stopCalc(){
  clearInterval(interval);
}
";
    $doc =& JFactory::get Document();
    $doc->addScript($script);
    ?>

http://benefitcounselor.insurancebrokersolutions.com/index.php?option=com_chronocontact&chronoformname=calculator

Any help in fine tuning this form is greatly appreciated!

Thank you! Rainie dey

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

Another question....

How do I set all the fields to round to 2 digits right of the decimal? For example: 10.00

When I put 2 forms on the same page [component + module] one stops calculating.

http://benefitcounselor.insurancebrokersolutions.com/election-form-waiver.html

Thank you!

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 this

window.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

HMMMMM that one does not seem to work, may i ask a silly question as i only today decided to learn JS and i have no idea apart from reading the basics at http://www.w3schools.com/js how can you bug fix this as there is no visible error message?

This is a perfect little script i think for me to start to understand and learn JS and i thank you for your time helping me!

+++UPDATE+++


had to add a closing bracket on line 4 after value:

window.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';
    }
  });
});

i am amazed i found that! pat on the back😉

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😉