0

I've got a page with a button that when I click, will opens a modal which is a change password form. How do I display the message "Password Successfully Changed" or "Current Password is not correct" after submit the form without close the modal. The message isn't seen because after the submitting the form, the modal closes. I need to press the modal button again to make sure the password is successfully change or not. Some recommend to use AJAX but I don't know how to use it in my coding. Please helppp..

This is my coding:-

changepw.php

<?php
    if (isset($_SESSION['login_user'])) {
        $user_check=$_SESSION['login_user'];
    $connection = mysqli_connect("localhost", "root", "") or die("Connection Error: " . mysqli_error($connection));
    $db = mysqli_select_db($connection, 'company');
        }


    if (count($_POST) > 0) {
     $result = mysqli_query($connection, "SELECT *from login WHERE username='$user_check'");
        $row = mysqli_fetch_array($result);
        if ($_POST["currentPassword"] == $row["password"]) {
            mysqli_query($connection, "UPDATE login set password='" . $_POST["newPassword"] . "' WHERE username='$user_check'");
            $message = "Password Successfully Changed";
        } else
            $message = "Current Password is not correct";
    }
    ?>
<html>
<head>
</head>
<body>

    <div id="id01" class="modal">

      <form class="modal-content animate" name="frmChange" method="post" action="" onSubmit="return validatePassword();">

         <h1>Change Password</h1>


        <div class="containerchangepw">
          <label for="currentPassword"><b>Current Password</b></label>
          <input type="password" placeholder="Enter Current Password" name="currentPassword" class="txtField" required>

          <label for="newPassword"><b>New Password</b></label><span id="newPassword" class="required"></span>
          <input type="password" placeholder="Enter New Password" name="newPassword" class="txtField" required>

          <label for="confirmPassword"><b>Confirm Password</b></label><span id="confirmPassword" class="required"></span>
          <input type="password" placeholder="Enter Confirm Password" name="confirmPassword" class="txtField" required>

          <button type="submit" id="submit" name="submit" value="Submit" class="btnSubmit">Submit</button>
        </div>

        <div class="cancelcontainer">
         <span class="message"><?php if(isset($message)) { echo $message; } ?></span>
          <button type="button" onClick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
              </div>
      </form>
    </div>

    <script>



    // Get the modal
    var modal = document.getElementById('id01');

    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }


    function validatePassword() {
    var currentPassword,newPassword,confirmPassword,output = true;

    currentPassword = document.frmChange.currentPassword;
    newPassword = document.frmChange.newPassword;
    confirmPassword = document.frmChange.confirmPassword;


    if(newPassword.value != confirmPassword.value) {
    newPassword.value="";
    confirmPassword.value="";
    newPassword.focus();
    document.getElementById("confirmPassword").innerHTML = "*new and confirm Password do not match";
    output = false;
    }   
    return output;
    }


    </script>



    </body>
    </html>

This is the index.php (include checkpw.php)

<div class="header">
        <a href="index.php" class="logo"><img src="image/logo.png" width="368" height="80" hspace="30px" vspace="-70px" id="shadow"></a>


        <div class="header-right">
    <?php if (isset($_SESSION['login_user'])) { ?>
        <a class="active" >
            <img src="image/user.png" width="22" height="22">
            <?= $login_session ?>
            <img src="image/dropdown.png" width="20" height="20" >
        </a>
        <div class="box dropdown">
               <a onClick="document.getElementById('id01').style.display='block'">Change Password</a>
                <a href="#">delete</a>
                <a id="logout" href="logout.php">Log Out</a>
        </div>
    <?php } else { ?>
        <a class="active" href="login.php"><img src="image/lock.png" width="20" height="20"> Login</a>
    <?php } ?>
</div>
        </div>
   </div>

<?php include 'changepw.php';?>
Wan1234
  • 35
  • 2
  • 9
  • You need to submit your form via ajax ("in the background"), so the page doesn't get reloaded. – brombeer Oct 04 '18 at 07:45
  • Just stop the form from submitting with preventDefault function and handle the request manually https://stackoverflow.com/questions/8664486/javascript-code-to-stop-form-submission You can see here an example – Yousef_Shamshoum Oct 04 '18 at 07:48
  • @kerbholz can u show how to use AJAX because I never use it before. I suppose to use it after i put this code right? $( "#id01" ).submit(function( event ) { event.preventDefault(); }); – Wan1234 Oct 04 '18 at 09:30
  • @Yousef_Shamshoum I already put the preventDefault function. Can you explain to me how to request manually to show the success or error message?. – Wan1234 Oct 04 '18 at 09:32
  • Personally, I would use jquery to make the ajax request http://api.jquery.com/jquery.ajax/ and then use jquery again to update the dom something like $('.message').text('Success/Error'); – Yousef_Shamshoum Oct 04 '18 at 09:39

0 Answers0