CODEWITHSUNDEEP
javascriptphphtmlajax
The-_-King_ 464
The-_-King_ 464

Reputation: 49

Pass Success Message from PHP to HTML page after validation

I'm tiring to Pass a success message after pup checks the database and confirms the data how do I display a message in case of a wrong password entry ,I tried many solutions with no success ,I tried using ajax solutions and JavaScript with no success as I don't know the basics on ajax and my background in JavaScript is basic Here's my code

LoginTest.html

<html>
<link rel="stylesheet" href="LoginStyle.css">
<head>
    <title>Login</title>
</head>

<body>

    <div class="login-box">
        <h2>Login</h2>
        <form action="http://localhost/Test2/dbloginTest.php" method="post" name="loginform" class="loginform">
            
            <div class="user-box">
                <input type="number" name="civilid" required="">
                <label>Civil ID</label>
            </div>

            <div class="user-box">
                <input type="password" name="password" required="">
                <label>Password</label>
                
            </div>
            <input type="submit" name="submit" Value="Login">
        </form>
        
        <a href="Registration.html">
            <input type="submit" name="register" Value="Register">
        </a>

    </div>


</body>

</html>

dbloginTest.php

   <?php
require 'C:\Windows\System32\vendor\autoload.php';
if (isset( $_POST['submit'] ) && isset( $_POST['civilid'] ) && isset( $_POST['password'] ) ) {

    $civilid = ( $_POST['civilid'] );
    $password = ( $_POST['password'] );
    $hashpass = "";
    $return = array();
    //echo extension_loaded( "mongodb" ) ? "loaded\n" : "not loaded\n";
    $con = new MongoDB\Client( 'mongodb+srv://Admin:[email protected]/?retryWrites=true&w=majority' );
    // Select Database
    if ( $con ) {
        $db = $con->VoterDatabase;
        // Select Collection
        $collection = $db->Voters;
        $cursor = $collection->find( array( 'civilid' => $civilid ) );
        foreach ( $cursor as $row ) {
            ob_start();
            echo $row->password;
            $hashpass = ob_get_clean();
        }
        
       
        if ( password_verify($password,$hashpass) ) {
            echo "You Have Successully Logged In";
            header( 'Location:Voters.html' );
            exit;
        } else {
            
            echo "Your Civil ID or Password is Incorrect";
            header( 'Location:LoginTest.html' );
            exit;
        }
    } else {

        die( "Mongo DB not connected" );
    }
}
?>

Upvotes: 0

Views: 797

Answers (2)

FarrisFahad
FarrisFahad

Reputation: 372

You can simply save all your error and success messages inside a session like so ...

$_SESSION['messages'][] = "password is incorrect";
header('location: login.php');
exit;

And then display the error message if it has been set like so ...

if(isset($_SESSION['messages'])){
echo implode('. ', $_SESSION['messages'])
}

Upvotes: 1

SheCodes
SheCodes

Reputation: 38

Multiple things here :

1- FIRST : DO NOT USE HTML FILES WHEN YOU USE PHP.

it is more practical and less annoying to go all php even if your code is html only. so I'd create another file loginTest.php and transfer all loginTest.html contents into it **

2- SECOND : the alert of success

I recommend that you use jQuery along with jQuery UI. after adding the script links and the UI stylesheet :

  • add a div after your form (with the content of your popup) give it an id

<div id="divID" class="mt-5" title="Confirmed addition to the cart">
        <p class="alert alert-info w-50" role="alert">
            <strong>✅ You Have Successully Logged In</strong>
        </p>
        <button class="btn btn-success" name="continue" id="continue-buying" type="button">
            Great !
        </button>
    </div>

  • in your ajax (you will need to learn it, you can find a tutorial here), write the following

.done((message)=>{
$('#divId').dialog();
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

this shall give you a pop of confirmation. more here : https://jqueryui.com/dialog/

full ajax would look like this :

let form = document.getElementById('form');
form.addEventListener('submit', (event) => {
    $.ajax({
        url: url,
        method: "POST",
        type: "POST",
        cache: false,
        data: {
            'YOUR DATA'
        },
        dataType: 'json',
        headers: {
            'YOUR HEADERS'
        },
        success: function (data) {
            console.log(data);
        }
    }).done((message) => {
        $('#divID').dialog();
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

3- THIRD : for the failure messages :

when you create a php file for your html page, you'd be able to easily manipulate the code to show or not some html parts as the following :

<?php if (condition goes here) : ?>
<!--HTML code that appears only if condition is true goes here-->
<?php endif; ?>

The ending result of your html page in a php file would look like this :

<html>
<link rel="stylesheet" href="LoginStyle.css">

<head>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

  <title>Login</title>
</head>

<body>

  <div class="login-box">
    <h2>Login</h2>
    <form method="post" name="loginform" class="loginform" id="form">

      <div class="user-box">
        <input type="number" name="civilid" required="">
        <label>Civil ID</label>

        <?php if($civilIdCondition == false): ?>
        <p class="alert alert-danger w-50" role="alert">
          <strong>Check CivilId again</strong>
        </p>
        <?php endif; ?>

      </div>

      <div class="user-box">
        <input type="password" name="password" required="">
        <label>Password</label>

        <?php if($passwordVerificationCondition == false): ?>
        <p class="alert alert-danger w-50" role="alert">
          <strong>Check password again</strong>
        </p>
        <?php endif; ?>

      </div>
      <input type="submit" name="submit" Value="Login">
    </form>

    <a href="Registration.html">
      <input type="submit" name="register" Value="Register">
    </a>

  </div>

  <div id="modal" class="mt-5" title="Confirmed addition to the cart">
    <p class="alert alert-info w-50" role="alert">
      <strong>✅ You Have Successully Logged In</strong>
    </p>
    <button class="btn btn-success" name="continue" id="continue-buying" type="button">
            Great !
        </button>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" type="application/javascript"></script>

  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  <script type="text/javascript">
  </script>
</body>

</html>

Upvotes: 1

Related Questions