L
L
lesmanora2020-04-18 18:49:37
PHP
lesmanora, 2020-04-18 18:49:37

How to make a redirect after submitting a form to a modal window?

Hello! I rummaged through all the sources of information and still didn’t understand ... How can I call a modal window after submitting the form?

The form


<form class="forma" action="order.php" method="post">
  <div class="form-row">
    <div class="form-group col-md-6">
      <input type="text" name="name" class="form-control" id="name" placeholder="Имя">
    </div>
    <div class="form-group col-md-6">
      <input type="text" name="fio" class="form-control" id="fio" placeholder="Фамилия">
    </div>
  </div>
  <div class="form-row">
    <div class="form-group col-md-6">
      <input type="tel" name="phone"  class="form-control" id="phone" placeholder="Номер телефона">
    </div>
    <div class="form-group col-md-6">
      <input type="email" name="email" class="form-control" id="email" placeholder="Электронная почта">
    </div>
  </div>
  <div class="form-group">
    <textarea type="text" name="text" class="form-control" placeholder="Комментарии/вопросы"></textarea>
  </div>
  
  <button type="submit" class="btn btn-primary" >отправить</button>
</form>



PHP:


<?php


$to = "[email protected]"; // емайл получателя данных из формы 
$tema = "Форма обратной связи на PHP"; // тема полученного емайла

$message .= "Имя: ".$_POST['name']."<br>";
$message .= "Фамилия: ".$_POST['fio']."<br>";
$message .= "Телефон: ".$_POST['phone']."<br>";
$message .= "Email: ".$_POST['email']."<br>";
$message .= "Комментарий: ".$_POST['text']."<br>"; 

$headers  = 'MIME-Version: 1.0' . "\r\n"; // заголовок соответствует формату плюс символ перевода строки
$headers .= 'Content-type: text/html; charset=utf-8' . "\r\n"; // указывает на тип посылаемого контента
mail($to, $tema, $message, $headers); //отправляет получателю на емайл значения переменных



header("Location: index.html#myModal");
    exit;

?>




Modal window:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">

      <div class="modal-body">
        <p>Спасибо!</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Закрыть</button>
      </div>
    </div>
  </div> 
</div>

Answer the question

In order to leave comments, you need to log in

1 answer(s)
D
Daria Motorina, 2020-04-18
@lesmanora

The modal window is not part of the main layout of the page, it is something that is controlled by additional parameters, figuratively.
The url of the form index.html#myModal is a link from the page that scrolls to the anchor, it is scrolling to the link, not to the element with id myModal. The modal can be shown using javascript.
Usually there are two approaches - submitting the form via ajax, after successful processing - showing the modal, and submitting the form in the usual way and redirecting to another page with the text that the form was successfully submitted. If you want to show the modal as it is now, then the page needs to pass a cookie or get-parameter, with binding to which you can write js that will show this form.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question