Charger modal après l'envoi d'un formulaire

De page ici:
http://marcmurray.net/test_sites/cans/news.php

J'ai essayé de charger un message de confirmation modal pour un certain temps après que l'utilisateur envoie un e-mail, mais ne pouvez pas l'obtenir pour fonctionner.

Jusqu'à présent, j'ai essayé en faisant écho à l'ensemble du script, le déclenchement du script, et la modification de la valeur de hachage dans l'URL, et en vérifiant que, qui a travaillé dans d'autres zones du site.

Ajoutant des fonctions comme les alertes et en écho du texte sur la page fonctionne bien, mais lorsque j'utilise la méthode show il ne fonctionne pas. Ce qui m'amène à croire que je suis en échappant les caractères de mal, ou ne savent pas comment les auxiliaires modaux travailler un peu.
Quelqu'un peut-il voir où j'en suis gâcher?

PHP:

<?php
if(isset($_POST["submit"])) {
        //Checking For Blank Fields..
    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's 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
                {
                    $subject = $_POST['sub'];
                    $message = $_POST['msg'];
                    $headers =  'From:' . $emailConfirmed . "\r\n"; //Sender's 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 pour la modale

<div class="modal fade" id="thankyouModal" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title" id="myModalLabel">Thank you for pre-registering!</h4>
      </div>
      <div class="modal-body">
          <p>Thanks for getting in touch!</p>                     
      </div>    
    </div>
  </div>
</div>

EDIT: mise à Jour du code pour être plus simple que la question initiale.

source d'informationauteur ladanta

  1. 6

    Au lieu de l'appeler modal show méthode d'avance que tous les actifs de la charge d'abord, puis appeler la modal show méthode. 

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

    Au lieu de devenir le script pourquoi ne pas détecter votre soumettre le formulaire avec javascript et ensuite afficher le modal?

    Quelque chose comme

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

    (Si vous utilisez JQuery)

  3. 2

    Premier problème que je vois dans ton code d'exemple est, inutile \ sur code suivant.echo "<script> \. Supprimer

    Deuxième: Êtes-vous y compris tous les requis des fichiers js et css de bootstrap modal? Si vous n'êtes pas, Veuillez mettre à jour le code avec les lignes de code suivantes

    <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>

    Enfin il n'y a aucun évènement déclenché pour ouvrir modal bootstrap. Ajoutez le code suivant à déclencher le modal.

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

    Code Final :

    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>";

    Espère que cette aide.

  4. 1

    J'ai découvert que .dans (les jeux d'opacité à 1) de classe qui, je crois, doit être définie par Bootstrap n'affiche pas après la soumission du formulaire.

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

    Btw. vous avez une erreur dans la console

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

    C'est peut-être le problème..

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

    Je voudrais faire cela....

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

    Et, plus tard, de l'imprimer sur la partie droite à l'intérieur de votre tête à votre modèle html.

    À l'aide de votre option et en ajoutant $(document).prêt à l'intérieur du script vous êtes en écho ne pense pas que serait le travail...le problème avec la dernière option est que vous fera l'écho de la script, mais jquery peut-être pas encore complètement chargé et il l'habitude de le reconnaître.

    Donc, je suggère d'envoyer comme paramètre, puis l'imprimer.

    Si vous n'êtes pas à l'aide d'un cadre et il est difficile pour vous de passer un paramètre, vous pouvez le faire à la pensée de l'URL et de faire quelque chose comme mon project.com/result.php?submit=true

    et à votre interface vous permettra de lire cette variable

    Comme 

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

    Comme xkcd149 dit, si vous voulez dire à la charge de l'modale dans la même page sans la recharger, vous devriez être en utilisant des requêtes AJAX:

    1. remplacer l'attribut onsubmit du formulaire pour une fonction qui envoie les données de la demande

      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
  }
}

    2. dans la soumission de la fonction utilisée ci-dessus, ajouter de réussite et d'erreur rappels:

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

    3. le succès de la fonction doit afficher le modal si l'renvoyé le code HTTP 200 (ou ce que vous voulez/besoin)

      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
  }
}
  7. 1
    $('#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
});

    ou Vous pouvez créer manuellement un bouton après le formulaire de soumission et de déclencher cliquez sur le bouton pour ouvrir le modal.

    $('#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");
    });
  8. 1

    Place de ces liens à votre balise 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>

    puis modifiez ce qui suit:

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

    :

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


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

    Vous pouvez essayer aussi

    $('#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. 0

    Peut-être que vous devriez l'envoyer via le formulaire ajax, donc après l'événement submit vous n'avez pas à actualiser la page.

    Tant que vous n'aurez pas de rafraîchir votre page, votre modal sera de charger correctement.

  12. 0
    <?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's 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's 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>";
            };
}

    }
    ?>

    en html 

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