Bootstrap Modal не открывается при отправке формы

Question

<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 = '[e-mail]';
$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('[e-mail]', $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. добавьте этот код на свою страницу:

$("#submit").click(function(){
    setTimeout(function() {
        $("form").submit();
    }, 5000); // 5 sec
    $("#myModal").show(); //Find your modal id and replace with myModal
});

Примечание: не забудьте включить 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 = '[e-mail]';
 $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 ('[e-mail]', $subject, $body, $from ))
  {
   echo "<script type='text/javascript'>showModal();</script>";
  } else
  {
   echo "something went wrong";
  }
 }
?>