Wie zum senden von Formular Daten an fancybox modales Fenster

Was ich versuche zu erreichen, scheint ziemlich einfach, aber ich Tue nicht haben ein starkes Verständnis von PHP, um es auszuführen. Ich habe ein einfaches Formular mit ja-oder Nein-radio-buttons. Ich bin zu wollen, starten Sie ein modales Fenster auf Formular und zeigt alle Fragen wurden mit ja beantwortet. Ich bin in der Lage zu starten, das modale Fenster nur in Ordnung, mit einem iframe, da ich Plane, auf andere Inhalte neben der übermittlung der form im inneren des modal, noch SEHR einfache php-script, das ich verwende, ist nicht zeigen, bis in der modal. Funktioniert Prima, wenn ich entfernen Sie das fancybox-script und halten Sie die form action php-Datei das gleiche.

Ich nehme an, es ist ein Konflikt zwischen jquery und php-Skript feuern zu unterschiedlichen Zeiten, aber haben keine Ahnung, wo zu beginnen, wie dieses Problem zu beheben. Unten ist der code, mit dem ich arbeite. Jede Hilfe wäre toll und bitte beachten Sie, dass ich nicht weiß, wie man php-code.

Können Sie sehen, ein Beispiel auf http://staging.drugrehabtest.com

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" href="scripts/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="scripts/jquery.fancybox.pack.js?v=2.1.5"></script>

<script type="text/javascript">
    if(!jQuery.browser.mobile){
        jQuery(document).ready(function() {
            $(".fancybox").fancybox({
                'width'  : 920,
                'minHeight' : 230,
                'type'   : 'iframe',
                'padding': 20,
                'href': 'success.php',
            });
        });
    }
</script>

<form action="success.php" method="post" name="contact" id="contact">
    <input type="radio" class="checkbox" name="one" value="yes" title="Do you find yourself using drugs even when you don't want to?: Yes" />
    <label class="question">Do you find yourself using drugs even when you don't want to?</label>
    <input type="submit" name="Submit" id="submit" class="fancybox fancybox.iframe" />
</form>

Success.php Seite (minus andere standard-html-Elemente)

<?php
    if ($_POST['one']=="yes") { echo "Do you find yourself using drugs even when you don't want to?"; }
?>

InformationsquelleAutor Steven Jones | 2013-08-26

-1

ok, hier ist ein weiterer Weg, die iframe Methode scheint ein bisschen alt sind, können Sie mithilfe von ajax hier. so etwas wie dieses :

Zuerst fügen Sie einen link in Ihren html-Code (im Beispiel das Letzte element) :

<form action="success.php" method="post" name="contact" id="contact">
    <input type="radio" class="checkbox" name="one" value="yes" title="Do you find yourself using drugs even when you don't want to?: Yes" />
    <label class="question">Do you find yourself using drugs even when you don't want to?</label>
    <input type="submit" name="Submit" id="submit" class="fancybox fancybox.iframe" /><!-- this is useless here -->
    <a id="check" data-fancybox-type="ajax" href="success.php" id="check">Result</a>
</form>

laut dieser Beitrag, danach senden wir die Daten über ajax beim klicken " - link, und die Antwort bekommen, in der Sie das Skript erneut aus :

<script type="text/javascript">
jQuery(document).ready(function() {
    $('#check').on("click", function (e) {
        e.preventDefault(); //avoids calling success.php from the link
        $.ajax({
            type: "POST",
            cache: false,
            url: this.href, //success.php
            data: $("#contact").serializeArray(), //all form fields
            success: function (data) {
            //on success, post returned data in fancybox
            $.fancybox(data, {
                //fancybox API options
                fitToView: false,
                openEffect: 'none',
                closeEffect: 'none'
            }); //fancybox
            } //success
        }); //ajax
    }); //on
}); //ready
</script>

und eine andere Sache ist, dass .browser entfernt von jquery statt, die Sie verwenden können Modernizr. Referenz

Perfekt. Dies hat Super geklappt und war genau das, was ich versucht habe zu erreichen. Danke!

InformationsquelleAutor Alireza Amiri

können Sie

$(document).ready(function(){
        $("#"+secc+"form").submit(function(){
            var formData = new FormData($(this)[0]);
            $.ajax({
                url: '../form/',
                type: 'POST',
                data: formData,
                async: false,
                success: function (data) {
                    //history,go(-1);
                },
                cache: false,
                contentType: false,
                processData: false
            });

        return false;
        });
    });

das Problem ist die version von jquery für die 'var formdata' funktioniert nur mit 1.10 und fancybox nicht ganz funktioniert mit dieser version

InformationsquelleAutor user1710788

0

In den Weg , die Daten werden nicht überall!
Sie post haben Sie Ihre Daten durch ajax, man braucht ein wenig Anpassung.
```
 jQuery(document).ready(function() {
   $(".fancybox").fancybox({
    'width'  : 920,
    'minHeight' : 230,
    'type'   : 'iframe',
    'padding': 20,
    'href': 'success.php',
    'data': $("#contact").serializeArray(),//send all form fields
  });
```
Auf diese Weise können Sie Ihre Daten in andere Seite...

Vielleicht dieser Beitrag hilft Ihnen mehr!
- Leider klappte das nicht. Ich fügte hinzu, die neue 'Daten' - Feld, aber bin immer noch mit dem gleichen problem. Ich warf einen Blick auf den link, den Sie gepostet, aber es ist alles geht über meinen Kopf und bin überwältigt auf, wo zu beginnen. Die Sache ist, dass die Daten gesendet werden fein und funktioniert perfekt, wenn ich entfernen Sie das modale Fenster. Es ist, wenn ich das fancybox-script, dass die Daten nicht mehr anzeigen.
InformationsquelleAutor Alireza Amiri
0
```
jQuery(document).ready(function() {
   $(".fancybox").fancybox({
    'width'  : 920,
    'minHeight' : 230,
    'type'   : 'iframe',
    'padding': 20,
    'href': 'success.php',
    'data': $("#contact").serializeArray(),//send all form fields
  });
```
- Während dieses code-snippet lösen können, die Frage, einschließlich einer Erklärung die wirklich hilft, zu verbessern, die Qualität Ihrer post. Denken Sie daran, dass Sie die Beantwortung der Frage für den Leser in der Zukunft, und die Menschen vielleicht nicht wissen, die Gründe für deinen code-Vorschlag.
InformationsquelleAutor Chirag Patel

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.