...

View Full Version : Creating a Result Sheet using Javascript



gazza3665
01-01-2011, 08:35 PM
I run a website for a skittle league and am looking to create a form to allow teams to sumbit results on line.

I'm not an expert on Javascript, the code I've created so far allows the user to enter the player name and score for one team and calcutate the total. However, I'm having problems duplicating this for a second team, and would like to remove the Get Total button (i.e. Auto Calculate total).

Can anyone advise how I can do this.

The Code I have so far is

<html>
<head>
<script type="text/javascript" language="javascript">
function getTotalH1(oForm)
{
var field, i = 0, total = 0, els = oForm.elements;
var fieldnames = ['PSH1' , 'PSH2' , 'PSH3' , 'PSH4' , 'PSH5'];
for (i; i < fieldnames.length; ++i)
{
field = els[fieldnames[i]];
if (field.value != '' && isNaN(field.value))
{
alert('Please enter a valid number here.')
field.focus();
field.select();
return '';
}
else total += Number(field.value);
}
return ' ' + total;
}
</script>
</head>
<body>
<form>
<div align="center"><table border="0" cellpadding="2" cellspacing="0" width="305">
<col width="250" align="left">
<col width="42" align="center">
<tr>
<td><input type="text" name="PNH1" size="35"> </td>
<td><input id="PSH1" type="text" name="PSH1" value="" size="4"></td>
</tr>
<tr>
<td><input type="text" name="PNH2" size="35"></td>
<td><input id="PSH2" type="text" name="PSH2" value="" size="4"></td>
</tr>
<tr>
<td><input type="text" name="PNH3" size="35"></td>
<td><input id="PSH3" type="text" name="PSH3" value="" size="4"></td>
</tr>
<tr>
<td><input type="text" name="PNH4" size="35"></td>
<td><input id="PSH4" type="text" name="PSH4" value="" size="4"></td>
</tr>
<tr>
<td><input type="text" name="PNH5" size="35"></td>
<td><input id="PSH5" type="text" name="PSH5" value="" size="4"></td>
</tr>
<tr>
<td><input type="button" value="Get Total" onclick="total.value=getTotalH1(this.form)" />
<input type="reset" /></td>
<td><input id="total" type="text" name="totalh1" value="" readonly="readonly" size="4"></td>
</tr>
</table></div>
<br><br>
</form>
</body>
</html>

thanks

jmrker
01-02-2011, 02:18 AM
I don't know enough about 'skittle' to know what you need.

what does the first and second column of the 5 rows represents?
Team name? Score and format of score??)

What is the non-working part or do you need to duplicate the 2x5 display?


BTW: You should surround your script with [ code] and [ /code] tags (without the spaces)
to make it easier for the forum members to read and comment upon.
You can edit your 1st post to see the effect.

gazza3665
01-12-2011, 08:22 PM
I've been working on a form using scripts I've found and have created the following form which can be found via the following link (thought it would be easier rather than pasting in the code)

http://www.stroudskittles.co.uk/test/scorecard.html

I've added hints to explan what needs to be entered

As you will see there are two halves with 5 players per team. For each half the Player names and Scores can be entered, with the totals added automatically. What am looking to do is add together the totals for the two halves without the need to click on the link.

Can anyone advise if this is possible

Thanks

jmrker
01-13-2011, 12:47 AM
In you function calls for the onBlur events, for example


function calcA1() {
AS1 = document.clock.AS1.value;
AS2 = document.clock.AS2.value;
AS3 = document.clock.AS3.value;
AS4 = document.clock.AS4.value;
AS5 = document.clock.AS5.value;
document.clock.TotalA1.value = (AS1 * 1) + (AS2 * 1) + (AS3 * 1) + (AS4 * 1) + (AS5 * 1);
addNumbersA();
}

Try adding the call in RED

gazza3665
01-13-2011, 07:40 PM
Unfortunately it doesn't appear to work

Currently on the sampe Result card (which can be found at

http://www.stroudskittles.co.uk/test/scorecard.html

I can add the scores for each team for each half (i.e. First Half Away Scores - AS1 + AS2 + AS3 + AS4 + AS5 = A1, then Second Half Aways Scores - AS6 + AS7 + AS8 + AS9 + AS10 = A2) then automatically Generate a Total for each team for each half.

To obtain the overall total (i.e. A1 + A2) the user needs to Click on the Button. I am hoping I can create this automatically.

This then removes the possibilities of error when people add up numbers.

Any assistance would be appreciated

Many Thanks

jmrker
01-13-2011, 10:42 PM
Unfortunately it doesn't appear to work

...

What error did you get?
What happened?

The link you posted does not contain the change I suggested. :confused:

gazza3665
01-14-2011, 06:54 PM
Many Thanks for your Help it is working well

Form uploaded as http://www.stroudskittles.co.uk/scorecard1.html

Now just have to look at how to format the email

jmrker
01-15-2011, 01:50 AM
Many Thanks for your Help it is working well

Form uploaded as http://www.stroudskittles.co.uk/scorecard1.html

Now just have to look at how to format the email

You're most welcome.
Happy to help.
Good Luck!
:)

BTW: The last post has a broken link so we cannot see what you changed to make it work.

Jimather
01-15-2011, 02:01 AM
I think you just need to put the test folder back in the url.

http://www.stroudskittles.co.uk/test/scorecard1.html

jmrker
01-15-2011, 03:00 AM
You get a 'NaN' when the entries are made to only one of the 4 sections.
It becomes correct when values are entered into top & bottom sections.

You might want to check the fields for a blank ('' string) and set to 0 (zero) when found.
You could also test for the NaN error and change the field to 0 (zero)

Only a suggestion ... :)

Good Luck!

gazza3665
01-15-2011, 09:26 AM
Thanks for the suggestion, I was wondering how to remove the NaN and have now done so, have added the value option and it works

http://www.stroudskittles.co.uk/test/scorecard3.html

Thanks for your help

jmrker
01-16-2011, 02:49 AM
Thanks for the suggestion, I was wondering how to remove the NaN and have now done so, have added the value option and it works

http://www.stroudskittles.co.uk/test/scorecard3.html

Thanks for your help

Better ... Final question: What do the [?] areas represent?
Reference to a pop-up help display or field description?

gazza3665
01-16-2011, 06:30 PM
They are Help Tips so people know what to enter in the boxes

A useful peice of Javascript I found which gives people some guidance

gazza3665
01-28-2011, 07:58 PM
On my Result Card form I'm trying to add a box which automatically creates the points.

I know I need to use the if and else if command

What I'm trying to achieve is

If TotalH1 > TotalA1 Value = 2
else if TotalH1 = TotalA1 Value = 1
else TotalH1 < TotalA1 Value = 0

Can anyone help on making a script

The link for the Card is http://www.stroudskittles.co.uk/test/scorecard.html

Philip M
01-28-2011, 08:18 PM
if (TotalH1 > TotalA1) {Value = 2}
else if (TotalH1 == TotalA1) {Value = 1}
else if (TotalH1 < TotalA1) {Value = 0}


All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

gazza3665
01-28-2011, 08:42 PM
Thanks

how do I get this to display in a Text Box as I can't get this to appear on the page

gazza3665
01-28-2011, 09:02 PM
Thanks

How do I put the Javascript into a Text box as I can't seemm to get it to Display

Philip M
01-29-2011, 08:26 AM
Thanks

how do I get this to display in a Text Box as I can't get this to appear on the page

Looking at post#15, that was just an example. It is not at all a good idea to use Value as the name of a variable - too easily confused with value.


var result = 0;
if (TotalH1 > TotalA1) {result = 2}
else if (TotalH1 == TotalA1) {result = 1}
document.formname.mytextboxname.value = result;
// or document.getElementById("mytextboxid").value = result;

gazza3665
01-29-2011, 11:01 AM
Thanks, however I still can't get the number to display, I'm not that clued up on javascript.

I've added the following script in a Text Box next to the text 1st Half Scores

<input type=text name="PointsH1" size="2" value=""><script language="JavaScript1.2">
<script language="JavaScript1.2">
var result = 0;
if (TotalH1 > TotalA1) {result = 2}
else if (TotalH1 == TotalA1) {result = 1}
document.formname.mytextboxname.value = result;
// or document.getElementById("mytextboxid").value = result;</script>

But nothing displays

Clearly I'm not doing something correct.

The page can be found at http://www.stroudskittles.co.uk/test/scorecard.html

Could anyone give me any clues.

Thanks

Philip M
01-29-2011, 01:04 PM
First of all, you have
<script language="JavaScript1.2">
twice. That stops it working. But in any case <script language=javascript> is long deprecated and obsolete. Use <script type = "text/javascript"> instead.

And have you closed the script with a </script> tag?

Where do TotalH1 and TotalA1 come from? How does PointsH1 fit in? You may not use exactly the same name or id for a Javascript variable and an HTML form element.

It is no use just pasting the example script in blindly. You must adjust the references in document.formname.mytextboxname.value = result;
to the actual names or ids of the elements. As I see it your form has the rather misleading name of clock.

<input type = "text" name = "mytextboxname" id = "mytextboxid" size = "2" readonly>

The example extended:-


<script type = "text/javascript">
function showresult() {
var result = 0;
var TA1 = document.formname.TotalA1.value; // where formname is the actual name of your form
var TH1 = document.formname.TotalH1.value;
if (TH1 > TA1) {result = 2}
else if (TH1 == TA1) {result = 1}
document.formname.mytextboxname.value = result;
// or document.getElementById("mytextboxid").value = result;
}
</script>

But I have the feeling that you are trying to run before you can walk. You say "I'm not that clued up on javascript" - I suspect that over-rates your ability here. As things are it seems like trying to teach you to swim by correspondence course :D

gazza3665
01-29-2011, 08:29 PM
TotalH1 is the sum of the 5 scores for the home team, whilst TotalA1 is the the same for the away team. Entering 5 scores in the boxes adds them up.

If TotalH1 is greater than TotalA1 then the Home team picks up 2 points.

Once I can get this to work for the first half I can repeat for the second and total, create the overall points and pass this through to the form



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum