我搜索了所有可能的答案，但没有找到合适的答案。 我有一个 html 页面，我想在其中显示模态形式。这个表格在另一个用php写的页面里。模式正在工作，它也是与数据库的连接。但是当我点击提交按钮并且信息不正确时，它会将我重定向到 php 页面。想要的是留在模式中，并且看起来您需要填写必填字段。
附言很抱歉，如果我不太清楚，这是我的第一篇文章。
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
这是在没有填写字段的情况下点击提交后发生的情况: enter image description here
最佳答案
看看preventDefault()功能。它阻止你的 Action 完成。喜欢:
$('button').click(() => {
this.preventDefault();
});
将阻止按钮的默认操作。
或者您可以将表单作为 ajax post 发送或 get请求。
像这样:
$.post('index.php', { username: yourUsername }, (data) => {
//here you have your server response.
});
关于javascript - 在提交链接到 php 中的不同页面后保持模式打开，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49031018/