时间戳

首页 > 解决方案 > 防止提交页面后删除表单输入

javascript - 防止提交页面后删除表单输入

问题描述

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

我不想清除任何字段。我该如何解决 ？

我在底部添加了普通的 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>

标签： javascripthtml

解决方案

I usually do something like this:

<?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>

I save the posted value as a session variable in PHP and if it is set use it as the value.

Obviously this is just an example with one input but you can just expand the same logic for the other inputs.

I also sometimes put an else statement within the input, for example:

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

推荐阅读