Generating Values from inputs, quite easy!

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
oscardog
Forum Contributor
Posts: 245
Joined: Thu Oct 23, 2008 4:43 pm

Generating Values from inputs, quite easy!

Post 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
User avatar
Darhazer
DevNet Resident
Posts: 1011
Joined: Thu May 14, 2009 3:00 pm
Location: HellCity, Bulgaria

Re: Generating Values from inputs, quite easy!

Post 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
oscardog
Forum Contributor
Posts: 245
Joined: Thu Oct 23, 2008 4:43 pm

Re: Generating Values from inputs, quite easy!

Post 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
User avatar
Darhazer
DevNet Resident
Posts: 1011
Joined: Thu May 14, 2009 3:00 pm
Location: HellCity, Bulgaria

Re: Generating Values from inputs, quite easy!

Post 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.
oscardog
Forum Contributor
Posts: 245
Joined: Thu Oct 23, 2008 4:43 pm

Re: Generating Values from inputs, quite easy!

Post 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
User avatar
Darhazer
DevNet Resident
Posts: 1011
Joined: Thu May 14, 2009 3:00 pm
Location: HellCity, Bulgaria

Re: Generating Values from inputs, quite easy!

Post 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.
oscardog
Forum Contributor
Posts: 245
Joined: Thu Oct 23, 2008 4:43 pm

Re: Generating Values from inputs, quite easy!

Post 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
User avatar
Darhazer
DevNet Resident
Posts: 1011
Joined: Thu May 14, 2009 3:00 pm
Location: HellCity, Bulgaria

Re: Generating Values from inputs, quite easy!

Post 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.
oscardog
Forum Contributor
Posts: 245
Joined: Thu Oct 23, 2008 4:43 pm

Re: Generating Values from inputs, quite easy!

Post 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 :)
oscardog
Forum Contributor
Posts: 245
Joined: Thu Oct 23, 2008 4:43 pm

Re: Generating Values from inputs, quite easy!

Post 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?
User avatar
Darhazer
DevNet Resident
Posts: 1011
Joined: Thu May 14, 2009 3:00 pm
Location: HellCity, Bulgaria

Re: Generating Values from inputs, quite easy!

Post 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;
oscardog
Forum Contributor
Posts: 245
Joined: Thu Oct 23, 2008 4:43 pm

Re: Generating Values from inputs, quite easy!

Post 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?
oscardog
Forum Contributor
Posts: 245
Joined: Thu Oct 23, 2008 4:43 pm

Re: Generating Values from inputs, quite easy!

Post by oscardog »

Anyone? :?: :roll: :D
User avatar
Darhazer
DevNet Resident
Posts: 1011
Joined: Thu May 14, 2009 3:00 pm
Location: HellCity, Bulgaria

Re: Generating Values from inputs, quite easy!

Post 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.
oscardog
Forum Contributor
Posts: 245
Joined: Thu Oct 23, 2008 4:43 pm

Re: Generating Values from inputs, quite easy!

Post 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 :)
Post Reply