我有一个php文件,该文件可检索以html形式输入的信息并将其保存到mysql数据库中。我面临的问题是我无法弄清楚如何阻止页面重定向到insertinfo.php。我希望用户停留在同一index.html页面上,在表单提交时将出现模式。以下是我的index.html和insertinfo.php
index.html文件:
<div class="form ">
<form class="container" action="insertinfo.php">
<input type="text" id="firstname" class="form_input" placeholder="First Name" name="firstname" required>
<input type="text" id="lastname" class="form_input" placeholder="Last Name" name="lastname" required>
<input type="text" id="email" class="form_input" placeholder="Email Address" name="email" required>
<input type="submit" id="myBtn" class="submit" value="Download eBook">
</form>
</div>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<div class="icon-box">
<i class="material-icons">check</i>
</div>
</div>
<div class="modal-body">
<h4>An email with a download link towards the eBook has been sent to you.</h4>
<p>Please check your inbox and your spam/bulk messages.</p>
<a href="">Continue</a>
</div>
</div>
</div>
<script type="text/javascript">
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// When the user clicks the button, open the modal
btn.onclick = function(event) {
var fnameInput = document.getElementById("firstname").value;
var lnameInput = document.getElementById("lastname").value;
var emailInput = document.getElementById("email").value;
if(fnameInput.length == 0 || lnameInput.length == 0 || emailInput.length == 0){
event.preventDefault();
alert("You must complete all existing fields");
} else {
modal.style.display = "block";
}
}
</script>
料青山看我应如是