Advanced Search

Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Javascript form validation sum of input boxes <= 10

  1. #1
    Join Date
    Apr 2008
    Location
    Limoges, France
    Posts
    395
    Thanks
    13
    Thanked 61 Times in 61 Posts

    Default Javascript form validation sum of input boxes <= 10

    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.

    Code:
    <!--
    
    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)

    Code:
    <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

  2. #2
    Join Date
    Apr 2008
    Location
    Limoges, France
    Posts
    395
    Thanks
    13
    Thanked 61 Times in 61 Posts

    Default

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

    Code:
    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;
    }
    			//-->

  3. #3
    Join Date
    Jun 2008
    Posts
    589
    Thanks
    13
    Thanked 54 Times in 54 Posts
    Blog Entries
    1

    Default

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

    Code:
    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

  4. #4
    Join Date
    Apr 2008
    Location
    Limoges, France
    Posts
    395
    Thanks
    13
    Thanked 61 Times in 61 Posts

    Default

    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!

    Code:
    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;
    }

  5. #5
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    Please show us the generated markup instead.
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  6. #6
    Join Date
    Apr 2008
    Location
    Limoges, France
    Posts
    395
    Thanks
    13
    Thanked 61 Times in 61 Posts

    Default

    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.

    Code:
    <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 -->

  7. #7
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    Replace your loop with this (Highlighted are the changes):
    Code:
    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.
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  8. The Following User Says Thank You to rangana For This Useful Post:

    JasonDFR (11-06-2008)

  9. #8
    Join Date
    Apr 2008
    Location
    Limoges, France
    Posts
    395
    Thanks
    13
    Thanked 61 Times in 61 Posts

    Default

    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

  10. #9
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    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.
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  11. #10
    Join Date
    Apr 2008
    Location
    Limoges, France
    Posts
    395
    Thanks
    13
    Thanked 61 Times in 61 Posts

    Default

    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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •