防止提交页面后删除表单输入答案

【问题标题】：Prevent form input from being deleted after page is submitted防止提交页面后删除表单输入
【发布时间】：2019-03-28 08:39:19
【问题描述】：

我有一个表单，用户可以在其中输入他的信息。一切正常。但是，当我弹出诸如“密码不匹配”之类的警告消息时，所有字段都变得清晰，用户必须再次输入所有内容。

我不想清除任何字段。我该如何解决这个问题？

我在底部添加了普通的php代码、html代码和boostrapmodal。我希望它现在清楚了

<html lang="en">

    <head>

        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="description" content="">
        <meta name="author" content="">

        <title>KFH Careers Portal</title>

        <!-- Custom fonts for this template-->
        <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">

        <!-- Custom styles for this template-->
        <link href="css/sb-admin.css" rel="stylesheet">

    </head>

    <body class="bg-dark">

        <div class="container">
            <div class="card card-register mx-auto mt-5">
                <div class="card-header">Register an Account</div>
                <div class="card-body">
                    <form action="" method="post" class = "form-horizontal " role = "form" enctype="multipart/form-data">
                        <div class="form-group">
                            <div class="form-row">
                                <div class="col-md-6">
                                    <div class="form-label-group">
                                        <input type="text" id="firstName" name="firstname" minlength="3" class="form-control" placeholder="First name" required="required" autofocus="autofocus">
                                        <label for="firstName">First name</label>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-label-group">
                                        <input type="text" id="lastName" name="lastname" minlength="3" class="form-control" placeholder="Last name" required="required">
                                        <label for="lastName">Last name</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="form-label-group">
                                <input type="text" id="username" name="username" minlength="5" class="form-control" placeholder="User Name" required="required">
                                <label for="username">User Name</label>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="form-label-group">
                                <input type="email" id="inputEmail" name="email" minlength="6" class="form-control" placeholder="Email address" required="required">
                                <label for="inputEmail">Email address</label>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="form-label-group">
                                <input type="number" id="phonenumber" name="phonenumber" minlength="8" class="form-control" placeholder="Email address" required="required">
                                <label for="phonenumber">Phone Number</label>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="form-row">
                                <div class="col-md-6">
                                    <div class="form-label-group">
                                        <input type="password" id="inputPassword" minlength="5" name="passone" class="form-control" placeholder="Password" required="required">
                                        <label for="inputPassword">Password</label>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-label-group">
                                        <input type="password" id="confirmPassword" minlength="5" name="passtwo" class="form-control" placeholder="Confirm password" required="required">
                                        <label for="confirmPassword">Confirm password</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--                        <a class="btn btn-primary btn-block" href="login.html">Register</a>-->
                        <input class = "btn btn-block btn-primary" type="submit" id="sumbit" name="submit" value="Login"/>
                        <input type="hidden" name="submitted" value="1">

                    </form>
                    <div class="text-center">
                        <a class="d-block small mt-3" href="login.html">Login Page</a>
                        <a class="d-block small" href="forgot-password.html">Forgot Password?</a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Bootstrap core JavaScript-->
        <script src="vendor/jquery/jquery.min.js"></script>
        <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

        <!-- Core plugin JavaScript-->
        <script src="vendor/jquery-easing/jquery.easing.min.js"></script>

    </body>

</html>


<?php

    if (isset($_POST['submitted'])) {

        
        if($_POST['passone'] == $_POST['passtwo'])
        {
            
        }
        else
        {
            ?>
<script type="text/javascript">
    $(window).on('load',function(){
        $('#logoutModal').modal('show');
    });
</script>


<?php
        }
        
        
        
        
        
        
        
        
        

    }

?>

  <div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
          <button class="close" type="button" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="modal-body">Username or Password is incorrect.</div>
        <div class="modal-footer">
          <a class="btn btn-primary" href="">Ok</a>
        </div>
      </div>
    </div>
  </div>

【问题讨论】：

显然不能用纯html实现。但使用 JavaScript 将成为可能。
如何检查“密码不匹配”？
@Roy 检查两个输入是否相互匹配，如果不匹配，则会出现模型弹出消息，然后重置页面。
@Francisaskquestion 你能提供一个链接吗？
那么，你的javascript在哪里？密码之间的比较在哪里？可以加吗？

标签： javascript html

【解决方案1】：

我通常会这样做：

<?php
session_start();

if(isset($_POST['text_input']) && $_POST['text_input']!=""){
    $_SESSION['text_input'] = $_POST['text_input'];
    //handle other form stuff here
}
?>

<form method="post" action="test.php">
<input type="text" name="text_input" <?php if(isset($_SESSION['text_input']) && $_SESSION['text_input']!=""){echo " value='".$_SESSION['text_input']."'";} ?> >
<input type="submit">
</form>

我将发布的值保存为 PHP 中的会话变量，如果已设置，则将其用作值。

显然，这只是一个输入的示例，但您可以为其他输入扩展相同的逻辑。

我有时也会在输入中添加一个 else 语句，例如：

if(isset($_SESSION['value']) && $_SESSION['value']!=""){
    echo " value='".$_SESSION['value']."'";
}else{
    echo " placeholder='enter a value'";
}

【讨论】：

这成功了！我刚刚从 echo 中删除了 value= 并且效果很好
@ahmed 我会说你在某个地方犯了一个错误，这个值是需要的？？
value=""

【解决方案2】：

type = 'submit' 属性默认会刷新表单。只需替换提交按钮 sa type = 'button' 上的 type 属性值，并在您的 JS 中附加一个单击侦听器，以便在单击所述按钮时手动处理提交。

// get reference of the submit button from the DOM
const submitButton = document.getElementById('submit');

// attach an click eventlistener on the submit button 
submitButton.addEventListener('click', (event) => {
  // handle your submit here 
  // extra validation, data modifications, form POST etc
  console.log('form submitted')
})

<form action="" method="post" class = "form-horizontal " role = "form" enctype="multipart/form-data">
                        <div class="form-group">
                            <div class="form-row">
                                <div class="col-md-6">
                                    <div class="form-label-group">
                                        <input type="text" id="firstName" name="firstname" minlength="3" class="form-control" placeholder="First name" required="required" autofocus="autofocus">
                                        <label for="firstName">First name</label>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-label-group">
                                        <input type="text" id="lastName" name="lastname" minlength="3" class="form-control" placeholder="Last name" required="required">
                                        <label for="lastName">Last name</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="form-label-group">
                                <input type="text" id="username" name="username" minlength="5" class="form-control" placeholder="User Name" required="required">
                                <label for="username">User Name</label>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="form-label-group">
                                <input type="email" id="inputEmail" name="email" minlength="6" class="form-control" placeholder="Email address" required="required">
                                <label for="inputEmail">Email address</label>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="form-label-group">
                                <input type="number" id="phonenumber" name="phonenumber" minlength="8" class="form-control" placeholder="Email address" required="required">
                                <label for="phonenumber">Phone Number</label>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="form-row">
                                <div class="col-md-6">
                                    <div class="form-label-group">
                                        <input type="password" id="inputPassword" minlength="5" name="passone" class="form-control" placeholder="Password" required="required">
                                        <label for="inputPassword">Password</label>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-label-group">
                                        <input type="password" id="confirmPassword" minlength="5" name="passtwo" class="form-control" placeholder="Confirm password" required="required">
                                        <label for="confirmPassword">Confirm password</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--                        <a class="btn btn-primary btn-block" href="login.html">Register</a>-->
                        <input class = "btn btn-block btn-primary" type="button" id="submit" name="submit" value="Login"/>
                        <input type="hidden" name="submitted" value="1">

                    </form>

【讨论】：

【解决方案3】：

这是使用JavaScript测试密码并确认密码LINK的链接

但在您的情况下，提交按钮不能是类型提交。像这样

<form action="" method="post" class = "form-horizontal "  role = "form" enctype="multipart/form-data">
    <div class="form-group">
        <div class="form-row">
            <div class="col-md-6">
                <div class="form-label-group">
                    <input type="text" id="firstName" name="firstname" minlength="3" class="form-control" placeholder="First name" required="required" autofocus="autofocus">
                    <label for="firstName">First name</label>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-label-group">
                    <input type="text" id="lastName" name="lastname" minlength="3" class="form-control" placeholder="Last name" required="required">
                    <label for="lastName">Last name</label>
                </div>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="form-label-group">
            <input type="text" id="username" name="username" minlength="5" class="form-control" placeholder="User Name" required="required">
            <label for="username">User Name</label>
        </div>
    </div>
    <div class="form-group">
        <div class="form-label-group">
            <input type="email" id="inputEmail" name="email" minlength="6" class="form-control" placeholder="Email address" required="required">
            <label for="inputEmail">Email address</label>
        </div>
    </div>
    <div class="form-group">
        <div class="form-label-group">
            <input type="number" id="phonenumber" name="phonenumber" minlength="8" class="form-control" placeholder="Email address" required="required">
            <label for="phonenumber">Phone Number</label>
        </div>
    </div>
    <div class="form-group">
        <div class="form-row">
            <div class="col-md-6">
                <div class="form-label-group">
                    <input type="password" id="inputPassword" minlength="5" name="passone" class="form-control" placeholder="Password" required="required">
                    <label for="inputPassword">Password</label>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-label-group">
                    <input type="password" id="confirmPassword" minlength="5" name="passtwo" class="form-control" placeholder="Confirm password" required="required">
                    <label for="confirmPassword">Confirm password</label>
                </div>
            </div>
        </div>
    </div>
    <!--                        <a class="btn btn-primary btn-block" href="login.html">Register</a>-->
    <input class = "btn btn-block btn-primary" onclick="validatepass();" type="button" id="sumbit" name="submit" value="Login"/>
    <input type="submit" id="btn-form-submit" style="display:none">
    <input type="hidden" name="submitted" value="1">

</form>
<script>
function validatepass(){
var pass = document.getElementById("inputPassword").value;
var confirm = document.getElementById("confirmPassword").value;
    if(pass == confirm){
        document.getElementById("btn-form-submit").click();

    }else{
        alert("Password not match!");
    }
}
</script>

【讨论】：

【解决方案4】：

以下代码示例显示了如何防止输入被删除。当我们提交表单时，它将数据存储在单独的变量中，并将这些数据作为输入值传递给用户。

<?php
    $name = $email = $pasd = "";

    if ($_SERVER["REQUEST_METHOD"] == "POST") {
        $name = $_POST["name"];
        $email = $_POST["email"];
        $pass = $_POST["pass"];
    }
?>

<form action="" method="post">
    <input type="text" name="name" value="<?php echo $name; ?>" />
    <input type="email" name="email" value="<?php echo $email; ?>" />
    <input type="password" name="pass" value="<?php echo $pass; ?>" />
    <input type="submit" />
</form>

请勿将此过程用于密码或其他敏感数据。 使用您自己的验证方法来处理错误。

【讨论】：