Javascript form validation sum of input boxes <= 10

[JasonDFR]

I have a form with dynamiclly created <input /> fields.

One type=hidden field.
An unknown number of type=text fields.
One type=submit

I need to first, validate that the user submitted value of the type=text fields is numeric, and second, validate that the total of the numeric values in each type=text field is 10 or less.

I've done the PHP for this, but I want to always use javascript as well where possible to validate the form before it is submitted.

The javascript below is my first try, and it is not working. Please point me in the right direction.


<!--

function validate_vote(form)
{
valid = true;

var theForm = document.getElementById("vote_chronicles");
var inputs = theForm.getElementsByTagName("input");
var vote_count = 0;

foreach( inputs ){

if(inputs[i].type == "text"){

vote_count = (vote_count + inputs[i].value);

}
}

if (vote_count > 10) {

alert("Total votes cannot total more than 10");
valid = false;

}

return valid;
}
//-->

And the PHP / HTML ( if you want to critique this code as well, please do)


<form id="vote_chronicles" action="vote_chronicles_action.php" method="post" onsubmit="return validate_vote(this);">

<?php
if ( isset($_GET['msg']) ) {
if ( $_GET['msg'] == 1 ) { echo '<p class="error">The total number of votes cannot exceed 10</p>';}
}
?>

<fieldset>

<input type="hidden" name="vote_chronicles" value="set" />

<?php
while ($row = mysql_fetch_assoc($r)) { ?>

<div class="vc_container">

<a href=""><img src="/medias/chronicles/<?php echo $row['vc_ sm_photo_name']; ?>" alt="<?php echo $row['theme_name']; ?>" /></a>

<p>Theme: <?php echo $row['theme_name']; ?></p>
<p>Submitted by: <?php echo $row['name']; ?></p>

<p><?php echo substr($row['vc_text'], 0, 250); ?>... <a href="/blog/?p=<?php echo $row['vc_blog_page']; ?>">(Read More)</a></p>

<label for="<?php echo $row['vc_id']; ?>">Number of Votes: <input class="vote_input" name="<?php echo $row['vc_id']; ?>" type="text" maxlength="2" /></label> <!-- vc_id for database -->

</div> <!-- end vote_chronicle_container -->

<?php } ?>

<input class="submit" type="submit" name="submit" value="Vote!" />

</fieldset>

</form>

Thanks a lot guys!

Jason

[JasonDFR]

Ok, I've got this now, but no luck...


function validate_vote(form)
{
valid = true;

var theForm = document.getElementById("vote_chronicles");
var inputs = theForm.getElementsByTagName("input");
var vote_count = 0;

for(i=0; i <= inputs.length; i++ ){

if(inputs[i].type == "text"){

vote_count = (vote_count + inputs[i].value);

}
}

if (vote_count > 10) {

alert("Total votes cannot total more than 10");
valid = false;

}

return valid;
}
//-->

[magicyte]

This may work. You need the word 'var' before valid.


function validate_vote(form)
{
var valid = true;

var theForm = document.getElementById("vote_chronicles");
var inputs = theForm.getElementsByTagName("input");
var vote_count = 0;

for(i=0; i <= inputs.length; i++ ){

if(inputs[i].type == "text"){

vote_count = (vote_count + inputs[i].value);

}
}

if (vote_count > 10) {

alert("Total votes cannot total more than 10");
valid = false;

}

return valid;
}
//-->

-magicyte

[JasonDFR]

Thanks for the response Magic, but it did not work.

I've got the following now. The sum is assigned to voteCount inside the loop, but I can't seem to use voteCount in the "if (voteCount > 10) {" piece. This if statement seems to be ignored. Do I have to do something to the value of voteCount once the loop is finished?

Thanks!


function validate_vote(form)
{
var valid = true;

var theForm = document.getElementById("vote_chronicles");
var inputs = theForm.getElementsByTagName("input");
var voteCount = 0;

for(i=0; i <= inputs.length; i++ ){

if( (inputs[i].type == "text") && !(inputs[i].name == "total") ){

value = inputs[i].value;
value = Number(value);
voteCount = (voteCount + value);
}
}

if (voteCount > 10) {

alert(voteCount);
valid = false;

}

return valid;
}

[rangana]

Please show us the generated markup instead.

[JasonDFR]

Here is the generated code. Is there such a thing as "loop scope?" The total variable works inside the for loop, but I can't use it once the loop is finished.


<script language="javascript" type="text/javascript">
<!--

function validate_vote(form)
{
valid = true;

theForm = document.getElementById("vote_chronicles");
inputs = theForm.getElementsByTagName("input");
total = 0;

for(i=0; i <= inputs.length; i++ ){

if( (inputs[i].type == "text") && !(inputs[i].name == "total") ){
value = inputs[i].value;
value = Number(value);
total = total + value;
}
}

if ( total > 10 ) {

alert("The total of your votes cannot be greater than 10.");
valid = false;

}

return valid;
}
//-->
</script>

</head>

<body>

<div id="header">

<h1><a href="/"><img src="/medias/homelink.gif" alt="Retour à l'accueil" width="240px" height="110px" /></a></h1>

</div> <!-- end header -->

<!-- end header.php -->

<div id="content">

<h2>Vote for your favorite chronicle</h2>

<form id="vote_chronicles" action="vote_chronicles_action.php" method="post" onsubmit="return validate_vote(this);">

<fieldset>

<input type="hidden" name="vote_chronicles" value="set" />


<div class="vc_container">

<a href=""><img src="/medias/chronicles/concert.png" alt="Sample" /></a>

<p>Theme: Sample</p>

<p>Submitted by: Jason DeBord</p>

<p>dfdsfdsfds dsf f df dsf df ds fds... <a href="/blog/?p=6">(Read More)</a></p>

<label for="3">Number of Votes: <input name="3" type="text" maxlength="2" /></label> <!-- vc_id for database -->

</div> <!-- end vote_chronicle_container -->


<div class="vc_container">

<a href=""><img src="/medias/chronicles/concert.png" alt="Limoges Concert" /></a>

<p>Theme: Limoges Concert</p>
<p>Submitted by: Jason DeBord</p>

<p>Sample Text. 5 rue de xxxxxxxxxxxxx xxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxx <a href="/blog/?p=4">(Read More)</a></p>

<label for="2">Number of Votes: <input name="2" type="text" maxlength="2" /></label> <!-- vc_id for database -->

</div> <!-- end vote_chronicle_container -->



<label for="total">Total: <input id="total" type="text" name="total" value="" /></label>
<input class="submit" type="submit" name="submit" value="Vote!" />

</fieldset>

</form>

</div> <!-- end content -->

[rangana]

Replace your loop with this (Highlighted are the changes):


for(var i=0; i < inputs.length; i++ ){
if( (inputs[i].type == "text") && (inputs[i].name != "total"))
{
var val = inputs[i].value;
val = Number(val);
total = total + val;
}
}


Hope that helps.

[JasonDFR]

rangana,

Thank you, it works!

Would you explain why it is sometimes necessary to place "var" in front of a variable?

BTW, you are a huge asset to these forums. Thanks a lot!

Jason

[rangana]

Actually, that would work even if you only have val without var. The main reason for changing that, is because it might cause conflict as value is an available method of input elements.

[JasonDFR]

Is it ever obligatory to place var in front of a variable, either when creating it or calling it? I think I read somewhere that placing var in front of a variable affects the variables scope. But I don't completely understand.

Thanks again.

Jason

[rangana]

If you're variable is inside a function, it's scope is (only) within that function:


function test()
{
var val='Hello World'; // Initialize variable in the within the function scope
alert(val);
}
function test2()
{
alert(val); // Val is undefined
}
window.onload=test2;


...if the variable is declared on the global scope, that is outside any function/object you can use it either outside/within the function:


val='Hello World'; // Initialize variable in the global scope
function test()
{
alert(val); // Outputs hello world
}
function test2()
{
alert(val); // Outputs hello world
}
window.onload=function()
{
test2();
test();
}


...but it's recommended to avoid using varible in global scope as it might cause conflict with other variables.

I'm not usually good at explaining things, but hope that makes sense.