Bootstrap Modal未在表单提交时打开

Question

＆＃13;

＆＃13;

<div class="col-lg-10 col-lg-offset-1 text-center">
  <form method="POST" action="index.php" accept="text/html" formenctype="multipart/form-data" class="contact-form row">
    <div class="col-md-4">
      <label></label>
      <input name="name" type="text" class="form-control" placeholder="Name">
    </div>
    <div class="col-md-4">
      <label></label>
      <input name="email" type="text" class="form-control" placeholder="Email">
    </div>
    <div class="col-md-4">
      <label></label>
      <input name="subject" type="text" class="form-control" placeholder="Subject">
    </div>
    <div class="col-md-12">
      <label></label>
      <textarea name="message" class="form-control" rows="9" placeholder="Your message here.."></textarea>
    </div>
    <div class="col-md-4 col-md-offset-4">
      <label></label>
      <button id="submit" name="submit" type="sumbit" data-toggle="modal" data-target="#alertModal" class="btn btn-primary btn-block btn-lg">Send <i class="ion-android-arrow-forward"></i></button>
    </div>
  </form>
</div>
</div>
</div>
</section>

<div id="alertModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-body">
        <h2 class="text-center">Submitted sucessfully!</h2>
        <p class="text-center">You clicked the button</p>

        <br/>
        <button class="btn btn-primary btn-lg center-block" data-dismiss="modal" aria-hidden="true">OK <i class="ion-android-close"></i></button>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

<?php
$headers = ''; // added this line
$headers. = "MIME-Version: 1.0\r\n";
$headers. = "Content-type: text/html\r\n";
$headers = 'From: $name'.
"\r\n". // added .= instead of =

'X-Mailer: PHP/'.phpversion();
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$from = 'From: '.$email;
$to = 'random@gmail.com';
$subject = $_POST['subject'];


$body = " From: $name\n E-mail: $email\n Subject: $subject\n Message:\n $message";

if (isset($_POST['submit'])) {
  /* Anything that goes in here is only performed if the form is submitted */
  if (mail('random@gmail.com', $subject, $body, $from)) {
    echo "<script type='text/javascript'>$(document).ready(function(){ $('#alertModal').modal('show');});</script>";
  } else {
    echo "something went wrong";
  }
} ?>

我一直试图在提交表单时调用我的模态，但似乎无法让它工作。

我一直在研究各种不同的问题，但似乎没有任何效果。

我没有这方面的JS，我的PHP被合并到一个单独的页面上。

请帮助，我希望当有人提交信息时，模式会在与表单相同的页面上打开。

由于

Answer 1

你有两个选择

1. 更改按钮类型：

   <button type="button" class="btn btn-primary btn-lg center-block" data-dismiss="modal" aria-hidden="true">OK <i class="ion-android-close"></i></button>
   

2. 通话功能：

   <form method="POST" action="index.php" accept="text/html" formenctype="multipart/form-data" class="contact-form row" onSubmit="show_modal();return;">
   

   和功能：

   function show_modal(){
     $('#myModal').modal('show');
   }
   

更新（在评论中提出要求）

延迟后设置提交表单的计时器：

1. 将按钮类型更改为按钮：type="button"
2. 将此代码添加到您的页面：
＆＃13;
＆＃13;
$("#submit").click(function(){
    setTimeout(function() {
        $("form").submit();
    }, 5000); // 5 sec
    $("#myModal").show(); //Find your modal id and replace with myModal
});
＆＃13;
＆＃13;
＆＃13;

注意：不要忘记包含jquery lib

Answer 2

看，它正在运作

function showModal(){ 
$('#alertModal').modal('show');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="col-lg-10 col-lg-offset-1 text-center">
  <form method="POST" action="index.php" accept="text/html" formenctype="multipart/form-data" class="contact-form row">
    <div class="col-md-4">
      <label></label>
      <input name="name" type="text" class="form-control" placeholder="Name">
    </div>
    <div class="col-md-4">
      <label></label>
      <input name="email" type="text" class="form-control" placeholder="Email">
    </div>
    <div class="col-md-4">
      <label></label>
      <input name="subject" type="text" class="form-control" placeholder="Subject">
    </div>
    <div class="col-md-12">
      <label></label>
      <textarea name="message" class="form-control" rows="9" placeholder="Your message here.."></textarea>
    </div>
    <div class="col-md-4 col-md-offset-4">
      <label></label>
      <button id="submit" name="submit" type="sumbit" data-toggle="modal" data-target="#alertModal" class="btn btn-primary btn-block btn-lg">Send <i class="ion-android-arrow-forward"></i></button>
    </div>
  </form>
</div>
</div>
</div>
</section>

<div id="alertModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-body">
        <h2 class="text-center">Submitted sucessfully!</h2>
        <p class="text-center">You clicked the button</p>

        <br/>
        <button class="btn btn-primary btn-lg center-block" data-dismiss="modal" aria-hidden="true">OK <i class="ion-android-close"></i></button>
      </div>
    </div>
  </div>
</div>


<?php
	$headers = ''; // added this line
	$headers .= "MIME-Version: 1.0\r\n";
	$headers .= "Content-type: text/html\r\n";
	$headers = 'From: $name' . "\r\n" . // added .= instead of =

	'X-Mailer: PHP/' . phpversion();
	$name = $_POST['name'];
	$email = $_POST['email'];
	$message = $_POST['message'];
	$from = 'From: ' . $email;
	$to = 'random@gmail.com';
	$subject = $_POST['subject'];
	
	
	$body = " From: $name\n E-mail: $email\n Subject: $subject\n Message:\n $message";
	
	if (isset($_POST['submit']))
	{
		/* Anything that goes in here is only performed if the form is submitted */
		if (mail ('random@gmail.com', $subject, $body, $from ))
		{
			echo "<script type='text/javascript'>showModal();</script>";
		} else
		{
			echo "something went wrong";
		}
	}
?>