Page refresh on Error return.

[Hazukiy]

Hi, I'm trying to make it so when the whomever enters invalid information into the form, it'll return the error WHICH IT DOES but it also refreshes the page. Now this is a problem for me because the register form is slides down but only when the user presses the 'Register' button. 

 

Help will be much appreciated

 

Problem: The pages refreshes when user submits the form and the form returns an error.

How it should work: When an error occurs, the page doesn't refresh and should stay where it is and just return an error. 

 

 

The Register Script:

 <div id="register-container">
   <div id="register-wrapper">
    <form action="" method="post" name="register_form" id="register_form">
	 <table border="0" id="table-register">
	  <th colspan="2">
	   <h1 class="frm-header-style">Register</h1>
	<?php if( !(isset( $_POST['register'] ) ) ) { ?>
    <?php
		} 
		else {
			$usr = new Users;
			$usr->storeFormValues( $_POST );
			$errorMessage = "";	
			$error = false;
			$username = $_POST['username'];
			$email = $_POST['email'];
			$password = $_POST['password'];
			$cpassword = $_POST['cpassword'];
				
			if( strlen($username) < 6 ) {
				$errorMessage .= "<li class='error'>Username must be more than 6 characters long.</li>";
				$error = true;
			}
			elseif( strlen($email) < 5 ) {
				$errorMessage .= "<li class='error'>Email is too short.</li>";
				$error = true;
			}
			elseif( strlen($password) < 5 ) {
				$errorMessage .= "<li class='error'>Password must be more than 5 characters long.</li>";
				$error = true;
			}
			elseif( $password != $cpassword ) {
				$errorMessage .= "<li class='error'>Password and Confirm password not match.</li>";
				$error = true;
			}
			elseif(!preg_match('/^[a-zA-Z0-9]{5,}$/', $username))
			{
				$errorMessage .= "<li class='error'>Username can only contain letters & numbers.</li>";
				$error = true;
			}
			elseif(!preg_match('/^[_A-z0-9-]+((\.|\+)[_A-z0-9-]+)*@[A-z0-9-]+(\.[A-z0-9-]+)*(\.[A-z]{2,4})$/', $email))
			{
				$errorMessage .= "<li class='error'>Email is invalid.</li>";
				$error = true;
			}
			else {
				echo $usr->register( $_POST );
				$error = false;
			}
			
			if($error) 
			{
				echo($errorMessage);
			}
		}
     ?>	   
	  </th>
	  <tr>
	   <td>
	    <p class="frm-text-style">Username:</p>
       </td>
	   <td>
	    <input type="text" name="username" id="username" class="frm-style" required/>
	   </td>
	  </tr>
	  <tr>
	   <td>
	    <p class="frm-text-style">Email:</p>
	   </td>
	   <td>
	    <input type="text" name="email" id="email" class="frm-style" required/>
	   </td>
	  </tr>
	  <tr>
	   <td>
	    <p class="frm-text-style">Password:</p>
	   </td>
	   <td>
	    <input type="password" name="password" id="password" class="frm-style" required/>
	   </td>
	  </tr>
	  <tr>
	   <td>
	    <p class="frm-text-style">Retype Password:</p>
	   </td>
	   <td>
	    <input type="password" name="cpassword" id="cpassword" class="frm-style" required/>
	   </td>
	  </tr>
	  <tr>
	   <th colspan="2">
	   <input class="frm-submit-register" name="register" type="submit" value="Submit" />
	   <input class="frm-submit-close" name="close" id="close-register" type="button" value="Close" />
	   <th>
	  </tr>
	 </table>
	 </form>
   </div>
  </div>

Edited July 6, 2013 by Hazukiy

[Psycho]

 

How it should work: When an error occurs, the page doesn't refresh and should stay where it is and just return an error. 

 

 

You can't do that with PHP alone. PHP code is processed on the server. So, you can't have PHP process the data without sending the data to the server. With a standard HTML form that requires you to submit the data. The only wat to do what you want is to use AJAX to submit the data via JavaScript

[denno020]

When you submit a form, the browser will always 'refresh'. In actual fact, it doesn't refresh, it navigates to the URL that's in the action for the form, if there is no action or no URL, then it navigates to the same page (effectively refreshing the page), and then all of the post variables from the form are available through $_POST.

 

If you want to be able to prevent the page from doing anything if there is an error, then you will need to use javascript to catch the form submit, and prevent it from submitting.

 

I'm not exactly sure how to do it with vanilla javascript, but with jQuery, you do that like this:

$("$form_id").submit(evnt){
evnt.preventDefault();
}

That will stop the form from submitting, but will also mean you won't get the $_POST variables, so you will need to use AJAX to send those to the script.

 

EDIT: Appears Psycho beat me to it, but we're basically saying the same thing

Edited July 6, 2013 by denno020