我在HTML页面上有一个电子邮件表单,一旦您点击提交发送表单提交,我希望DIV“表单”更新或替换为“谢谢”消息。
尝试谷歌搜索,但没有太多运气找到我可以使用的具体内容。
有什么想法吗?
由于
答案 0 :(得分:3)
您可以使用jQuery.ajax方法:
$.ajax({
url: 'ajax/send_mail.php',
data: "message="+$('#some_field').val(),
success: function(data) {
//replace form (form is in div <div id="form"><form>Form data</form></form>)
$('div#form').html('<p>Thank You!<p>');
//or $('div#form').html(data); if you are returning message from send_mail.php
}
});
如果你遇到问题,我可以给你写一个完整的剧本(我只是心情愉快,有空余时间):))
更新:
基本上就是这样。
将其复制/粘贴为表单:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="hr-HR" lang="hr-HR">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Title</title>
<script type="text/JavaScript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('#submit').click(function(){
$.ajax({
type: "GET",
url: 'sendit.php',
dataType: 'json',
data: $('form#mail_form').serialize(),
success: function(data) {
if(data.success==1){
$('div#form').html(data.message);
}
}
});
return false;
});
});
</script>
</head>
<body>
<div id="form">
<form id="mail_form">
<div>
<input type="text" name="subject" id="subject"/>
</div>
<div>
<textarea name="message" id="message"></textarea>
</div>
<div>
<input type="submit" name="submit" id="submit" value="Send"/>
</div>
</form>
</div>
</body>
</html>
在sendit.php中复制/粘贴此内容: 你必须验证这个数据
//do stuff, send mail, save to database,...
$data['success']=1;
$data['message']='Thank You!';
echo json_encode($data);
答案 1 :(得分:0)
您可以使用jquery / javascript隐藏表单,并在表单提交上显示感谢消息div。 编辑:尝试以下操作:
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(document).ready(function (){
$("#button").click(function () {
$("form").hide();
$("div").show();
return false;
});
});
</script>
<form>
form data<br/>
<button id="button">click me</button>
</form>
<div style="display: none">
thank you
</div>
</html>
答案 2 :(得分:0)
检查jQuery的replaceWith()
:
$('div.the-form').replaceWith('<div class="thankyou">Thanks for your submission.</div>');
答案 3 :(得分:0)
你可以进行AJAX POST,在回调中你可以显示“谢谢你的消息”(jQuery可能有帮助)。
代码可能如下所示:
$.post('test.do', function(data) {
$('.confirmation').show();
});
答案 4 :(得分:0)
创建一个ID为“thankyouDiv”的新div,并初步设置其style="display:none;"
。这个div应该包含你的感谢信息
在提交表单时,首先隐藏包含电子邮件表单的div,并通过更改style="display:block;"
来显示'thankyouDiv'。之后,您可以提交表单。
希望这能解决您的问题
答案 5 :(得分:0)
让我们假设,这是你的标记...
... <div id='formcontainer'> <form id='emailform' ....> </form> </div> ..
这是你的jQuery代码......
$(document).ready(function(){ $('emailform').submit(function(){ // serialize your form to get the data, all do what you want to to... // now, do AJAX thing here... $.ajax({ type: 'POST', url: yourscript.php, data: data, // serialized data, for example success: function(){ // this is performed on success $('emailform').hide(); // form will fade out $('formcontainer').html('Thanks, the message has been sent') } }); return false; // this prevent form from real submit }); });
让我知道结果:)