CODEWITHSUNDEEP
phphtml
user9161375
user9161375

Reputation:

echo an error without redirecting to another page and keep all form data?

If for example a username isn't filled in the user is given an error stating so, but after pressing submit they're thrown to another page with the error.

How would I go around keeping the error on the same page as the registration form and keeping all the text entered by the user after submit?

Registration PHP:

<?php
require 'db_connect.php';
$count = 0;
	if (isset($_POST['username']))
    {
	    $username = $_POST['username'];
	    if (!empty($username)) 
	    {
		    $count++;
	    } 
	    else 
	    {
		    echo 'Please enter a username';
		    echo "<br>";
	    }
    }
    if (isset($_POST['email']))
    {
	    $email = $_POST['email'];
	        if (!empty($email))
	        {
		        $count++;
	        } 
	        else 
	        {
		        echo 'Please enter an email';
		        echo "<br>";
	        }
    }
    if (isset($_POST['password']))
    {
	    $password = $_POST['password'];
	        if (!empty($password))
	        {
		        $count++;
	        } 
	        else 
	        {
		        echo 'Please enter a password';
		        echo "<br>";
	        }
    }




if(strlen($username) > 25)
    header('Location: registration.php');

$hashword = password_hash($password,PASSWORD_DEFAULT);

if($count == 3 )
{
    $query = "INSERT INTO member ( username, password, email)
    VALUES ( '$username', '$hashword', '$email');"; 
    header('Location: login.html');
}
else {
        echo '<b>You will be redirected shortly</b>';
        echo "<br>";
        echo '<b>Please enter ALL details correctly</b>';
        header( "refresh:5;url=registration.php" );
}


$result = mysqli_query($connection, $query) or die(mysqli_error($connection));
?>

Registration Form:

<!doctype html>
<html lang="en">
<head>
    <title>Gumby template file</title>
    <meta charset="utf-8" />
    <script data-touch="gumby/js/libs" src="gumby/js/libs/gumby.min.js"></script>
    <script src="gumby/js/libs/jquery-2.0.2.min.js"></script>
    <link rel="stylesheet" href="gumby/css/gumby.css">
    <script src="gumby/js/libs/modernizr-2.6.2.min.js"></script>
    <link rel="stylesheet" href="forumhomepage_style.css">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>


<body>
    <form name="register" action="register.php" method="post">
        
    	<tr>
			<td>Username: </td>
			<td><input type="text" name="username" maxlength="25" /></td>
		</tr>
		
		<tr>
			<td>Email: </td>
			<td><input type="text" name="email" id="email" /></td>
		</tr>
		
		<tr>
			<td>Password: </td>
			<td><input type="password" name="password" /></td>
		</tr>

		<tr>
			<td>&nbsp;</td>
			<td><input type="submit" value="Register" /></td>
		</tr>
		
	</table>
</form>
    </body>
    </html>

Upvotes: 1

Views: 1813

Answers (4)

icecub
icecub

Reputation: 8773

There are several ways to do this. The first step is using the required attribute in your input elements:

<input type="text" name="username" required>

This will force the user to at least put something inside the input element. Then there's Javascript or jQuery for client side validation. You can create a custom event handler to catch the form submit and validate the input like so:

document.getElementById("your_form_id_here").addEventListener("submit", function(e){
    // Your Javascript validation code here, for example:
    var x = document.forms["your_form_id_here"]["username"].value;
    if (x == "") {
        alert("Username must be filled out");
        e.preventDefault();
    }
});

You can also put the form handler on the same file as the form and display the errors / values in case something goes wrong. For example:

<?php

if(!empty($_POST['submit'])){
    $error = false;

    if($_POST['username'] === ''){
        $usernameEmpty = 'The username was empty. Please enter a username!';
        $error = true;
    }

    if(!$error){
        // No errors found so proceed with the registration
    }
}

?>

<form id="myForm" method="post" action="" accept-charset="utf-8">
    <?php if(!empty($usernameEmpty)){ echo $usernameEmpty . '<br/>'; } ?>
    Username: <input type="text" name="username" value="<?php if(!empty($_POST['username'])){ echo $_POST['username']; } ?>"/>
    <input type="submit" name="submit" value="Register"/>
</form>

Lastly there's of course Ajax which will allow you to send the form towards PHP without reloading your page. You could have PHP send the errors back and use Javascript to show the errors inside the DOM.

Upvotes: 0

jeprubio
jeprubio

Reputation: 18012

It depends on at what level do you want to do this.

Validating that the different data is not empty and has information that makes sense (like the password is at least 7 chars long) can be done via javascript before sending the form data, this way you can stop the form to be sent. You can use jQuery Plugin Validator to help you do this.

But other validations like the insert has failed only can be done at server side, if you need also not to redirect in this case then you have to use ajax to load the data and then refresh the website info without reloading it.

I prefer to only do an initial check with javascript and send the user to the results page. But I also keep the validations as this one of the password length in the php because, even though now a days it's really strange, a user can disable javascript and I don't wana have surprises when checking the database values. But, another example, if you have lots of users you could check that the user does not exist to warn the user at the very first moment before the form is sent and this can only be done performing an ajax call.

You should know how to do both things and decide depending on what you want to do on your projects.

In your case, I would leave the php validations as they are now and check the same (non empty values) in javascript on the form submit event calling event.preventDefault() if an error has been detected.

$('form[name="register"]').submit(function( event ) {
    if ($('input[name="username"]').is(":empty")) {
        // append a "Username can not be empty message somewhere on your page
        event.preventDefault();
    }
    // I let you finish the jquery code...
});

This example uses jQuery lib. but you can do it without it with just javascript if you want.

Upvotes: 1

AboElnouR
AboElnouR

Reputation: 316

You may use ajax Or if you don't know ajax

You can put all your code in one page and call $_POST indexes into the value of every input.

for ex. 

<input type="text" name="username" maxlength="25" value="<?=$_POST['usename'];?>"/>

Or you may use "PHP $_SESSION"

Just store $_POST into $_SESSION then call it from the html page

for ex.

<input type="text" name="username" maxlength="25" value="<?=$_SESSION['usename'];?>"/>

And the same idea for errors.

Upvotes: 0

NappingRabbit
NappingRabbit

Reputation: 1918

without ajax you will need ro lead your page with some conditional logic. This will look and see if any fields are filled in and fill them in again, along with setting any error messages to return to the user.

something like:

<?php
  //example fields
  $username = '';
  $field2 = '';
  $field3 = '';
  if(isset($errorToShow)){
    // echo your error message here
  }
  if($_POST["submit"]){
    foreach($_POST as $k=>$v){
      $$k = $v;
    }
  }

  // your form can be here.

of course there are other considerations and ajax is a better solution, but this type of thing can work just fine.

Upvotes: 0

Related Questions