我搜索了所有可能的答案，但我找不到合适的答案。 我有一个html页面，我想要显示模态窗体。这个表单在另一个用php编写的页面中。模态正在运行，它也是与数据库的连接。但是当我点击提交按钮并且信息不正确时，它会将我重定向到php页面。想要保留在模态中，并且看起来需要填写必填字段。
P.S。如果我不太清楚，我很抱歉，这是我的第一篇文章。
html代码（index.php）：
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head profile="http://www.w3.org/1999/xhtml/vocab">
<link rel="shortcut icon" href="styles/icons/favicon.png" type="image/png" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Hackaton | IBM Watson</title>
<link type="text/css" rel="stylesheet" href="styles/style.css" />
<link type="text/css" rel="stylesheet" href="styles/modal.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" media="all">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Modal -->
<script type="text/javascript">
<!--//--><![CDATA[//><!--
$(document).ready(function(){
$('.openPopup').on('click',function(){
var dataURL = $(this).attr('data-href');
$('.modal-body').load(dataURL,function(){
$('#myModal').modal({show:true });
});
});
});
//--><!]]>
</script>
<!-- Smooth scroll-->
</head>
<body class="html front not-logged-in no-sidebars page-node parallax-active sff-7 slff-7 hff-7 pff-7 form-style-1 wide" >
<!-- There is more code here but not important for this-->
<a class="btn-primary btn openPopup" data-href="form_group.php"><span>Grupo</span></a>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog" role="document">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body">
</div>
</div>
</div>
</div>
<!-- Also more code here-->
</body>
</html>
php代码（form_group.php）：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Formulario de Registro Grupo</title>
<link rel="stylesheet" href="styles/form.css" />
<link type="text/css" rel="stylesheet" href="styles/fonts/lato-font.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" media="all">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body class="body-form">
<?php
//Variables for SQL
$servername = "localhost";
$username = "prueba";
$password = "";
$dbname = "";
//define variables and set to empty values
$error = false;
$nameErr = $emailErr = $phoneErr = $teamErr = $ideaErr = "";
$name = $email = $phone = $idea = $team = "";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
if (empty($_POST["name"])) {
$nameErr = "Name is required";
$error = true;
} else {
$name = test_input($_POST["name"]);
$error = false;
// check if name only contains letters and whitespace
if (!preg_match("/^[a-zA-Z ]*$/",$name)) {
$nameErr = "Only letters and white space allowed";
$error = true;
}
}
if (empty($_POST["email"])) {
$emailErr = "Email is required";
$error = true;
} else {
$email = test_input($_POST["email"]);
$error = false;
// check if e-mail address is well-formed
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$emailErr = "Invalid email format";
$error = true;
}
}
if (empty($_POST["phone"])) {
$phoneErr = "Phone is required";
$error = true;
} else {
$phone = test_input($_POST["phone"]);
$error = false;
// check if phone number is valid
if (!preg_match("/^[0-9+]+$/",$phone)) {
$phoneErr = "Invalid phone number";
$error = true;
}
}
if (empty($_POST["idea"])) {
$ideaErr = "Your idea is required";
$error = true;
} else {
$idea = test_input($_POST["idea"]);
$error = false;
}
//Falta el checkbox
if (empty($_POST["team"])) {
$teamErr = "Team is required";
$error = true;
} else {
$team = test_input($_POST["team"]);
$error = false;
}
}
function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
if(isset($_POST['submit'])) {
if(!$error){
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
//Check connection
if ($conn->connect_error){
die("Connection failed: " . $conn->connect_error);
}
// prepare and bind
$stmt = $conn->prepare("INSERT INTO form_grup (name, email, phone, idea, team) VALUES (?, ?, ?, ?, ?)");
$stmt->bind_param("sssss", $name, $email, $phone, $idea, $team);
$stmt->execute();
$stmt->close();
$conn->close();
echo "<script>
location.replace('index.php#participa')
</script>";
}
else{
echo "<script>
</script>";
}
}
?>
<form id="sign-form" method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
<h3 class="header">Take part as a team</h3>
<label class="label-form" for="idea">Your idea <br>
<input class="input-text" type="text" name="idea" value="<?php echo $idea;?>" />
</label> <br>
<label class="error"><?php echo $ideaErr;?></label>
<br><br>
<label class="label-form" for="team">Your team description <br>
<input class="input-text" type="text" name="team" value="<?php echo $team;?>" />
</label><br>
<label class="error"><?php echo $teamErr;?></label>
<br><br>
<label class="label-form" for="name">Name <br>
<input class="input-text" type="text" placeholder="Name" name="name" value="<?php echo $name;?>">
</label><br>
<label class="error"><?php echo $nameErr;?></label>
<br><br>
<label class="label-form" for="email">E-mail <br>
<input class="input-text" type="text" placeholder="E-mail" name="email" value="<?php echo $email;?>">
</label><br>
<label class="error"><?php echo $emailErr;?></label>
<br><br>
<label class="label-form" for="phone">Phone/WhatsApp <br>
<input class="input-text" type="text" placeholder="+XXX XXXXXXXXX" name="phone" value="<?php echo $phone;?>"/>
</label><br>
<label class="error"><?php echo $phoneErr;?></label>
<br><br>
<input class="i-submit" type="submit" name="submit" value="Take part">
</form>
<?php
?>
</body>
</html>
这是模式： enter image description here
这是在提交clik之后发生的事情而不填写字段： enter image description here
答案 0 :(得分：1)
看看preventDefault()功能。它会阻止您的操作完成。喜欢：
$('button').click(() => {
this.preventDefault();
});
将阻止按钮默认操作。
像这样：
$.post('index.php', { username: yourUsername }, (data) => {
//here you have your server response.
});
答案 1 :(得分：0)
首先说你发布的代码我会从头开始编写它，有些东西需要进行审核，但要解决你的问题，请在thisBook.rSheet.Range(i, "T") = Application.WorksheetFunction.CountIfs( _
thisBook.sSheet.Cells("K2", "K" & sSheet.Cells(Rows.Count, "K").End(xlUp).Row), "APPROVED", _
thisBook.sSheet.Cells("M2", "M" & sSheet.Cells(Rows.Count, "M").End(xlUp).Row), ">=" & (rSheet.Range(i, "S").Value2 - 6), _
thisBook.sSheet.Cells("M2", "M" & sSheet.Cells(Rows.Count, "M").End(xlUp).Row), "<=" & (rSheet.Range(i, "S").Value2))
index.php Pssss .....用PHP编写的验证代码不能很好地工作，因为不检查必要的字段。例如，当您仅编译<script type="text/javascript">
$(document).ready(function() {
$('.openPopup').on('click', function() {
var dataURL = $(this).attr('data-href');
// Load from form_group.php only the form for view using target #sign-form
$('.modal-body').load(dataURL + ' #sign-form', function() {
$('#myModal').modal({show: true});
});
});
});
// Rebind form submit interceptor after each ajax
$(document).ajaxComplete(function() {
$('#sign-form').submit(function() {
// Need to use $.post() instead $.load() becouse your php code manage only $_POST
$.post('form_group.php', $(this).serialize() + '&' + $.param({'submit': true}), function(response) {
// Load from form_group.php only the new form view based on erros
$('.modal-body').html($(response).filter('#sign-form'));
});
return false;
});
});
</script>
字段时，表单将验证，因为您最后检查它。