我在模态窗口中使用多个联系表单。我正在使用Bootstrap，PHP和一些JS。我无法找出它为什么不起作用。请帮忙。
我的一个表单的html（我有15个相同的表单）：
<div class="modal-container">
<div class="modal" id="modal-24">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h2 class="text-center">LEDENICA<sup>TM</sup><br>ШАМПИНЬОНЫ</h2>
<img src="images/line.png" alt="line" class="img-responsive heading-line">
</div>
<div class="modal-body">
<a href="#" data-toggle="modal" data-target="#modal-23" data-dismiss="modal"><img alt="left" class="left-modal-control" src="images/chevron-left.png"></a>
<a href="#" data-toggle="modal" data-target="#modal-25" data-dismiss="modal"><img alt="right" class="right-modal-control" src="images/chevron-right.png"></a>
<div class="row modal-row">
<div class="image-col col-lg-5 col-md-5 col-sm-12 col-xs-12">
<img class="img-responsive" alt="product" src="images/tm-4.png">
</div>
<div class="info-col col-lg-7 col-md-7 col-sm-12 col-xs-12">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 hr-bottom">
<p>Наши грибы собираются на пике созревания и моментально замораживаются, сохраняя истинный вкус, задуманный природой. Таким образом, Вы можете круглый год наслаждаться вкусными и полезными грибами Ledenica™.</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<p class="red">Вес продукта:</p>
<p class="desc">0,400 кг</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<p class="red">Срок годности:</p>
<p class="desc">24 мес</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<p class="red">Условия хранения:</p>
<p class="desc">До -18<sup>o</sup> С</p>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 hr-top">
<p class="red">Пищевая ценность в 100г</p>
</div>
<div class="info-table">
<div class="table-content-1 col-lg-6 col-md-6 col-sm-6 col-xs-6">
<p>Энергетическая ценность</p>
</div>
<div class="table-content-2 col-lg-6 col-md-6 col-sm-6 col-xs-6">
<p>113 кДж/27 ккал</p>
</div>
<div class="table-content-3 col-lg-6 col-md-6 col-sm-6 col-xs-6">
<p>Белки</p>
</div>
<div class="table-content-4 col-lg-6 col-md-6 col-sm-6 col-xs-6">
<p>4,5г</p>
</div>
<div class="table-content-5 col-lg-6 col-md-6 col-sm-6 col-xs-6">
<p>Углеводы</p>
</div>
<div class="table-content-6 col-lg-6 col-md-6 col-sm-6 col-xs-6">
<p>0,1г</p>
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<p><span class="red">Состав:</span> шампиньоны</p>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 hr-top">
<p>Запросить прайс-лист</p>
</div>
<form id="contact-form-modal" method="post" action="contact-modal.php" role="form">
<div class="messages"></div>
<div class="controls">
<div class="modal-col-first col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="form-group form-group-modal">
<input id="form_email" type="text" name="email" class="form-control form-control-modal" required="required" data-error="Пожалуйста, введите email." placeholder="Email">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="modal-col col-lg-6 col-md-6 col-sm-6 col-xs-6">
<input type="submit" class="btn btn-danger btn-send" value="ПОЛУЧИТЬ ПРАЙС">
</div>
</div>
</form>**
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/contact-modal.js"></script>
我的PHP：
<?php
// configure
$from = 'myemail@gmail.com>';
$sendTo = '<myemail@gmail.com>';
$subject = 'New message from online form';
$fields = array('email' => 'email'); // array variable name => Text to appear in email
$okMessage = 'Спасибо.';
$errorMessage = 'Извините, ошибка.';
// let's do the sending
try
{
$emailText = "You have new message from online form\n=============================\n";
foreach ($_POST as $key => $value) {
if (isset($fields[$key])) {
$emailText .= "$fields[$key]: $value\n";
}
}
mail($sendTo, $subject, $emailText, "From: " . $from);
$responseArray = array('type' => 'success', 'message' => $okMessage);
}
catch (\Exception $e)
{
$responseArray = array('type' => 'danger', 'message' => $errorMessage);
}
if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
$encoded = json_encode($responseArray);
header('Content-Type: application/json');
echo $encoded;
}
else {
echo $responseArray['message'];
}
我的JS：
$(function () {
$('#contact-form-modal').validator();
$('#contact-form-modal').on('submit', function (e) {
if (!e.isDefaultPrevented()) {
var url = "contact-modal.php";
$.ajax({
type: "POST",
url: url,
data: $(this).serialize(),
success: function (data)
{
var messageAlert = 'alert-' + data.type;
var messageText = data.message;
var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>' + messageText + '</div>';
if (messageAlert && messageText) {
$('#contact-form-modal').find('.messages').html(alertBox);
$('#contact-form-modal')[0].reset();
}
}
});
return false;
}
})
});
表单提交后1表单一切正常。但是如果我提交其他表格，它会重新加载窗口，结果为＃34;谢谢你＆＃34;。所以，我只能看到＆＃34;谢谢你＆＃34;在白色。但我知道我的结果消息必须出现而不重新加载。如何覆盖JS以使我的所有表单都正确？
答案 0 :(得分：1)
您的电子邮件是空的，因为您的帖子数据的电子邮件中包含一小部分＆＃34; e＆＃34;并在您的PHP中搜索带有大写字母的电子邮件＆＃34; E＆＃34;。
你的javascript中的第二个你检查＆＃34;如果＆＃34;，如果默认被阻止......但我没有到达你阻止默认的地方。将您的javascript更改为
$('#contact-form-modal').on('submit', function (e) {
e.preventDefault();
然后省略if语句。
否则尝试使用php中的var_dump或javascript中的console.log在代码中的有趣位置进行一些调试输出，以查看代码中发生了什么;）
答案 1 :(得分：0)
我在安德烈的帮助下更新了我的问题。主要问题 - AJAX的工作正常只有第一种形式，所有其他形式打开白页用＆＃34;谢谢你＆＃34;。如何解决它？