Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    May 2012
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Javascript submit button

    Code:
    window.onload = awesome;
    
    //declare globals
    var theForm;
    
    function awesome(){
    
    
    
    animals();
    
    
    	//onclick for submit button
    	document.querySelector("#btnSubmit").onclick = processForm;
    	
    	
    	//onblur functions for text fields
    	document.querySelector("#charName").onblur = checkName;
    	document.querySelector("#email").onblur = checkEmail;
    	
    	//get the whole form
    	theForm = document.querySelector("#yourChar");
    	
    
    
    }
    //function that processes the information in the form
    function processForm(){
    
    	
    	//set an error message variable
    	var msg = "";
    	
    		var beer = true;
    		var glass = new Array();
    		glass.push(checkName());
    		glass.push(checkEmail());
    		for (var i = 0; i < glass.length; i++){
    			if(glass[i] == false){beer=false};
    		 
    		
    		if(beer = true){}else{
    		return false;}
    	
    		}
    	
    	//validate the name!
    	//call the function that handles name validation (it will return true if there
    	//was an error)
    	msg = checkName();
    	
    	//validate the email!
    	msg = checkEmail();
    	
    
    	return false;
    
    }
    
    
    
    //check the name field
    function checkName(){
    	//rules:	cannot be less than 2 characters or more than 50
    	//			cannot have numbers
    var namefield = document.querySelector("#charName");
    	
    	var msg="";
    	var spaces=false;
    	var numbers=false;
    	var counter=0;
    	var words=false;
    	var beer=true;
    	
    	
    	var name = theForm.charName.value; //loop through the value of the entire field, looking for numbers and spaces 11 	//trim removes leading and trailing spaces    	name = trim(name); 
    	
    	//loop through the value of the entire field, looking for numbers and spaces
    	//also count the number of characters between spaces
    	for(var q=0;q<namefield.value.length;q++){
    		//if a space is found (after trimming) set the spaces variable to true
    		if(namefield.value.substring(q,q+1)==" "){
    			spaces = true;
    			//since we've found a space, there should be more than one word (provided you have used the trim function)
    			if(counter<2){
    				//if the counter is less than 2, then the word that came before the space has less than 2 characters in it
    				words = true;	
    			}
    			//reset the counter (-1 so when we count up below it starts again at 0)
    			counter = -1;
    		}else if(isNaN(namefield.value.substring(q,q+1))==false){
    			//isNaN returns false if you find a number
    			numbers = true;
    		}
    		//for each character, count up by 1
    		counter += 1;	
    	}
    	//after the loop, check the values of the variables
    	if(numbers == true){
    		msg+= "No Numbers!";	
    	}
    	if(spaces == false){
    		msg+= "More than one word please!\n";	
    	}
    	if(words == true){
    		msg += "Words must have more than one character!\n";
    		}
    		//|| (double pipeline) is 'or'
    	if(name.length  < 2 || name.length > 50){
    		msg += "Name must be between 2 and 50 characters. ";
    	
    	}
    
    		
    			//check for an error message
    	if(msg != ""){
    		theForm.charName.parentNode.childNodes[5].innerHTML = '<span class="error">' + msg + '</span>';
    		//have the form return true for the play button
    		return true;
    	}else{
    		theForm.charName.parentNode.childNodes[5].innerHTML = '<span class="correct">A good, strong name.</span>';
    	}
    
    	return beer;	
    }
    	
    //check the email
    function checkEmail(){
    	//rules:	must have @ symbol, must have . after @
    	//			only one @ symbol, at least one .
    	//			the last . must be at least two characters from the end
    	//			the @ cannot be the first character
    	var email = theForm.email.value;
    	//get the positions of various things in the email
    	var firstAt = email.indexOf("@");
    	var lastAt = email.lastIndexOf("@");
    	var firstDot = email.indexOf(".");
    	var lastDot = email.lastIndexOf(".");
    	var wrongEmail = false;
    	var beer =true;
    	
    	
    	//check for @ symbol (can't be first, must be only one)
    	if(firstAt == 0 || firstAt == -1 || firstAt != lastAt){
    		//firstAt == 0: @ is the first character
    		//firstAt == -1: no @ symbol found
    		//firstAt != lastAt: more than one @
    		wrongEmail = true;
    	}
    	
    	//check for . symbol (must be at least 1, 1 must come after last @,
    	//must be at least 2 characters after last .
    	if(firstDot == -1 || lastDot < lastAt || (lastDot >= email.length-2) ){
    		//firstDot == -1: no . found
    		//lastDot < lastAt: no . after @
    		//lastDot >= email.length-2: less than 2 characters after last dot
    		wrongEmail = true;
    	}
    	
    	//check for email error found
    	if(wrongEmail == true){
    		theForm.email.parentNode.childNodes[5].innerHTML = '<span class="error">Please enter a valid email address.</span>';
    		return true;
    	}else{
    		theForm.email.parentNode.childNodes[5].innerHTML = '<span class="correct">What a lovely email.</span>';		
    			return false;	
    }
    	return beer;
    	}
    Trting to get my form to submit once user enters in correct info but when i click submit it does nothin.

    what am I missing??

    Thanks

  • #2
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,289
    Thanks
    12
    Thanked 345 Times in 341 Posts
    hard to tell without the form.
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • #3
    New Coder
    Join Date
    May 2012
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
     <div id="content-wrapper"> 
                <form name="yourChar" id="yourChar" action="http://faculty.edumedia.ca/jarvisa/forms/valid.php" method="get">
                
                	<div class="box">
                        <label for="charName">Name:</label>
                        <input type="text" id="charName" class="charField txt" name="charName" />
                        <div class="fieldInfo">
                        	Please enter your name.
                        </div>
                    </div>
                <br />
                    <div class="box2">
                        <label for="email">E-mail:</label>
                        <input type="text" id="email" class="email txt" name="email" />
                        <div class="fieldInfo">
                        	Please enter your email.
                        </div>
                    </div>
                   <div class="formbox">
                    	<input type="submit" id="btnSubmit" name="btnSubmit" class="button" value="Submit" />
                    </div>
                </form>
        </div>
    </div>   
    </div>    
    </body>
    </html>

  • #4
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,289
    Thanks
    12
    Thanked 345 Times in 341 Posts
    on first glance I see nothing that should prevent the form from submitting. do you have a live page?
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,537
    Thanks
    77
    Thanked 4,381 Times in 4,346 Posts
    Right here:
    Code:
             if(beer = true){}else{
    		return false;}
    That code *ASSIGNS* true to beer. You needed to use == there. Not =.

    But more simply:
    Code:
         if ( ! beer ) return false;
    ***********

    The real culprit is simple.

    The end of your processForm() function does this:
    Code:
    	return false;
    You never ever return true, so the form can NEVER be submitted.

    **********

    Your validation is (sorry to say) terrible. Form validation has been covered many many many times in this forum. Search the forum to find some *GOOD* validation functions. Especially for email.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    New Coder
    Join Date
    May 2012
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I put an another = sign where u said and i changed false to true. Yah I gte that when you change false to true it submits. But if you press submit as soon as you load the page it goes to the validation page it doesn't allow the user to enter in any information and it shouldn't submit because of errors.

  • #7
    New Coder
    Join Date
    May 2012
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    http://imd.edumedia.ca/camp0627/mtm4...p/gallery.html

    That is the link to my form. What it's doing there is when you enter in the email field it's submits even though you haven't entered anything in the name field.

    The code in my previous post is when you enter in the name and email fields correct it should submit and that's where im having the problem.

    Thanks

  • #8
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,289
    Thanks
    12
    Thanked 345 Times in 341 Posts
    I don’t see a reason why your validation code should stop your form from submitting. if you attach an event handler via JavaScript, you can only stop the default action this event would cause (in this case the form submit) via Event.preventDefault() (resp. its IE analogon window.event.returnValue = false). event handlers and event listeners are not inline JavaScript.


    and yes, event handling pre-IE9 sucks, because you have to write cross-browser code (but rest assured, other useful and modern JavaScript features share the same fate)
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer


  •  

    Posting Permissions

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