/    Sign up×
Community /Pin to ProfileBookmark

Adding numbers from dynamic textboxes

Copy linkTweet thisAlerts:
Aug 24.2004

I would like to add all the numbers entered into the text boxes.Compare it with another number say max =10.
If true submit if not do not submit.

Number of text boxes changes every time and they are created when certain “if statements” are true and thus each textbox’s name is different.Eg one could be window another could be door.

What I would like is this:

for all text boxes in the form (does not matter how many)
get their number values (user enters a number)
if any one value is null (means user did not enter anything at all)
display error message
else add all values up (assign it to total)
if total is equal or less than max (in this case, it is 10)
then return true on submit
else return false on submit

I am relatively new at this thing. I cannot hardcode because the number of text boxes changes every time with different names.

How do I write a javascript to get all the values in the text boxes in that form using a looping function?

How would I write this at onSubmit=”????” also?

Hope someone can provide an example for me.
Thanks a million.Appreciate all your help

to post a comment
JavaScript

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@javaNoobieAug 24.2004 — here's a simple example
<i>
</i>&lt;script type="text/javascript"&gt;
function Validate(frm){
var txtArr = document.getElementsByName("txt") //returns a collection of elements by name of 'txt'
var total = 0;
var MAX = 10; //constant value to define the max point the total should reach
for(var i=0; i&lt;txtArr.length;i++){
if(txtArr[i].value ==""){
alert("No empty textbox(es) allowed");
return false;
}else{
total += Number(txtArr[i].value);
}
}
alert(total);
if(total&gt;MAX){
alert("Total is more than " + MAX );
return false;
}

<i> </i>return true;

} //close function
&lt;/script&gt;

&lt;form method="post" action="" onSubmit="return Validate(this)"&gt;
&lt;!-- assuming the following textboxes are generated from script --&gt;
&lt;input type="text" name="txt" /&gt;
&lt;input type="text" name="txt" /&gt;
&lt;input type="text" name="txt" /&gt;
&lt;input type="text" name="txt" /&gt;
&lt;input type="text" name="txt" /&gt;
&lt;input type="text" name="txt" /&gt;
&lt;input type="submit" value="submit"/&gt;
&lt;/form&gt;
Copy linkTweet thisAlerts:
@KorAug 24.2004 — Hm... I am noty very sure but I think that is not a good ideea to give forms elements (except for radio type) the same name. I am not very sure how the CGI will interpret it after submit.

... maybe a DOM aprouch (let's say based on childNodes) would have been a much more semantically correct...
Copy linkTweet thisAlerts:
@javaNoobieAug 24.2004 — haha.. i did say it was a simple example (though not a very good one):rolleyes: feel free to edit it or post a better example(which will be posted soon no doubt :p )
Copy linkTweet thisAlerts:
@Willy_DuittAug 24.2004 — I'll throw mine into the mix... ?

I do not know how you are dynamiclly generating these inputs and what if any validation you have planned to insure what is inputted into the text boxes is indeed a number but...

The below will validate the text boxes onkeyup and onchage if the validation function is called without the maxNumber arguement... If you do not need this functionality, just remove the first conditional script block... Also, be sure that the maxNumber is passed as an arguement on the form onsubmit event....

<i>
</i>&lt;script type="text/javascript"&gt;
&lt;!--//
function validate(form,maxNumber){
if(!maxNumber){
if(form.value.length &gt; 0 &amp;&amp; !form.value.match(/^[0-9]+$/g)){
alert('Please enter only numbers in this field!');
form.value = form.value.replace(/[^0-9]*/g,'');
form.focus(); return false;
}
}

<i> </i>if(maxNumber){
<i> </i> var total = 0;
<i> </i> for(var i=0; i&lt;form.elements.length; i++){
<i> </i> if(form.elements[i].type.match(/text/i)){
<i> </i> if(form.elements[i].value.length == 0){
<i> </i> alert('All fields must be completed!');
<i> </i> form.elements[i].focus(); return false;
<i> </i> } else{ total += form.elements[i].value/1; }
<i> </i> }
<i> </i> }
<i> </i>}

<i> </i>if(total &gt; maxNumber){
<i> </i> alert('The Total is higher than Max Number allowed!');
<i> </i> return false;
<i> </i>} return true;
}
//--&gt;
&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;form onsubmit="return validate(this[b][color=red],10[/color][/b])"&gt;
&lt;input type="text" onkeyup="validate(this)" onchange="validate(this)"&gt;&lt;/br&gt;
&lt;input type="text" onkeyup="validate(this)" onchange="validate(this)"&gt;&lt;/br&gt;
&lt;input type="text" onkeyup="validate(this)" onchange="validate(this)"&gt;&lt;/br&gt;
&lt;input type="text" onkeyup="validate(this)" onchange="validate(this)"&gt;&lt;/br&gt;
&lt;input type="text" onkeyup="validate(this)" onchange="validate(this)"&gt;&lt;/br&gt;
&lt;input type="text" onkeyup="validate(this)" onchange="validate(this)"&gt;&lt;/br&gt;
&lt;input type="submit" value="submit"&gt;
&lt;/form&gt;


.....Willy

[b]Edit:[/b] Ooops, removed an unneeded maxNumber reference....
Copy linkTweet thisAlerts:
@KorAug 24.2004 — I guess that you might need a non numeric filter either:

Try this:
[code=php]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
function isNumber(t,v) {
var re = /^[0-9]*$/;
if (!re.test(v)) {
alert("Value must be all numeric characters, non numeric's removed from field!");
t.value = v.replace(/[^0-9]/g,"");
}
}
function verify(f){
tot=0;
Max=10;//nr max
for (var i=0;i<f.elements.length;i++){
if(f.elements[i].type=='text'){
if(f.elements[i].value.length<1){
alert('Please complete the field!');
f.elements[i].focus();
return false;
}
else{tot=tot+Number(f.elements[i].value)}
}
}
if(tot>Max){
alert('The total is > '+Max);
return false
}
else if(tot<=Max){
alert('The total is <= '+Max+' and the form will be submitted!');
return true;
}
}
</script>
</head>
<body>
<form onsubmit="return verify(this)">
<input name="apple" type="text" onkeyup="isNumber(this,this.value)"><br>
<input name="krokodile" type="text"><br>
<input name="lemon" type="text"><br>
<input name="reddevil" type="text"><br>
<input name="Submit" type="submit" value="Submit">
</form>
</body>
</html>
[/code]
Copy linkTweet thisAlerts:
@KorAug 24.2004 — It looks like me and Willy have independently almost the same thoughts...?
Copy linkTweet thisAlerts:
@james_cwyauthorAug 25.2004 — Thanks for the examples guys.

I will try them out.

Once again, thanks for the help.

Really appreciate it.

James
×

Success!

Help @james_cwy 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 6.17,
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: @nearjob,
tipped: article
amount: 1000 SATS,

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

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...