我有一个用户输入其信息的表格。一切正常。但是，当我弹出警告消息（例如“密码不匹配”）时，所有字段都将变得清楚，用户必须再次输入所有内容。
我不想清除任何字段。我该如何解决？
我在底部添加了正常的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>
答案 0 :(得分：0)
默认情况下，属性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>
答案 1 :(得分：0)
这是使用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>
答案 2 :(得分：0)
我通常这样做：
<?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'";
}
答案 3 :(得分：0)
下面的代码示例演示如何防止输入被删除。当我们提交表单时，它将数据存储在单独的变量中，并将这些数据作为输入值传递给用户。
<?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>
请勿将此过程用于密码或其他敏感数据。 使用您自己的验证方法来处理错误。