[英]Ajax and PHP Form Submit
I am using the malsup jquery form plugin to email a form via PHP, my form is in a bootstrap modal. 我正在使用malsup jquery表单插件通过PHP通过电子邮件发送表单,我的表单处于自举模式。
Everything seems to work fine, I receive success message however the email never shows up. 一切似乎都正常,我收到成功消息,但是电子邮件从未显示。 It has something to do with my Ajax because the form works if I dont use AJAX, however, it then sends the user to the PHP url which is why i decided to use the plugin.
它与我的Ajax有关,因为如果我不使用AJAX,该表单就可以工作,但是,它将用户发送到PHP url,这就是为什么我决定使用该插件。
I have tried the ajaxForm and ajaxSubmit functions from malsup but with no success, the email just never shows up. 我尝试了malsup的ajaxForm和ajaxSubmit函数,但没有成功,但电子邮件从未显示出来。
As a note, I am using another form (different name and id) and another AJAX and PHP call, but they work fine. 需要注意的是,我正在使用另一种形式(不同的名称和ID)以及另一个AJAX和PHP调用,但是它们工作正常。 They are completely separate files with different names, etc...
它们是完全独立的文件,具有不同的名称,等等。
Plugin http://jquery.malsup.com/form/#getting-started 插件http://jquery.malsup.com/form/#getting-started
Live website (select Contact Me button) http://www.sitesbymiller.com 实时网站(选择“与我联系”按钮) http://www.sitesbymiller.com
HTML HTML
<form class="contactModalForm" id="contactModalForm" action="modalForm.php" method="post">
<div class="form-group">
<label for="contactName">Name*</label>
<input type="text" class="form-control" name="modalName" id="contactName" placeholder="Enter Name" required>
</div>
<div class="form-group">
<label for="contactEmail">Email*</label>
<input type="email" class="form-control" name="modalEmail" id="contactEmail" placeholder="Enter Email" required>
</div>
<div class="form-group">
<label for="contactPhone">Phone</label>
<input type="phone" class="form-control" name="modalPhone" id="contactPhone" placeholder="Enter Phone">
</div>
<div class="form-group">
<label for="contactMessage">Message*</label>
<textarea class="form-control" rows="5" name="modalMessage" placeholder="Enter detailed message" required></textarea>
</div>
<input type="submit" name="modalSubmit" class="btn btn-success" id="modalSubmit" value="Submit"/>
<button type="button" class="btn btn-default modalClose" data- dismiss="modal">Close</button>
</form>
Jquery/AJAX/JS file jQuery / AJAX / JS文件
var optionsB = {
url:'modalForm.php',
type:'post',
clearForm:'true',
resetForm:'true',
cache:'false',
success: function() {
alert('Thanks for your message! I will get back to you shortly.');
}
};
// bind to the form's submit event
$('#contactModalForm').submit(function() {
$(this).ajaxSubmit(optionsB);
return false;
});
PHP modalForm.php PHP modalForm.php
<?php
if (isset($_POST['modalSubmit'])) {
if (!$_POST['modalName']) {
$error="<br />Please enter your name";
}
if (!$_POST['modalEmail']) {
$error.="<br />Please enter your email address";
}
if (!$_POST['modalMessage']) {
$error.="<br />Please enter a message";
}
if ($_POST['modalEmail']!="" AND !filter_var($_POST['modalEmail'],
FILTER_VALIDATE_EMAIL)) {
$error.="<br />Please enter a valid email address";
}
if ($error) {
$result='<div class="alert alert-danger"><strong>There were error(s)
in your form:</strong>'.$error.'</div>';
} else {
if (mail("sitesbymiller@gmail.com", "Message from website modal form!", "
Name: ".$_POST['modalName']."
Email: ".$_POST['modalEmail']."
Phone: ".$_POST['modalPhone']."
Message: ".$_POST['modalMessage']."
On/Off Switch: ".$_POST['onoffswitch']."
Current Website: ".$_POST['modalWebsite']."
Favorite Website: ".$_POST['modalFavorite']."
Website Features: ".$_POST['modalFeatures']."
Website Purpose: ".$_POST['modalPurpose'])) {
$result='<div class="alert alert-success"><strong>Thank
you!</strong> I\'ll be in touch.</div>';
} else {
$result='<div class="alert alert-danger">Sorry, there was
an error sending your message. Please try again later.</div>';
}
}
}
?>
HTML and PHP files were good. HTML和PHP文件很好。 Just had to make an adjustment to the JS/AJAX.
只需对JS / AJAX进行调整。 I used the ajaxForm method instead of the ajaxSubmit and renamed my options variable as well as removed the url option, type option and cache option, and perfecto!
我使用ajaxForm方法而不是ajaxSubmit,并重命名了我的options变量,并删除了url选项,type选项和cache选项以及perfecto!
Big shoutout to http://jquery.malsup.com/form/#getting-started for creating such a great plugin that is user friendly and easy to use! 大声喊着http://jquery.malsup.com/form/#getting-started,以创建一个用户友好且易于使用的出色插件!
JS/AJAX JS / AJAX
var options = {
clearForm:'true',
resetForm:'true',
success: function() {
alert('Thanks for your message! I will get back to you shortly.');
}
};
// pass options to ajaxForm
$('#contactModalForm').ajaxForm(options);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.