Prevent page scroll when form gets submitted?

[damion]

Would someone advise how I can get this form to stop scrolling to the top of the page whenever the submit button os clicked?

<script language="javascript" type="text/javascript">
	function reloadCaptcha()	{
		document.getElementById('captcha').src = document.getElementById('captcha').src+ '?' +new Date();
	}
</script>

	  <?php				
		$error    = '';
        $name     = ''; 
        $email    = ''; 
        $subject  = ''; 
        $comments = ''; 
		
        if(isset($_POST['contactus'])) {
        
		$name     = $_POST['name'];
        $email    = $_POST['email']; 
        $subject  = $_POST['subject'];
        $comments = $_POST['comments'];
		

        if(trim($name) == '') {
        	$error = '<div class="error_message">Please enter your name.</div>';
        } 
		else if(trim($email) == '') {
        	$error = '<div class="error_message">Please enter a valid email address.</div>';
       
        } 
		else if(!isEmail($email)) {
        	$error = '<div class="error_message">You have entered an invalid email address, please try again.</div>';
        }
		
        else if(trim($subject) == '') {
        	$error = '<div class="error_message">Please enter a subject.</div>';
        } 
		else if(trim($comments) == '') {
        	$error = '<div class="error_message">Please enter your message.</div>';
		} 
		else if(isset( $_POST['secure'] ) )
		{
			if($_POST['secure'] != $_SESSION['security_number'])
			{
				$error = '<div class="error_message">Please re-try the math problem below</div>';
			}
			else
			{
                        if($error == '') 
                        {        
			if(get_magic_quotes_gpc()) {
            	$comments = stripslashes($comments);
            }			
         $address = "admin@mysite.com";
         $e_subject = 'You\'ve been contacted by ' . $name . '.';					
		 $e_body = "You have been contacted by $name with regards to $subject. Their message is as follows.\r\n\n";
		 $e_content = "\"$comments\"\r\n\n";
		 
		 $e_reply = "You can contact $name via email, $email";					
         $msg = $e_body . $e_content . $e_reply;
         mail($address, $e_subject, $msg, "From: $email\r\nReply-To: $email\r\nReturn-Path: $email\r\n");

		 // Email has sent successfully, echo a success page.
					
		 echo "<div id='success_page'>";
		 echo "<h2>Email Sent Successfully.</h2>";
		 echo "<p>Thank you <strong>$name</strong>, we will reply shortly.</p>";
		 echo "</div>";
         	}
		}            
		}

	}
         if(!isset($_POST['contactus']) || $error != '')
         {
?>
          <?php echo $error; ?>
          <fieldset>
            <legend>Contact</legend>
            <form method="post" action="">
              <label><span class="required">*</span> Name</label>
              <input name="name" type="text" id="name" size="30" value="<?=$name;?>" />
              <label><span class="required">*</span> Email</label>
              <input name="email" type="text" id="email" size="30" value="<?=$email;?>" />
              <label><span class="required">*</span> Subject</label>
              <input name="subject" type="text" id="subject" size="30" value="<?=$subject;?>" />
              <label><span class="required">*</span> Message</label>
              <textarea name="comments" cols="40" rows="3"  id="comments"><?=$comments;?></textarea>
        <img src="image.php" alt="Click to reload image" title="Click to reload image" id="captcha" onclick="javascript:reloadCaptcha()" />
        <span class="explain">reload image</span>
        <input type="text" name="secure" value="what's the sum?" onclick="this.value=''" /><br />
        <input name="contactus" class="submit" id="contactus" type="submit" value="Submit" />              
            </form>
          </fieldset>
          <?php } 
	
function isEmail($email) { // Email address verification.
return(preg_match("/^[-_.[:alnum:]]+@((([[:alnum:]]|[[:alnum:]][[:alnum:]-]*[[:alnum:]])\.)+(ad|ae|aero|af|ag|ai|al|am|an|ao|aq|ar|arpa|as|at|au|aw|az|ba|bb|bd|be|bf|bg|bh|bi|biz|bj|bm|bn|bo|br|bs|bt|bv|bw|by|bz|ca|cc|cd|cf|cg|ch|ci|ck|cl|cm|cn|co|com|coop|cr|cs|cu|cv|cx|cy|cz|de|dj|dk|dm|do|dz|ec|edu|ee|eg|eh|er|es|et|eu|fi|fj|fk|fm|fo|fr|ga|gb|gd|ge|gf|gh|gi|gl|gm|gn|gov|gp|gq|gr|gs|gt|gu|gw|gy|hk|hm|hn|hr|ht|hu|id|ie|il|in|info|int|io|iq|ir|is|it|jm|jo|jp|ke|kg|kh|ki|km|kn|kp|kr|kw|ky|kz|la|lb|lc|li|lk|lr|ls|lt|lu|lv|ly|ma|mc|md|mg|mh|mil|mk|ml|mm|mn|mo|mp|mq|mr|ms|mt|mu|museum|mv|mw|mx|my|mz|na|name|nc|ne|net|nf|ng|ni|nl|no|np|nr|nt|nu|nz|om|org|pa|pe|pf|pg|ph|pk|pl|pm|pn|pr|pro|ps|pt|pw|py|qa|re|ro|ru|rw|sa|sb|sc|sd|se|sg|sh|si|sj|sk|sl|sm|sn|so|sr|st|su|sv|sy|sz|tc|td|tf|tg|th|tj|tk|tm|tn|to|tp|tr|tt|tv|tw|tz|ua|ug|uk|um|us|uy|uz|va|vc|ve|vg|vi|vn|vu|wf|ws|ye|yt|yu|za|zm|zw)$|(([0-9][0-9]?|[0-1][0-9][0-9]|[2][0-4][0-9]|[2][5][0-5])\.){3}([0-9][0-9]?|[0-1][0-9][0-9]|[2][0-4][0-9]|[2][5][0-5]))$/i",$email));
}

?>

[aysiu]

That's not simple. If you use a traditional GET or POST submission of a form, the page will be reloaded and then will show the top of the page by default. I guess you could put in some kind of anchor in the middle of the page, but it would still reload to the top and then jump down to the middle afterwards.

 

Look into AJAX. It's not simple, but that'll do what you want.

[Ch0cu3r]

The form is not scrolling the page. It is because when the form is submitted you are reloading the page. The browser wont remember where in the page you where before the form was submitted.

 

 

You try adding an achor point. Try changing

<form method="post" action="">

to

<a id="form"></a>
<form method="post" action="#form">

That way when the form is submitted the browser should scroll down to the form.

Edited November 30, 2013 by Ch0cu3r