堆栈内存溢出
  繁体   English   中英

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

[英]Prevent form input from being deleted after page is submitted

 原文  2019-03-28 08:39:19  8   4    javascript/ html

问题描述

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

我不希望任何字段被清除。 我该如何解决 ？

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

4 个解决方案

解决方案1
 0  2019-03-28 09:25:59

属性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>

解决方案2
 0  2019-03-28 09:30:20

这是使用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>

解决方案3
 0  2019-03-28 09:35:33

我通常做这样的事情： 

<?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'";
}

解决方案4
 0  2019-03-28 09:40:18

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

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

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 防止在表单中提交表单输入值 如何防止通过表单输入提交字符 防止表单内的表单被提交 如何防止输入元素被提交 防止使用 SweetAlert 提交表单 如何防止表单被提交？ 阻止表单提交-jQuery 提交表单时如何防止在收到服务器端的响应后刷新响应 停止提交表单中的输入字段 防止表单提交到最终按钮 - 避免编辑页面
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM