jQuery 如何让 Twitter Bootstrap 模式在表单提交时保持打开状态？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11868599/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get Twitter Bootstrap modals to stay open on form submit?
提问by onjegolders
I am trying to figure out if there is a relatively simple way (I'm not very skilled at JQuery) to keep the modal open after a form submit. (The form is contained in the modal).
我试图弄清楚是否有一种相对简单的方法（我对 JQuery 不是很熟练）在表单提交后保持模式打开。（表单包含在模态中）。
If the form is successful or there are errors, my PHP will show them but the modal closes as soon as the submit button is pressed.
如果表单成功或有错误，我的 PHP 将显示它们，但只要按下提交按钮，模态就会关闭。
If I reload the form, I can see the appropriate success or error message so all is working fine, but I'd prefer the end-user to see the message then click to close the modal afterwards.
如果我重新加载表单，我可以看到相应的成功或错误消息，所以一切正常，但我更希望最终用户看到消息，然后单击以关闭模式。
I can post my code if that helps.
如果有帮助，我可以发布我的代码。
Thank you.
谢谢你。
<?php
$success_message = "<h3 class='success'>Thank you, your message has been sent.</h3>";
$success = false; // we assume it and set to true if mail sent
$error = false;
// set and sanitize our form field values
$form = array(
'Name' => $sanitizer->text($input->post->name),
'Email' => $sanitizer->email($input->post->email),
'Phone number' => $sanitizer->text($input->post->phone),
'Type of client' => $sanitizer->text($input->post->client_type),
'Service client is after' => $sanitizer->text($input->post->service),
'Further information' => $sanitizer->textarea($input->post->information)
);
$required_fields = array(
'name' => $input->post->name,
'email' => $input->post->email
);
// check if the form was submitted
if($input->post->submit) {
// determine if any fields were ommitted or didn't validate
foreach($required_fields as $key => $value) {
if( trim($value) == '' ) {
$error_message = "<h3 class='error'>Please check that you have completed all the required fields.</h3>";
$error = true;
}
}
// if no errors, email the form results
if(!$error) {
$message = "";
$to_name = "My name";
$to = "[email protected]";
$subject = "Contact Form request";
$from_name = "My Website";
$from = "[email protected]";
$headers = "From: $from_name <$from>";
foreach($form as $key => $value) $message .= "$key: $value\n";
require_once("./scripts/PHPMailer/class.phpmailer.php");
$mail = new PHPMailer();
$mail->CharSet = "UTF8";
$mail->FromName = $from_name;
$mail->From = $from;
$mail->AddAddress($to, $to_name);
$mail->Subject = $subject;
$mail->Body = $message;
if ($mail->Send()) {
$success = true;
}
}
}
?>
<!-- Contact form made available from every page -->
<div class="modal hide fade" id="form">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Get in touch</h3>
</div>
<div class="modal-body">
<?php if(!$success) {
if($error) {
echo $error_message; // or pull from a PW field
}
?>
<form action="./" method="post" class="modal-form">
<div class="row-fluid">
<fieldset class="span6">
<label for="name">Name:</label>
<input type="text" name="name" required>
<label for="email">Email:</label>
<input type="email" name="email" required>
<label for="phone">Phone:</label>
<input type="tel" name="phone">
</fieldset>
<fieldset class="span6">
<label for="client_type">I am a...</label>
<select name="client_type">
<option>Private student</option>
<option>Business</option>
<option>Unsure</option>
</select>
<label for="service">I am interested in...</label>
<select name="service">
<option>Private tuition</option>
<option>Group tuition</option>
<option>Translation</option>
<option>Unsure</option>
</select>
</fieldset>
</div> <!-- /.row-fluid -->
<div class="row-fluid">
<fieldset>
<label for="information">Further information:</label>
<textarea name="information" name="information" id="information" class="span12"></textarea>
</fieldset>
<button type="submit" name="submit" value="Submit" class="btn">Submit</button>
</div> <!-- /.row-fluid -->
</form>
<?php } else {
echo $success_message;
} ?>
</div> <!-- /.modal-body -->
<div class="modal-footer">
</div> <!-- /.modal-footer -->
</div> <!-- /#contact_form.modal hide fade -->
回答by Peter Pajchl
In order not to close the modal window, that is, not to refresh the whole page, you need to submit the form values to your php script through ajax call.
为了不关闭模态窗口，即不刷新整个页面，您需要通过ajax调用将表单值提交到您的php脚本中。
For simplicity I will use jQuery here
为简单起见，我将在这里使用 jQuery
$(function() {
$('#your_form_id').on('submit', function(event) {
event.preventDefault();
$.ajax({
url: "your_php_script.php",
type: "POST",
data: {"formFieldName" : formFieldValue}, // here build JSON object with your form data
dataType: "json",
contentType: "application/json"
}).done(function(msg) {
// this is returned value from your PHP script
//your PHP script needs to send back JSON headers + JSON object, not new HTML document!
// update your "message" element in the modal
$("#message_element_id").text(msg);
});
});
};
回答by Sherbrow
When you form is submitted, the page is reloaded, even if the actionof the form is the same page (empty action means the same page too).
当您提交表单时，页面会重新加载，即使action表单的页面是同一页面（空操作也意味着同一页面）。
I think you want to re-open the modal once the page is loaded again. Guessing that you are using a method="post"form, your code should be something like that :
我认为您想在再次加载页面后重新打开模式。猜测您正在使用method="post"表单，您的代码应该是这样的：
<html>
<head>
<!-- stuff -->
<script type="text/javascript">
<?php if(isset($_POST['submit_button'])) { ?> /* Your (php) way of checking that the form has been submitted */
$(function() { // On DOM ready
$('#myModal').modal('show'); // Show the modal
});
<?php } ?> /* /form has been submitted */
</script>
</head>
<body>
<!-- etc -->
</body>
</html>
回答by Patrick Bateman
You can also use window.stop()which will prevent the model from closing and the entire refresh all together, it's like clicking on the stop button in the browser.
您还可以使用window.stop()来阻止模型关闭和整个刷新，就像单击浏览器中的停止按钮一样。
