我有一个与form-to-email.php相关联的联系表单，用于发送电子邮件。 当你点击提交它会将你重定向到另一个页面（新的）时，我想要的是在点击按钮后立即在模态中显示/显示成功消息。
<div class="modal fade" id="modal-register" tabindex="-1" role="dialog" aria-labelledby="modal-register-label" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="modal-register-label">اشتراك</h4>
</div>
<div class="modal-body">
<form method="post" name="myemailform" action="form-to-email.php">
<div class="row">
<div class="col-xs-12 input-group">
<input type="radio" name="form-busnisstype" value="company" id="company">
<label for="company">شركة</label>
<input type="radio" name="form-busnisstype" value="freelaancer" id="freelancer">
<label for="freelancer">مستقل</label>
</div>
<div class="col-xs-12 input-group">
<input type="text" name="form-name" id="name" placeholder="الاسم الكريم" required="required">
</div>
<div class="col-xs-12 input-group">
<input type="email" name="form-email" id="email" placeholder="البريد الالكتروني" required="required">
</div>
<div class="col-xs-12 input-group">
<input type="tel" pattern="^[0-9]*$" name="form-phone" id="phone" placeholder="05xxxxxxxx" required="required">
</div>
<div class="col-xs-12 input-group">
<select name="form-officetype" id="officetype" required="required">
<option value="" disabled selected hidden="" >اختر مكتبك</option>
<option value="Gold">individual</option>
<option value="Silver">room</option>
<option value="Bronze">meeting</option>
<option value="Basic">orgonization</option>
</select>
</div>
<div class="col-xs-12 input-group">
<select name="form-membership" id="membership" required="required">
<option value="" disabled selected hidden="" >اختر باقتك</option>
<option value="Gold">Gold</option>
<option value="Silver">Silver</option>
<option value="Bronze">Bronze</option>
<option value="Basic">Basic</option>
</select>
</div>
</div>
<div class="row">
<div class="col-xs-12 input-group input-group-icon">
<input placeholder="بداية الاشتراك" type="text" onfocus="(this.type='date')" id="booking" name="form-booking" required="required">
</div>
<div class="col-xs-12 input-group input-group-icon">
<select name="form-person" id="person" required="required">
<option value="" disabled selected hidden="" >كم عدد الاشخاص</option>
<option value="1">1 Person</option>
<option value="2">2 People</option><option value="3">3 People</option><option value="4">4 People</option><option value="5">5 People</option>
</select>
</div>
<textarea id="mep_msg" name="form-message" rows="" Placeholder="Comment" required="required"></textarea>
<input class="send_btn" type="submit" name='submit' value="submit">
</div>
</form>
<script language="JavaScript">
var frmvalidator = new Validator("myemailform");
frmvalidator.addValidation("name","req","Please provide your name");
frmvalidator.addValidation("email","req","Please provide your email");
frmvalidator.addValidation("tel","tel","Please enter a valid email address");
frmvalidator.addValidation("email","email","Please enter a valid email address");
</script>
</div>
</div>
</div>
</div>
<!--Success pop up Starts-->
<div class="modal fade" id="success_msg" role="dialog" tabindex="-1">
<div class="success">
<div class="modal-dialog-success">
<div class="col-xs-12 pade_none">
<button type="button" class="close" onClick="closeConfirm();" data-dismiss="modal">×</button>
<div class="col-xs-12 pade_none">
<h2>Success!</h2>
<p>Your message has been sent.</p>
</div>
<div class="col-xs-12 pad_none">
</div>
</div>
</div>
</div>
</div>
<!--Success pop up ends-->
并且form-to-email.php如下：
<?php
/* Configuration */
$subject = 'Membership Enquiry'; // Set email subject line here
$mailto = 'email here'; // Email address to send form submission to
/* END Configuration */
$name = $_POST['form-name'];
$visitor_email = $_POST['form-email'];
$message = $_POST['form-message'];
$phone = $_POST['form-phone'];
$busnisstype = $_POST['form-busnisstype'];
$officetype = $_POST['form-officetype'];
$membership = $_POST['form-membership'];
$person = $_POST['form-person'];
$booking = $_POST['form-booking'];
// HTML for email to send submission details
$body = "
<br>
<p>The following information was submitted through the contact form on your website:</p>
<p><b>الاسم</b>: $name<br>
<b>الايميل</b>: $visitor_email<br>
<b>رقم الجوال</b>: $phone<br>
<b>نوع المشأة</b>: $busnisstype<br>
<b>المكتب المرغوب</b>: $officetype<br>
<b>العضوية</b>: $membership<br>
<b>عدد الاشخاص</b>: $person<br>
<b>التاريخ المتوقع لبدء الاشتراك</b>: $booking<br>
<p>ملاحضات اخرى: <b>$message</b></p>
";
$headers = "From: $name <$visitor_email> \r\n";
$headers .= "Reply-To: $email \r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
$message = "<html><body>$body</body></html>";
if (mail($mailto, $subject, $message, $headers)) {
header('Location: thank-you.html');
} else {
echo 'Form submission failed. Please try again...'; // failure
}
?>
答案 0 :(得分：0)
您正在重定向到thank-you.html。添加代码（带有成功消息），如果你想要它是一个模态，只需添加模态代码：
<!--Success pop up Starts-->
<div class="modal fade" id="success_msg" role="dialog" tabindex="-1">
<div class="success">
<div class="modal-dialog-success">
<div class="col-xs-12 pade_none">
<button type="button" class="close" onClick="closeConfirm();" data-dismiss="modal">×</button>
<div class="col-xs-12 pade_none">
<h2>Success!</h2>
<p>Your message has been sent.</p>
</div>
<div class="col-xs-12 pad_none">
</div>
</div>
</div>
</div>
</div>
<!--Success pop up ends-->
输入时启动javascript：
<body onload="myOnloadFunc();">
你的功能应该显示模态：
function myOnloadFunc() {
$('#success_msg').modal('show');
}
答案 1 :(得分：0)
你做两件事要么使用AJAX向form-to-email.php脚本发送请求，要么用id="email" name="email"创建隐藏的iframe并在表单标签中使用target="email"，它会打开你的php脚本iframe并执行它但它不会重定向到该页面，那么你可以使用
document.getElementById('email').addEventListener('load', function() {
alert('Email Send Successfully');
});
而不是警告，您可以将烤面包机（绿色条）添加到您的模态。