提交表单后保持CSS模型打开

时间:2018-10-04 07:43:56

标签: javascript php jquery html css

我有一个带有按钮的页面,当我单击该按钮时,将打开一个模式,即更改密码形式。提交表单后不关闭模式,如何显示消息“密码已成功更改”或“当前密码不正确”。之所以看不到该消息,是因为提交表单后,该模式会关闭。我需要再次按下模式按钮,以确保成功更改密码。有些人建议使用AJAX,但我不知道如何在编码中使用它。请帮忙。

这是我的编码:-

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>

这是index.php(包括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';?>

0 个答案:

没有答案