www.webdeveloper.com
Results 1 to 4 of 4

Thread: Submit Button NOT working??

  1. #1
    Join Date
    Mar 2010
    Location
    Canada
    Posts
    79

    Submit Button NOT working??

    My page are divided into 3 <div>.
    When I put the submit button in the content <div> it works fine but if I put the same submit button in the footer <div> it does not work.
    Not sure where I'm going wrong.

    Here's my code:


    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <script type="text/javascript">
    function validate(){
       if( document.myForm.myName.value == "" )   {
         alert( "Please provide your name!" );
         document.myForm.myName.focus() ;
         return false;
       }
       return( true );
    }
    </script>	
    </head>
    
    <body>
    	<div class="header">
    		<h2>Header</h2>
    	</div>
    	<div class="content">
    		<form action="" name="myForm"  onsubmit="return(validate());">
    			Name: <input type="text" name="myName" /><br><br>
    			<BUTTON onClick="this.myForm.submit();">Close</BUTTON>
    		</form>				
    	</div>
    		
    	<div class="footer">
    		<!-- This is where I would like the submit button to go but it does NOT work -->
    		<BUTTON onClick="this.myForm.submit();">Close</BUTTON>
    	</div>
    </body>
    </html>

  2. #2
    Join Date
    Oct 2013
    Posts
    483
    Try this:
    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <script type="text/javascript">
    function validate(){
       if( document.myForm.myName.value == "" )   {
         alert( "Please provide your name!" );
         document.myForm.myName.focus() ;
         return false;
       }
       return( true );
    }
    </script>	
    </head>
    
    <body>
    	<div class="header">
    		<h2>Header</h2>
    	</div>
    	<form action="" name="myForm"  onsubmit="return(validate());">
    		<div class="content">
    			Name: <input type="text" name="myName" /><br><br>
    		</div>
    
    		<div class="footer">
    			<BUTTON onClick="this.myForm.submit();">Close</BUTTON>
    		</div>
    	</form>				
    </body>
    </html>

  3. #3
    Join Date
    Feb 2014
    Location
    Canada
    Posts
    155
    It's a matter of scope. <div id = "content">...</div> contains the <form> that your button is attempting to use when clicked. In <div id = "footer">...</div>, the <form> is not available in that scope and so it cannot be accessed. The solution is either move the <form> to your <div id = "footer">...</div> or wrap multiple <div>'s inside of the <form>. If you want to have more than 1 <form> on the page, use the former solution. If you will have only the one, then either solution will work.

  4. #4
    Join Date
    Oct 2013
    Posts
    483
    You didn't ask, but here's a slightly optimized update of the code I posted above:
    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="UTF-8">
    <title>form</title>
    <script type="text/javascript">
    function validate(el){
       if(el.value == ""){
         alert("Please provide your name!");
         el.focus();
       }
    }
    </script>
    
    </head>
    
    <body>
    	<header>
    		<h2>Header</h2>
    	</header>
    	<form action="" id="myForm" name="myForm">
    		<section>
    			Name: <input type="text" id="myName" name="myName" /><br><br>
    		</section>
    
    		<footer>
    			<button onClick="validate(myName)">Do it</button> <!-- "Close" didn't really describe what the button does -->
    		</footer>
    	</form>				
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles