event.PreventDefault（）和ajax POST方法有什么可能？ [英] What is possible with event.PreventDefault() and ajax POST method?
问题描述
应如何运作
用户将他们的数据输入到表单中，然后单击提交，表单将数据发布到自身，并将数据通过电子邮件发送到电子邮件地址。一旦数据被发送，一条消息应该替换表示电子邮件已经发送的表单。 （全部没有包含表格关闭的标签）
Sudo代码
如果（电子邮件）完成
{发送电子邮件}
回声感谢您的电子邮件
}其他{
显示电子邮件表格
解决方案我正在尝试？
< script src =https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min。 jstype =text / javascript>< / script>< script>
$（'＃form1'）。submit（function（e）
{
e.preventDefault（）;
$ .ajax（{
类型：'POST'，
url：'indextest2.php'，
data：$（＃form1）。serialize（），
success：function（response）{
}
}）;
}）;
< / script>
现在这样做会很好，因为它会停止页面刷新，并发送电子邮件，但它停止谢谢你的消息已发送HTML替换表单。
因此，对于所有意图和目的，用户不知道电子邮件已发送，因为该表单仍显示他们输入的数据。
可能的解决方法？
$ b
以某种方式获得ajax文章插入谢谢的消息到正确的div成功的ajax后？这是可能的吗？
或者我做错了什么，明智的执行？！
$ b 实际代码我使用
$ b
< div id =tabsContainer>
< div class ='tab one'>
< ul>
< li>< a href =＃contact-form>查询表格< / a>< / li>
< / ul>
< / div>
< div class ='content one'>
< div id =contact-formclass =clearfix>
<？php
if（$ _POST [email]<>''）{
$ ToEmail ='dancundy@hotmail.com';
$ EmailSubject ='EasyScrap查询';
$ mailheader =From：。$ _ POST [email]。\r\\\
;
$ mailheader。=回复：。$ _ POST [email]。\r\\\
;
$ mailheader。=Content-type：text / html; charset = iso-8859-1 \r\\\
;
$ MESSAGE_BODY =姓名：。$ _ POST [FName]。& nbsp;;
$ MESSAGE_BODY。= $ _POST [SName]。< br>;
$ MESSAGE_BODY。=电话：。$ _ POST [CTNumber];
$ MESSAGE_BODY。=< br>。email：。$ _ POST [email]。; $ _ $ b $ MESSAGE_BODY。=< br>。Address：。$ _ POST [STName]。。$ _ POST [PCode];
$ MESSAGE_BODY。=< br>。Comment：.nl2br（$ _ POST [Comment]）。;
邮件（$ ToEmail，$ EmailSubject，$ MESSAGE_BODY，$ mailheader）或死（失败）;
？>
< h3>联络我们< / h3>
< P>您的信息已发送，谢谢！您将在接下来的几分钟内收到自动回复，并很快会收到来自普利茅斯Easy Scrap代表的回复。< / P>
< / div>
< / div>
< / div>
<？php
} else {
？>
< fieldset>
<图例>
< h3>联络我们< / h3>
< / legend>
< div id =contact-area>
< form id =form1method =postaction =>
< label for =FName>名称：*< / label>
< input name =FNametype =textrequired placeholder =Enter your name/>
< label for =SName>姓：< / label>
< input name =SNametype =textplaceholder =输入您的姓氏/>
< label for =STName>街道：< / label>
< input name =STNametype =textplaceholder =输入地址/>
< label for =PCode> PostCode：< / label>
< input name =PCodetype =textplaceholder =UK Postcode/>
< label for =电子邮件>电子邮件：*< / label>
< input type =emailname =emailrequired placeholder =输入有效的电子邮件地址/>
< label for =CTNumber>联系人：< / label>
< input name =CTNumbertype =textplaceholder =输入联系电话号码/>
< label for =comment>消息：< / label>
< br />
< input type =submitname =submitvalue =Submitclass =submit-button/>
< / form>
< div style =clear：both;>< / div>
< / div>
< div class =FormInfo>
< p>& nbsp;< / p>
< p> *表示必填字段< / p>
< / div>
< / fieldset>
<？php
};
？>
< / div>
< / div>
< script src =https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.jstype =text / javascript>< / script> <脚本>
$（'＃form1'）。submit（function（e）
{
event.preventDefault（）;
$ .ajax（{
类型：'POST'，
url：'indextest2.php'，
data：$（＃form1）。serialize（），
success：function（response）{
}
}）;
}）;
< / script>
这里是实际的网站，它会给你一个更好的想法当我说'tab'并希望更多地扩大这个问题。
http://www.cundytech.com/SWCF/indextest2.php
带有表格的标签是菜单中的查询表单。 p>
我真的希望有人能帮忙吗？
，用感谢信息替换表格。这可以通过用ajax成功块中的谢谢消息替换包含表单的dom结构来完成。
ajax代码：
$（'＃form1'）。submit（函数（e）
{
e.preventDefault （）;
$ .ajax（{
type：'POST'，
url：'indextest2.php'，
data：$（＃form1）。serialize ），
成功：函数（响应）{
//用感谢消息替换电子邮件表单
$（'＃targetForm'）。html（< div class =info >感谢您的留言!!!< div>）;
}
}）;
}）;
快乐编码：）
Problem?
I have a problem where i can't use a normal HTML POST as it refreshes my webpage causing a JS controlled 'Tab' to close. Thus forcing the user to reopen the tab to see the feedback from the submitted form.
How it should work
The user enters their data into the form and then clicks submit, the form POSTs the data to itself, emailing the data to an email address. once the data is sent a message should replace the form saying the email had been sent. (all without the tab that contains the form closing)
Sudo Code
If (email) is complete
{Send Email}
echo "thank you for for your email"
}else{
Display email form
Solution i am trying?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script><script>
$('#form1').submit(function(e)
{
e.preventDefault();
$.ajax({
type: 'POST',
url: 'indextest2.php',
data: $("#form1").serialize(),
success: function(response) {
}
});
});
</script>
Now this would be great as it stops the page refreshing and it sends the email but it stops the "thank you you message has been sent" html from replacing the form.
So for all intents and purposes the user doesn't know if the email has been sent as the form is still there displaying the data they inputted.
Possible workaround?
Somehow getting the ajax post to insert the "thank you" message into the correct div on success of ajax post?! Is this possible?
Or am i doing something wrong, implementation wise?!
Actual Code I'm using
<div id="tabsContainer">
<div class='tab one'>
<ul>
<li><a href="#contact-form">Inquiry Form</a></li>
</ul>
</div>
<div class='content one'>
<div id="contact-form" class="clearfix">
<?php
if ($_POST["email"]<>'') {
$ToEmail = 'dancundy@hotmail.com';
$EmailSubject = 'EasyScrap Enquiry';
$mailheader = "From: ".$_POST["email"]."\r\n";
$mailheader .= "Reply-To: ".$_POST["email"]."\r\n";
$mailheader .= "Content-type: text/html; charset=iso-8859-1\r\n";
$MESSAGE_BODY = "Name: ".$_POST["FName"]." ";
$MESSAGE_BODY .= $_POST["SName"]."<br>";
$MESSAGE_BODY .= "Tel: ".$_POST["CTNumber"];
$MESSAGE_BODY .= "<br>"."email: ".$_POST["email"]."";
$MESSAGE_BODY .= "<br>"."Address: ".$_POST["STName"]." ".$_POST["PCode"];
$MESSAGE_BODY .= "<br>"."Comment: ".nl2br($_POST["Comment"])."";
mail($ToEmail, $EmailSubject, $MESSAGE_BODY, $mailheader) or die ("Failure");
?>
<h3>Contact Us</h3>
<P>Your message was sent, thank you! You will recieve an automated response within the next few minutes and will hear back from a Plymouth Easy Scrap representive shortly.</P>
</div>
</div>
</div>
<?php
}else{
?>
<fieldset>
<legend>
<h3>Contact Us</h3>
</legend>
<div id="contact-area">
<form id="form1" method="post" action="">
<label for="FName">Name:*</label>
<input name="FName" type="text" required placeholder="Enter your name" />
<label for="SName">Surname:</label>
<input name="SName" type="text" placeholder="Enter your surname" />
<label for="STName">Street:</label>
<input name="STName" type="text" placeholder="Enter the address" />
<label for="PCode">PostCode:</label>
<input name="PCode" type="text"placeholder="UK Postcode" />
<label for="Email">Email:*</label>
<input type="email" name="email" required placeholder="Enter a valid email address"/>
<label for="CTNumber">Contact:</label>
<input name="CTNumber" type="text" placeholder="Enter a contact number"/>
<label for="comment">Message:</label>
<br/>
<textarea name="Comment" rows="20" cols="20" id="Message"></textarea>
<input type="submit" name="submit" value="Submit" class="submit-button" />
</form>
<div style="clear: both;"></div>
</div>
<div class="FormInfo">
<p> </p>
<p>*Denotes a required field</p>
</div>
</fieldset>
<?php
};
?>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script><script>
$('#form1').submit(function(e)
{
event.preventDefault();
$.ajax({
type: 'POST',
url: 'indextest2.php',
data: $("#form1").serialize(),
success: function(response) {
}
});
});
</script>
Here is the actual site which will give you a better idea what i mean when i say 'tab' and hopefully expand on the problem more.
http://www.cundytech.com/SWCF/indextest2.php
The tab with the form is "enquiry form" in the menu.
I really hope someone can help?
once the messsage is sent , replace the form with the thank you message. this could be done by replacing the dom structure containing the form with the thank you message within ajax success block
ajax code:
$('#form1').submit(function(e)
{
e.preventDefault();
$.ajax({
type: 'POST',
url: 'indextest2.php',
data: $("#form1").serialize(),
success: function(response) {
// replace the email form with thank you message
$('#targetForm').html("<div class="info">Thank you for your message !!!<div>");
}
});
});
Happy Coding :)
这篇关于event.PreventDefault（）和ajax POST方法有什么可能？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
