Загрузить мода после отправки формы

Ответ 1

Вместо вызова метода modal show upfront сначала загрузите все активы, а затем вызовите метод modal show.

echo "<script>
         $(window).load(function(){
             $('#thankyouModal').modal('show');
         });
    </script>";

Ответ 2

Вместо того, чтобы повторять script, почему бы просто не обнаружить вашу форму submit с помощью javascript, а затем отобразить модальный?

Что-то вроде

$("form").on('submit', function(){
   $('.modal').show();
})

(Если вы используете JQuery)

Ответ 3

Первая проблема, которую я вижу в вашем примере кода, не нужна\на следующий код. echo "<script> \. Удалите его

Второе: включаете ли вы все необходимые js и css файлы для boostrap modal? Если вы не обновляете код со следующими строками кода

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Наконец, не запускается событие, чтобы открыть boostrap modal. Добавьте следующий код для запуска модального.

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

Конечный код:

echo "<script>
            var newHTML = document.createElement ('div');
            newHTML.innerHTML =
            newHTML = document.createElement ('div');
            newHTML.innerHTML = ' <div id=\"myModal\" class=\"modal fade\" tabindex=\"-1\" role=\"dialog\"> <div class=\"modal-dialog\"><div class=\"modal-content\"><div class=\"modal-header\"></div>';
            document.body.appendChild (newHTML);
            $(window).load(function(){
                 $('#myModal').modal('show');
            });
        </script>";

Надеюсь, это поможет.

Ответ 4

Возможно, это проблема.

 echo "<script>$('#thankyouModal').modal('show')</script>";

Я бы сделал это....

$var =   "<script>$(document).ready(function(){
             $('#thankyouModal').modal('show')
          });</script>";

И позже напечатайте его на правой части в вашей голове в html-шаблоне.

Используя вашу опцию и добавив $(document).ready внутри script, вы эхом не думаете, что это сработает... проблема с последней опцией заключается в том, что вы будете эхо из script, но jquery может и не быть полностью загружен, и он не узнает его.

Итак, я предлагаю отправить его в качестве параметра, а затем распечатать.

Если вы не используете фреймворк, и вам сложно передать параметр, вы можете подумать над этим URL и сделать что-то вроде моего project.com/result.php?submit=true

и в вашем интерфейсе вы прочтете эту переменную

Как

if(isset($_GET["submit"]) && ($_GET["submit"]) ){
//echo your modal script 
}

Ответ 5

Я обнаружил, что .in(устанавливает непрозрачность в 1) класс, который, как мне кажется, должен быть установлен Bootstrap, не отображается после отправки формы.

$('.modal').show().addClass('in');

Btw. у вас есть ошибка в консоли

$(...).parsley(...).on is not a function

Ответ 6

$('#thankyouModal').submit(function(e) {
    e.preventDefault(); // don't submit multiple times
    this.submit(); // use the native submit method of the form element
     $('#thankyouModal').modal('show'); //Open the model
});

или Вы можете вручную создать кнопку после отправки формы и нажать на эту кнопку, чтобы открыть модальный.

$('#thankyouModal').click(function(e) {
        e.preventDefault(); // don't submit multiple times
        $("form").submit(); // use the native submit method of the form element
 $('<button type="button" id="btnThankYou" class="hidden" data-toggle="modal" data-target="#thankyouModal">ThankYouButton</button>').appendTo('body');

//This will click the button and open the modal
    $("#btnThankYou" ).trigger("click");
    });

Ответ 7

Как говорится в xkcd149, если вы хотите загрузить модальный файл на одной странице без перезагрузки, вы должны использовать AJAX-запросы:

• заменить атрибут onsubmit формы на функцию, которая отправляет данные запроса

  window.onload = function() {
    var forms = document.getElementsByTagName("form");
    for(var f in forms) {
      frm[f].onsubmit = xhr; // xhr is the function that sends the XHR
    }
  }
  

• в функции отправки, используемой выше, добавьте успешные обратные вызовы и ошибки:

  function xhr(){
    var client = new XMLHttpRequest();
    ...
    client.onerror = xhrerr;
    client.onreadystatechange = handler;
    client.send(...);
    ...
  }
  

• функция успеха должна отображать модальный, если возвращаемый код HTTP равен 200 (или что вам нужно/нужно)

  function handler(){
    if (this.readyState == 4 && this.status == 200) {
      var widget = document.getElementById("modal-body");
      // add content to the body of the modal
    } else {
    // manage error
    }
  }
  

Ответ 8

Поместите эти ссылки в свой тег HEAD:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

а затем измените это:

<script>$('#thankyouModal').modal('show')</script>

в

$(document).ready(function(){
<script>$('#thankyouModal').modal('show')</script>
});

Ответ 9

$modal =   "<script>$(document).ready(function(){
         $('#thankyouModal').modal('show')
      });</script>";


if(isset($_GET["submit"]) && ($_GET["submit"]) ){
 // after running other script
 echo $modal; 
}

Ответ 10

Вы можете попробовать как

$('#thankyouModal').submit(function(e) {
e.preventDefault(); // don't submit multiple times
this.submit(); // use the native submit method of the form element
 $('#thankyouModal').modal('show'); //Open the model
});

Ответ 11

Возможно, вам нужно отправить форму через ajax, поэтому после отправки события вам не нужно обновлять свою страницу.

Пока вы не обновляете свою страницу, ваш модальный будет успешно загружен.

Ответ 12

<?php
   if(isset($_POST["submit"])) {
    // Checking For Blank Fields..
   $checkpost = false;
if($_POST["vname"]==""||$_POST["vemail"]==""||$_POST["sub"]==""||$_POST["msg"]==""){
   echo "Please fill out everything! We need to know who you are, and why you want to get in touch with us!";}
else
    {
    // Check if the "Sender Email" input field is filled out
    $email=$_POST['vemail'];
            // Sanitize E-mail Address
    $email =filter_var($email, FILTER_SANITIZE_EMAIL);
            // Validate E-mail Address
    $email= filter_var($email, FILTER_VALIDATE_EMAIL);
    $emailConfirmed=$_POST['vemail'];
    if (!$email){
      echo "Don't forget to include your email adress! Otherwise we can't get back to you.";
            }
            else
            {
 $checkpost = true;
                $subject = $_POST['sub'];
                $message = $_POST['msg'];
                $headers =  'From:' . $emailConfirmed . "\r\n"; // Sender Email
                $headers .= 'Cc:' . $emailConfirmed . "\r\n"; // Carbon copy to Sender
                // Message lines should not exceed 70 characters (PHP rule), so wrap it
                $message = wordwrap($message, 70);
                // Send Mail By PHP Mail Function
                mail("[email protected]", $subject, $message, $headers);
                echo "<script>$('#thankyouModal').modal('show')</script>";
            };
}

} ? >

в html

<?php if($checkpost){ ?>
<script>
$('.modal').show();
</script>
<?php } ?>

Ответ 13

Я знаю, что уже слишком поздно, чтобы ответить. Но, надеюсь, это может помочь другим.

Приведенный ниже код работал для меня, когда я использую шаблон Post-Redirect-Get. Откройте модал после отправки формы.

window.onpageshow = function() {
    if (typeof window.performance != "undefined"
        && window.performance.navigation.type === 0) {
         $('#myModal').modal('show');
    }
}