1
我在模態窗口中使用多個聯繫表單。我正在使用Bootstrap，PHP和一些JS。我無法找出爲什麼它不工作。請幫忙。模態內的多個聯繫表單PHP無法正常工作
我的一種形式（我有15種相同的形式）的html：
<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 = '[email protected]>';
$sendTo = '<[email protected]>';
$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種的形式一切正常。但是，如果我提交其他表單，則會重新加載窗口，結果爲「謝謝」。所以，我只能看到白色的「謝謝」。但我知道我的結果消息必須在不重新加載的情況下出現。我怎樣才能覆蓋JS讓我的所有表單都正確？
你好。感謝您的回覆。是的，對於我小錯誤「e」的說法你是對的。但主要問題仍然存在 - Ajax無法正常工作。 – Oleg
你好，安德烈。我發現了一個奇怪的時刻。我在這個網站上有15個模態窗口。第一個通過AJAX正確工作。所有其他人用「謝謝」打開白色窗口。所有這些模式和形式都是相同的。你能提出什麼問題嗎？ – Oleg