Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Anyone know how to use auto calculate js?

Featured Replies

Please be aware I am a total novice. I am trying to teach myself so that I can build my own site for my business so please explain things like you are talking to a 3 possibly 4 year old!

 

Here's the link to my page. I am trying to build a form that auto calculates on the fly. My problem is I want sub totals along the way and for it not to interfere with the other calcs. How do I do this?

 

Any help will be hugely appreciated and will +1 for your troubles,

 

Thanks,

 

Jason

  • Author

Sorry forgot the code:

 

JS:

 

<script type="text/javascript" language="javascript">

function autocalc(oText)
{
if (isNaN(oText.value)) //filter input
{
alert('Numbers only!');
oText.value = '';
}
var field, val, oForm = oText.form, total = a = 0;
for (a; a < arguments.length; ++a) //loop through text elements
{
field = arguments[a];
val = parseFloat(field.value); //get value
if (!isNaN(val)) //number?
{
total += val; //accumulate
}
}
oForm.total.value = total; //out
}


</script>

 

html:

 

<form class="costs">

<table>
<tbody>

<div class="greyheader"><h2>Selling Costs</h2></div>

<tr>
<td width="510px"><label for="ea">Estate Agency Fee:</label></td>
<td width="90px"> £ <input id="ea" name="t1" type="text" onkeyup="return autocalc(this,t2,t3)" tabindex="1"/></td>
</tr>

<tr>
<td><label for="rp">Mortgage Redemption Penalty: <span class="explination">(On existing mortgage)</span></label></td>
<td>£ <input type="text" id="rp" name="t2" onkeyup="return autocalc(this,t1,t3)" tabindex="2"/></td>
</tr>

<tr>
<td><label for="lcs">Legal costs:</label></td> 
<td>£ <input type="text" id="lcs" name="t3" onkeyup="return autocalc(this,t1,t2)" tabindex="3"/></td>
</tr>

<tr>
<td class="bold">(A) Total Selling Costs:</td> 
<td>£ <input type="text" name="total" readonly="readonly" value="0" tabindex="-1"/></td>
</tr>
</tbody>
</table>

<div class="greyheader2"><h2>Purchasing Costs</h2></div>
<div class="greyheader3"><h3>Potential Up Front Costs</h3></div>

<table>
<tbody>

<tr>
<td width="510px"><label for="vf">Valuation/Survey Fee: <span class="explination">(non-refundable unless specified)</span></label></td>
<td width="90px">£ <input type="text" id="vf" name="t4" onkeyup="return autocalc(this,t5,t6)" tabindex="4" /></td>
</tr>

<tr>
<td><label for="af">Arrangement Fee:<span class="explination">(non-refundable unless specified. Can often be added)</span></label></td>
<td>£ <input type="text" id="af" name="t5" onkeyup="return autocalc(this,t4,t6)" tabindex="5" /></td>
</tr>

<tr>
<td><label for="lcp">Legal costs: <span class="explination">(eg. searches, etc)</span></label></td>
<td>£ <input type="text" id="lcp" name="t6" onkeyup="return autocalc(this,t4,t5)" tabindex="6" /></td>
</tr>

<tr>
<td><span class="bold">( Total Up Front Costs:</span></td>
<td>£ <input type="text" name="Total Up Front Costs"/></td>
</tr>
</tbody>
</table>

<div class="greyheader4"><h3>Costs on Exchange & Completion</h3></div>

<table>
<tbody>
<tr>
<td width="510px"><label for="hlf">Higher Lending Fee:</label></td>
<td width="90px">£ <input type="text" id="hlf" name="Higher Lending Fee" /></td>
</tr>

<tr>
<td><label for="lf">Legal Fee:<span class="explination">(Solicitors/Conveyancers Fee)</span></td>
<td></label>£ <input type="text" id="lf" name="Legal Fee" /></td>
</tr>

<tr>
<td><label for="sd">Stamp Duty:</label></td>
<td>£ <input type="text" id="sd" name="Stamp Duty" /></td>
</tr>

<tr>
<td><label for="re">Removals:</label></td>
<td>£ <input type="text" id="re" name="Removals" /></td>
</tr>
<tr>
<td><label for="ot">Other:<span class="explination">(Reconnection of utilities, etc)</span></label></td>
<td>£ <input type="text" id="ot" name="Other costs" /></td>
</tr>
<tr>
<td><span class="bold">(C) Total Completion Costs:</span></td>
<td>£ <input type="text" name="Total Up Front Costs"/></td>
</tr>
<tr>
<td><label class="bold" for="dep">(D) Deposit:</label></td>
<td>£ <input type="text" id="dep" name="Deposit" /></td>
</tr>
<tr>
<td><span class="bold">Total Costs: (A+B+C+D)</span></td> 
<td>£ <input type="text" name="Total Costs"/></td>
</tr>
</tbody>
</table>

</form>

  • Author

I have done a little more now so that all the editable fields total up at the bottom so just need to figure out how to total fields A, B & C - btw its probably littered with spelling mistakes as the site isn't indexed yet and hasn't been proof read. I can post the updated code if anyone thinks it will help.

  • Author

Sorry to keep bumping this thread but I have searched high and low online to try to find a solution.

 

Here is my script and if possible could someone just point to the bits of code that I can change in order to run other calculations +/*- etc. Its a form which is going to be about 23 fields long see attachment that I've put together for purpose. I need it to be able to run other calculations other than just totalling some of the fields. For example it needs to subtract the total costs from the total sum of sale price and existing savings and put the answer in the 'Money left over for deposit' field. Hopefully someone can give me some directions

bigcostformtest.html

wdf.css

Sorry to keep bumping this thread but I have searched high and low online to try to find a solution.

 

Here is my script and if possible could someone just point to the bits of code that I can change in order to run other calculations +/*- etc. Its a form which is going to be about 23 fields long see attachment that I've put together for purpose. I need it to be able to run other calculations other than just totalling some of the fields. For example it needs to subtract the total costs from the total sum of sale price and existing savings and put the answer in the 'Money left over for deposit' field. Hopefully someone can give me some directions

All this can be done using simple math such as

 

function cal(){
var total = 2.53;
var sum = 1.25;

document.write(total - sum);
}

 

You can also use some special math functions if you need to round up or down or round both ways these are some u can use

 

Math.round();//Rounds up and down
Math.ceil();//Rounds up only

 

Like the example i gave u would need to be rounded so u could round it like this

 

document.write(Math.round(total - sum));  

and it would round to 1 or if u wanna just round up u would do

 

document.write(Math.ceil(total - sum));  

 

Hope this helps some

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.