web-dev-qa-db-fra.com

Charger modal après l'envoi du formulaire

Page pertinente ici: http://marcmurray.net/test_sites/cans/news.php

J'essaie de charger un modal de confirmation de message depuis un certain temps après que l'utilisateur a envoyé un courrier électronique, mais je ne parviens pas à le faire fonctionner du tout.

Jusqu'ici, j'ai essayé d'exécuter le script dans son intégralité, de le déclencher, de modifier le hachage de l'URL et de vérifier si cela fonctionnait dans d'autres zones du site.

L'ajout de fonctions telles que les alertes et l'écho de texte sur la page fonctionnent correctement, mais lorsque j'utilise la méthode show, cela ne fonctionne pas. Cela me porte à croire que je réussis mal à échapper aux personnages ou à mal comprendre le fonctionnement modal des modaux ... Quelqu'un peut-il voir où je me trompe?

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

<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: code mis à jour pour être plus simple que la question initiale.

javascriptphpjquerytwitter-bootstrap
13
ladanta

Au lieu d'appeler la méthode modal show au début, laissez tous les actifs se charger en premier, puis appelez la méthode modal show. 

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

Au lieu de faire écho au script, pourquoi ne pas simplement détecter votre formulaire et le soumettre avec javascript, puis afficher le modal?

Quelque chose comme

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

(Si vous utilisez JQuery)

7
Tyler Pope

Le premier problème que je vois dans votre exemple de code est\inutile, sur le code suivant .echo "<script> \. Le retirer

Deuxièmement: Incluez-vous tous les fichiers js et css requis pour le modal boostrap? Si vous ne l'ê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, aucun événement n’est déclenché pour ouvrir le modal boostrap. Ajoutez le code suivant pour 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>";

J'espère que cela t'aides. 

2
mhrilwan
$('#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 l'envoi du formulaire et cliquer sur ce 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");
    });
1
Anil Panwar

J'ai découvert que la classe .in (opacity to 1) qui, à mon avis, devrait être définie par Bootstrap ne s'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
1
Covik
$modal =   "<script>$(document).ready(function(){
         $('#thankyouModal').modal('show')
      });</script>";


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

Vous pouvez essayer comme

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

Placez ces liens sur 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 changez ceci:

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

à:

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

Peut-être que c'est le problème ..

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

Je ferais ça ....

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

Et plus tard, imprimez-le sur la partie droite de votre tête dans votre modèle HTML.

En utilisant votre option et en ajoutant $ (document) .ready dans le script, vous dites que cela ne fonctionnerait pas ... Le problème avec la dernière option est que vous ferez écho au script mais que jquery pourrait ne pas être complètement chargé et ne pas le reconnaître .

Je lui suggère donc de l’envoyer en tant que paramètre, puis de l’imprimer.

Si vous n'utilisez pas de framework et qu'il est difficile pour vous de passer un paramètre, vous pouvez le faire en pensant l'URL et faire quelque chose comme mon project.com/result.php?submit=true

et à votre frontend vous lirez cette variable 

Comme 

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

Comme xkcd149 le dit, si vous voulez charger le modal dans la même page sans recharger, vous devriez utiliser les requêtes AJAX:

  1. remplace l'attribut onsubmit du formulaire par 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 fonction d'envoi utilisée ci-dessus, ajoutez des rappels de succès et d'erreur:

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

  3. la fonction success doit afficher le modal si le code HTTP renvoyé est 200 (ou ce que vous voulez/avez 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
  }
}
1
secenv

Je sais qu'il est un peu trop tard pour répondre. Mais j'espère que cela pourrait aider les autres.

Le code ci-dessous a fonctionné pour moi lorsque j'utilise un modèle Post-Redirect-Get. Ouvrez un modal après la soumission du formulaire.

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

Peut-être devriez-vous envoyer le formulaire via ajax, donc après l'envoi de l'événement, vous n'avez pas à rafraîchir votre page.

Tant que vous n'actualiserez pas votre page, votre modal sera chargé avec succès.

0
LetsSeo
<?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 } ?>
0
Muhammad Junaid Aslam