Page 1 of 1
Generating Values from inputs, quite easy!
Posted: Sat Sep 05, 2009 11:15 am
by oscardog
Hello
I have a ton of input, it's a scoreboard actually, and was wondering how I could get the value from the textfields(via their name, hopefully!) and then calculate the sum, and display the answers on the screen. Obviously all without refreshing the page, everytime a new value is entered somewhere(into any textfield) I want it to calculate it all again
I think it's quite simple, in terms of what JS can do, so can anyone give me a hand?
Thanks, if you want my msn or something then PM me and i'll add you when I have the chance, but help by posting would be awesome
Thanks again,
Oscardog
Re: Generating Values from inputs, quite easy!
Posted: Sat Sep 05, 2009 12:48 pm
by Darhazer
Use the getElementsByName() function to get all inputs with the given name.
Set the JS function as onChange() handler for each input. You can do this also with javascript:
Code: Select all
function calcscore() {
var score = 0;
var inputs = document.getElementsByName('score');
for (i=0; i<inputs.length; i++)
score += inputs[i].value;
alert(score);
}
var inputs = document.getElementsByName('score');
for (i=0; i<inputs.length; i++)
inputs.onchange = calcscore();
P.S. Code is not tested, so it's possible to have mistakes
Re: Generating Values from inputs, quite easy!
Posted: Sat Sep 05, 2009 1:54 pm
by oscardog
So, for that to work all the textfields have to have the same name?
So they all have to be named "score" , what if they're named differently like "score1" "score2" "score3" etc?
Thanks for your help
Oscardog
Re: Generating Values from inputs, quite easy!
Posted: Sat Sep 05, 2009 2:02 pm
by Darhazer
You can name them score[1], score[2] and so on
If they are named differently, you can either get all inputs (getElenemtsByTagName()) and check their name, or you can refer to each one explicitly. You said you prefer to get the values via the names, so this is why I've showed example with getElementsByName.
Re: Generating Values from inputs, quite easy!
Posted: Sat Sep 05, 2009 2:53 pm
by oscardog
Darhazer wrote:You can name them score[1], score[2] and so on
If they are named differently, you can either get all inputs (getElenemtsByTagName()) and check their name, or you can refer to each one explicitly. You said you prefer to get the values via the names, so this is why I've showed example with getElementsByName.
Right, i'll explain a little more
I have blocks of textfields(Varying, depending on user input, but normally 14 or 16) and there are 16blocks of these. I want to get the first 7, calculate the total of those, display it on the screen(Just as a normal static number, not as an alert).
They're named "ball0.1a" "ball0.1b" "ball0.2a" "ball0.2b" etc etc
So what would be the best way of going about that?
Thanks for all your help so far
Oscardog
Re: Generating Values from inputs, quite easy!
Posted: Sat Sep 05, 2009 3:20 pm
by Darhazer
Make a loop, compose the names in that loop, get the element via getElementsByName() (unless you cannot add an id to the input, then getElementById() will be the better choice) and calculate the result... then assign it to another input or to a div's content.
Re: Generating Values from inputs, quite easy!
Posted: Sun Sep 06, 2009 7:49 am
by oscardog
Darhazer wrote:Make a loop, compose the names in that loop, get the element via getElementsByName() (unless you cannot add an id to the input, then getElementById() will be the better choice) and calculate the result... then assign it to another input or to a div's content.
As i've never looked at JS before, i'm slightly confused...
I have inputs, 8 or so, get the values from just those eight, they're named:
ball0.1a, ball0.2a, ball0.3a, ball0.4a, ball0.5a, ball0.6a, ball0.7a, ball0.8a
Then get the sum of those 8, store in a var and display.
Then there are another bank of 8:
ball0.1b, ball0.2b, ball0.3b, ball0.4b, ball0.5b, ball0.6b, ball0.7b, ball0.8b
And then after a and b are done, it incrememnts the 0, so the next bank would be:
ball1.1a, ball1.2a, ball1.3a, ball1.4a, ball1.5a, ball1.6a, ball1.7a, ball1.8a etc
So how would I do that? :S
Re: Generating Values from inputs, quite easy!
Posted: Sun Sep 06, 2009 1:48 pm
by Darhazer
It's time to look at it. Read some manual. Here is a start - writing on prima vista, possible errors
Code: Select all
function score(num, letter) {
var sum = 0;
for (i = 1; i <=8; i++) {
name = 'ball' + num + '.' + i + letter; // construct the element name
sum += document.getElementsByName(name)[0].value;
}
alert(sum);
}
score(0,a);
score(0,b);
score(1,a);
You have to setup the onchange handlers, and to display the result instead of alerting it.
Re: Generating Values from inputs, quite easy!
Posted: Sun Sep 06, 2009 2:09 pm
by oscardog
Thankyou

I will look into it soon and let you know how it goes, thanks for your help, i'll try work out anything I can on my own but we'll see

Re: Generating Values from inputs, quite easy!
Posted: Sun Sep 06, 2009 5:17 pm
by oscardog
oscardog wrote:Thankyou

I will look into it soon and let you know how it goes, thanks for your help, i'll try work out anything I can on my own but we'll see

Right I got it to work, with an alert, and i've tried changing a div but it wont quite work...
Firstly, simple fix, it outputs "04" how can I remove the 0 and make it just "4".
I tried, with the div:
Code: Select all
document.getElementsByName(nameOfDivHere).value = sum;
Any help on those two things?
Re: Generating Values from inputs, quite easy!
Posted: Sun Sep 06, 2009 5:20 pm
by Darhazer
Only inputs have value. Only inputs can be accessed by name. The div contents can be altered with innerHTML, and can be accessed via id:
Code: Select all
document.getElementById(DivIdHere).innerHTML = sum;
Re: Generating Values from inputs, quite easy!
Posted: Mon Sep 07, 2009 7:30 am
by oscardog
Darhazer wrote:Only inputs have value. Only inputs can be accessed by name. The div contents can be altered with innerHTML, and can be accessed via id:
Code: Select all
document.getElementById(DivIdHere).innerHTML = sum;
Right, now i've played around with it for like an hour trying several different ways and testing with alerts but it just won't work... here is the code:
Code: Select all
var sum = 0;
var tempVal = 0;
var tempNum = 0;
var name = '';
for (i = 1; i <=7; i++) {
name = 'ball' + num + '.' + i + letter; // construct the element name
tempVal = document.getElementsByName(name)[0].value;
tempNum = Number(tempVal);
sum = sum + tempNum;
}
document.getElementById(divID).innerHTML = sum;
}
Before it just added the two numbers, so it would add 4 + 2 to make 42, rather than 6, so I fixed that
Now on the first block of 7, it works fine, updates it and changes it perfectly but when I then try it for the second block using the element:
Code: Select all
onchange="calcbatsmen(<?php echo $overVal . ", 'b', 'o1b2total'"; ?>)"
Which when looking at the source displays the right values it doesn't change, and when I look in firebug I get the error:
document.getElementsByName(name)[0] is undefined
calcbatsmen(Object name=num value=0, "b", "o1b2total")scoresheet.php (line 21)
function onchange(event) { calcbatsmen(0, "b", "o1b2total"); }(change )2 (line 2)
[Break on this error] tempVal = document.getElementsByName(name)[0].value;\n
And I have absolutely no idea how to fix it, i tried everything I could think of :S
Any help?
Re: Generating Values from inputs, quite easy!
Posted: Mon Sep 07, 2009 3:25 pm
by oscardog
Re: Generating Values from inputs, quite easy!
Posted: Mon Sep 07, 2009 3:49 pm
by Darhazer
add alert(name) before the line, to see what it's trying to access.
Additionally, if you send me the whole HTML, i'll take a look and I'll post the working code.
Re: Generating Values from inputs, quite easy!
Posted: Mon Sep 07, 2009 4:22 pm
by oscardog
Darhazer wrote:add alert(name) before the line, to see what it's trying to access.
Additionally, if you send me the whole HTML, i'll take a look and I'll post the working code.
PM'd you
