webentwicklung-frage-antwort-db.com.de

Laden Sie Modal nach dem Senden des Formulars

Relevante Seite hier: http://marcmurray.net/test_sites/cans/news.php

Ich habe versucht, eine Nachrichtenbestätigungsmodalität zu laden, nachdem der Benutzer eine E-Mail gesendet hat, kann sie aber nicht zum Laufen bringen.

Bisher habe ich versucht, das gesamte Skript auszuwerten, das Skript auszulösen, den Hash in der URL zu ändern und darauf zu prüfen, was in anderen Bereichen der Website funktioniert hat.

Das Hinzufügen von Funktionen wie Warnungen und Echo von Text auf der Seite funktioniert gut, aber wenn ich die show-Methode verwende, funktioniert es nicht. Das lässt mich glauben, dass ich entweder falschen Charakteren entkomme oder missverstehe, wie Modalen ein wenig funktionieren.

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 für das 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>

BEARBEITEN: Der Code wurde aktualisiert, um einfacher als die ursprüngliche Frage zu sein.

13
ladanta

Anstatt die modal show-Methode aufzurufen, lassen Sie zunächst alle Assets laden und rufen die modal show-Methode auf. 

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

Anstatt das Skript zu wiederholen, können Sie nicht einfach feststellen, ob Ihr Formular mit Javascript gesendet wird, und dann das Modal anzeigen.

So etwas wie

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

(Wenn Sie JQuery verwenden)

7
Tyler Pope

Das erste Problem, das ich in Ihrem Beispielcode sehe, ist:\in folgendem Code .echo "<script> \. Entfernen Sie es

Zweitens: Enthalten Sie alle erforderlichen Js- und CSS-Dateien für boostrap modal? Wenn nicht, aktualisieren Sie den Code bitte mit den folgenden Codezeilen

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

Zum Schluss wird kein Ereignis ausgelöst, um den Boostrap-Modus zu öffnen. Fügen Sie folgenden Code hinzu, um das Modal auszulösen.

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

Schlusscode:

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

Hoffe das hilft. 

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

oder Sie können eine Schaltfläche nach dem Senden des Formulars manuell erstellen und auslösen, indem Sie auf diese Schaltfläche klicken, um das Modal zu öffnen.

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

Ich entdeckte, dass die .in-Klasse (die Deckkraft auf 1 setzt), die meiner Meinung nach von Bootstrap festgelegt werden sollte, nach dem Senden des Formulars nicht angezeigt wird.

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

Übrigens Sie haben einen Fehler in der Konsole

$(...).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

Sie können als versuchen

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

Fügen Sie diese Links an Ihrem Tag HEAD ein:

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

und dann das ändern:

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

zu:

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

Vielleicht ist das das Problem ..

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

Ich würde das machen ....

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

Und drucken Sie es später auf der rechten Seite in Ihrem Kopf bei Ihrer HTML-Vorlage.

Verwenden Sie Ihre Option und fügen Sie $ (document) .ready in das Skript ein, das Sie wiederholen. Denken Sie nicht, dass dies funktionieren würde. Das Problem mit der letzten Option ist, dass Sie das Skript wiederholen, aber Jquery ist möglicherweise noch nicht vollständig geladen und wird es nicht erkennen .

Ich schlage also vor, es als Parameter zu senden und dann auszudrucken.

Wenn Sie kein Framework verwenden und es schwierig für Sie ist, einen Parameter zu übergeben, können Sie dies über die URL tun und so etwas wie meinen project.com/result.php?submit=true tun.

und an Ihrem Frontend werden Sie diese Variable lesen 

Mögen 

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

Wie xkcd149 sagt, sollten Sie AJAX -Anfragen verwenden, wenn Sie das Modal auf derselben Seite laden möchten, ohne es erneut zu laden.

  1. ersetzen Sie das Attribut onsubmit des Formulars durch eine Funktion, die die Anforderungsdaten sendet

    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. fügen Sie in der oben verwendeten Sendefunktion Erfolgs- und Fehlerrückrufe hinzu:

    function xhr(){
      var client = new XMLHttpRequest();
      ...
      client.onerror = xhrerr;
      client.onreadystatechange = handler;
      client.send(...);
      ...
    }
    
  3. die Erfolgsfunktion sollte den Modal anzeigen, wenn der zurückgegebene HTTP-Code 200 ist (oder was auch immer Sie wünschen/benötigen).

    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

Ich weiß, es ist zu spät um zu antworten. Aber hoffentlich könnte es anderen helfen.

Der folgende Code hat sich für mich bewährt, wenn ich ein Post-Redirect-Get-Muster verwende.

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

Vielleicht sollten Sie das Formular über ajax senden, damit Sie Ihre Seite nach dem Submit-Ereignis nicht aktualisieren müssen.

Solange Sie Ihre Seite nicht aktualisieren, wird Ihr Modal erfolgreich geladen.

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

} ?>

in HTML 

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