我在这里使用联系表格。当我点击提交按钮而不是显示＆＃34;消息已成功发送＆＃34;在同一页面上，它会重定向到空白页面。
HTML
<div class="form">
<div style = "font-size:11px; color:#cc0000; margin-top:10px"></div>
<div id="sendmessage" style="display:none">Your message has been sent successfully.</div>
<div id="errormessage"></div>
<form action="contact.php" method="post" role="form" id="myForm" class="contactForm">
<div class="form-group">
<input type="text" name="name" required="required" class="form-control input-text" id="clientname" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
<div class="validation"></div>
</div>
<div class="form-group">
<input type="email" class="form-control input-text" name="email" required="required" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" />
<div class="validation"></div>
</div>
<div class="form-group">
<input type="tel" class="form-control input-text" min="0" maxlength="10" required="required" name="phone" id="subject" placeholder="Phone Number" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
<div class="validation"></div>
</div>
<div class="form-group">
<textarea class="form-control input-text text-area" name="msg" rows="5" required="required" data-rule="required" data-msg="Please write something for us" placeholder="Message"></textarea>
<div class="validation"></div>
</div>
<div class="text-center"><button type="submit" class="input-btn" onclick="sendMsg(2000)">Send Message</button></div>
</form>
</div>
contact.php
<?php
include("config.php");
if(!$db)
echo mysql_error($db);
$name = mysqli_real_escape_string($db, $_POST['name']);
$email = mysqli_real_escape_string($db, $_POST['email']);
$phone = mysqli_real_escape_string($db, $_POST['phone']);
$message = mysqli_real_escape_string($db, $_POST['msg']);
$id = uniqid() . sha1($name);
$sql="INSERT INTO contact (id, Name, Email, Phone, Message) VALUES ('$id', '$name', '$email','$phone','$message');";
if (!mysqli_query($db,$sql))
{
die('Error: ' . mysqli_error($db));
}
?>
contact.js
function sendMsg(duration)
{
var usr = document.getElementById().value;
var email = document.getElementById().value;
var phone = document.getElementById().value;
var msg = document.getElementById().value;
if(usr.length < 1 && email.length < 1 && phone.length < 1 && msg.length < 1)
{
document.getElementById('sendmessage').style.display = "block";
setTimeout(function() {
$('#sendmessage').fadeOut('fast');
}, 5000);
var form = document.getElementById("myForm");
form.reset();
}
}
我现在已经添加了js代码。
答案 0 :(得分：1)
如果你不希望表单重定向到另一个页面，你有两种方法，1。使用php_self作为表单操作或使用AJAX（页面甚至不会刷新这个），也使用预处理语句来如Jay所建议的那样，防止sql注入。
选项1：PHP_SELF
<?php
include("config.php");
$successMessage = "";
if (isset($_POST['submit'])) {
//validated your inputs fields
$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$message = $_POST['msg'];
$id = uniqid() . sha1($name);
$sql = "INSERT INTO contact (id, Name, Email, Phone, Message) VALUES ('$id', '$name', '$email','$phone','$message');";
//prepare and bind
$sql = $db->prepare("INSERT INTO contact (id, Name, Email, Phone, Message) VALUES(?,?,?,?,?)");
$sql->bind_param("sssss", $id, $name, $email, $phone, $message);
if ($sql->execute()) {
$message = "Your message has been sent successfully.";
}
$sql->close();
$db->close();
}
?>
<div class="form">
<div style = "font-size:11px; color:#cc0000; margin-top:10px"></div>
<div id="sendmessage"><?php echo $message;?></div>
<div id="errormessage"></div>
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="post" role="form" id="myForm" class="contactForm">
<div class="form-group">
<input type="text" name="name" required="required" class="form-control input-text" id="clientname" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
<div class="validation"></div>
</div>
<div class="form-group">
<input type="email" class="form-control input-text" name="email" required="required" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" />
<div class="validation"></div>
</div>
<div class="form-group">
<input type="tel" class="form-control input-text" min="0" maxlength="10" required="required" name="phone" id="subject" placeholder="Phone Number" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
<div class="validation"></div>
</div>
<div class="form-group">
<textarea class="form-control input-text text-area" name="msg" rows="5" required="required" data-rule="required" data-msg="Please write something for us" placeholder="Message"></textarea>
<div class="validation"></div>
</div>
<div class="text-center"><button type="submit" name="submit" class="input-btn" onclick="sendMsg(2000)">Send Message</button></div>
</form>
</div>
选项2：AJax
<div class="form">
<div style = "font-size:11px; color:#cc0000; margin-top:10px"></div>
<div id="sendmessage"></div>
<div id="errormessage"></div>
<form action="contact" method="post" role="form" id="myForm" class="contactForm">
<div class="form-group">
<input type="text" name="name" required="required" class="form-control input-text" id="clientname" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
<div class="validation"></div>
</div>
<div class="form-group">
<input type="email" class="form-control input-text" name="email" required="required" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" />
<div class="validation"></div>
</div>
<div class="form-group">
<input type="tel" class="form-control input-text" min="0" maxlength="10" required="required" name="phone" id="subject" placeholder="Phone Number" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
<div class="validation"></div>
</div>
<div class="form-group">
<textarea class="form-control input-text text-area" name="msg" rows="5" required="required" data-rule="required" data-msg="Please write something for us" placeholder="Message"></textarea>
<div class="validation"></div>
</div>
<div class="text-center"><button type="submit" name="submit" class="input-btn" id="mybtn">Send Message</button></div>
</form>
</div>
<script type="text/javascript">
$('document').ready(function(){
$('#myForm').on('submit',function(e){
e.preventDefault(); //prevent default form submition
var FormData = $('#myForm').serialize();
$.ajax({
type : 'post',
url : 'contact.php';
data : FormData,
dataTYpe : 'json',
encode : true,
beforeSend : function(){
$('$mybtn').html('<span class="glyphicon glyphicon-repeat fast-right-spinner"></span> Sending');
},
success : function(response){
response = JSON.parse(response);
if(response== "ok"){
$('sendmessage').html('Your message has been sent successfully.');
}else{
$('errormessage').html(response);
}
}
});
});
});
</script>
<强> contact.php
<?php
include("config.php");
$message = "";
if (isset($_POST['submit'])) {
//validated your inputs fields
$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$message = $_POST['msg'];
$id = uniqid() . sha1($name);
$sql = "INSERT INTO contact (id, Name, Email, Phone, Message) VALUES ('$id', '$name', '$email','$phone','$message');";
//prepare and bind
$sql = $db->prepare("INSERT INTO contact (id, Name, Email, Phone, Message) VALUES(?,?,?,?,?)");
$sql->bind_param("sssss", $id, $name, $email, $phone, $message);
if ($sql->execute()) {
$message = "ok";
}else{
$message = "could not send/ insert";
}
echo json_encode($message);
}
?>
答案 1 :(得分：0)
可以通过定位iframe并将其隐藏来实现。 像这样的东西
<iframe name="myframe" id="frame1" src="thankyou.php" style="display:none"></iframe>
<form action="../thankyou.php" method="post" target="myframe">
<input type="submit" name="DoIt" value="DoIt">
</form>