/    Sign up×
Community /Pin to ProfileBookmark

Help with Javascript coding

Copy linkTweet thisAlerts:
May 30.2007

I have a form that I built with FormCalc in a PDF. I am now trying to do the same thing with HTML and Javascript. I have looked on the internet but all I am finding is how to fill in the forms and then click a submit button to do all the addition. I would rather have it calculate automatically as you tab off each cell. Any help would be greatly appreciated. The link to the current pdf that I am working on is below

[url]http://www.sincityharley.com/temp/travelexpense1.pdf[/url]

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@toicontienMay 31.2007 — Some sample code:
[code=html]<input type="text" onblur="doSomethingFunction();">[/code]
You can use the onblur event handler, so when the user tabs off a form field, it executes a function. In this case I had it execute the generically named doSomethingFunction(); You'd want to replace that with a function name that better describes what the function does, like calculateTax() if it were calculating sales tax, for instance.
Copy linkTweet thisAlerts:
@sincityharleyauthorMay 31.2007 — Ok so I built it with the onblur tag. How would I now get each box to automaticall add the numbers and total them in the total boxes?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>test</title>

</head>

<body>

<table width="100%" height="79" border="0">

<tr>

<td width="65%"><img src="" alt="test" name="test" width="28" height="30" id="test" style="background-color: #000000" /></td>

<td width="35%" valign="bottom"><h3><strong>test</strong></h3></td>

</tr>

</table>

<br>

<table width="100%" height="28" border="0">

<tr>

<td width="32%" align="left" valign="top">Name :

<input name="fullName" type="text" size="50" /></td>

<td width="68%" align="left" valign="top">Expenses from: </td>

</tr>

</table>

<table width="100%" height="109" border="0">

<tr>

<td><p>Business Purpose:


<textarea name="businessPurpose" cols="100" rows="5"></textarea>

</p>

<p>&nbsp;</p>

<p>Cash / Out of Pocket Expenses (Include personal VISA) </p></td>

</tr>

</table>

<table width="100%" border="1">

<tr>

<td width="11%"><strong>Description</strong></td>

<td width="12%"><strong>Sun</strong></td>

<td width="11%"><strong>Mon</strong></td>

<td width="11%"><strong>Tue</strong></td>

<td width="9%"><strong>Wed</strong></td>

<td width="8%"><strong>Thu</strong></td>

<td width="6%"><strong>Fri</strong></td>

<td width="7%"><strong>Sat</strong></td>

<td width="11%"><strong>Total</strong></td>

</tr>

<tr>

<td>Mileage/Airfare Exp. </td>

<td>

<input name="sun1" type="text" size="20" onblur="calculateSum" />

</td>

<td>

<input name="mon1" type="text" size="20" onblur="calculateSum" />

</td>

<td>

<input name="tue1" type="text" size="20" onblur="calculateSum" />

</td>

<td>

<input name="wed1" type="text" size="20" onblur="calculateSum" />

</td>

<td>

<input name="thu1" type="text" size="20" onblur="calculateSum" />

</td>

<td>

<input name="fri1" type="text" size="20" onblur="calculateSum" />

</td>

<td>

<input name="sat1" type="text" size="20" onblur="calculateSum" />

</td>

<td>

<input name="total1" type="text" size="20" onblur="calculateSum" />

</td>

</tr>

<tr>

<td>Taxi/Rental/Bus</td>

<td>

<input name="sun2" type="text" size="20" onblur="calculateSum" />

</td>

<td>

<input name="mon2" type="text" size="20" onblur="calculateSum" />

</td>

<td>

<input name="tue2" type="text" size="20" onblur="calculateSum" />

</td>

<td>

<input name="wed2" type="text" size="20" onblur="calculateSum" />

</td>

<td>

<input name="thu2" type="text" size="20" onblur="calculateSum" />

</td>

<td>

<input name="fri2" type="text" size="20" onblur="calculateSum" />

</td>

<td>

<input name="sat2" type="text" size="20" onblur="calculateSum" />

</td>

<td>

<input name="total2" type="text" size="20" onblur="calculateSum" />

</td>

</tr>

<tr>

<td>Hotel/Motel</td>

<td>

<input name="sun3" type="text" size="20" onblur="calculateSum" />

</td>

<td>

<input name="mon3" type="text" size="20" onblur="calculateSum" />

</td>

<td>

<input name="tue3" type="text" size="20" onblur="calculateSum" />

</td>

<td>

<input name="wed3" type="text" size="20" onblur="calculateSum" />

</td>

<td>

<input name="thu3" type="text" size="20" onblur="calculateSum" />

</td>

<td>

<input name="fri3" type="text" size="20" onblur="calculateSum" />

</td>

<td>

<input name="sat3" type="text" size="20" onblur="calculateSum" />

</td>

<td>

<input name="total3" type="text" size="20" onblur="calculateSum" />

</td>

</tr>

<tr>

<td>Meals (inc. tips) </td>

<td>

<input name="sun4" type="text" size="20" onblur="calculateSum" />

</td>

<td>

<input name="mon4" type="text" size="20" onblur="calculateSum" />

</td>

<td>

<input name="tue4" type="text" size="20" onblur="calculateSum" />

</td>

<td>

<input name="wed4" type="text" size="20" onblur="calculateSum" />

</td>

<td>

<input name="thu4" type="text" size="20" onblur="calculateSum" />

</td>

<td>

<input name="fri4" type="text" size="20" onblur="calculateSum" />

</td>

<td>

<input name="sat4" type="text" size="20" onblur="calculateSum" />

</td>

<td>

<input name="total4" type="text" size="20" onblur="calculateSum" />

</td>

</tr>

<tr>

<td>Parking/Tolls </td>

<td>

<input name="sun5" type="text" size="20" onblur="calculateSum" />

</td>

<td>

<input name="mon5" type="text" size="20" onblur="calculateSum" />

</td>

<td>

<input name="tue5" type="text" size="20" onblur="calculateSum" />

</td>

<td>

<input name="wed5" type="text" size="20" onblur="calculateSum" />

</td>

<td>

<input name="thu5" type="text" size="20" onblur="calculateSum" />

</td>

<td>

<input name="fri5" type="text" size="20" onblur="calculateSum" />

</td>

<td>

<input name="sat5" type="text" size="20" onblur="calculateSum" />

</td>

<td>

<input name="total5" type="text" size="20" onblur="calculateSum" />

</td>

</tr>

</table>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

</body>

</html>
[/QUOTE]
Copy linkTweet thisAlerts:
@toicontienMay 31.2007 — Change onblur="calculateSum" to [B]onblur="calculateSum(this);"[/B]

It needs to be a JavaScript function call. Now you need a JavaScript function to do the work.

function calculateSum(obj) {
// Your code here
}
×

Success!

Help @sincityharley spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.20,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...