How can I calling popup jquery from php form submit?

Question

I've coded a contact form. If the mail() succeed, i would like to call my jquery popup.

How can I do this?

jQuery(function($) {

    var popup_zustand = false;

    $(".kontakt_oeffnen").submit(function() {

        if(popup_zustand == false) {
            $("#kontakt").fadeIn("normal");
            $("#hintergrund").css("opacity", "0.7");
            $("#hintergrund").fadeIn("normal");
            popup_zustand = true;
        }

    return false;
    });
});




if(mail($address, $e_subject, $msg)) 
 {
     //?????
 } else 
 {
     echo 'ERROR!';
 }/**/

I only want to show the popup if mail function succeed.

---

Both didn't work for me... sry .. maybe i'm too stupid.

here is my complete code:

file: popup.js

    jQuery(function($) {

      var popup_zustand = false;

      $(".kontakt_oeffnen").submit(function() {

          if(popup_zustand == false) {
              $("#kontakt").fadeIn("normal");
              $("#hintergrund").css("opacity", "0.7");
              $("#hintergrund").fadeIn("normal");
              popup_zustand = true;
          }

        return false;
      });

      $(".schliessen").click(function() {

          if(popup_zustand == true) {
              $("#faq").fadeOut("normal");
            $("#kontakt").fadeOut("normal");
            $("#imprint").fadeOut("normal");
              $("#hintergrund").fadeOut("normal");
              popup_zustand = false;
          }

      });

    });

file: contact.php

 <?php>
 if(mail($address, $e_subject, $msg)) 
 {
     //?????
 } else 
 {
     echo 'ERROR!';
 }
 ?>

file: contact_inc.php

<form method="post" action="classes/contact.php" name="contactform" id="contactform" autocomplete="on">
    <input name="name" type="text" id="input_text" required="required" size="24" maxlength="30"/>
    <input name="email" type="email" id="input_text" pattern="^[A-Za-z0-9](([_\.\-]?[a-zA-Z0-9]+)*)@([A-Za-z0-9]+)(([\.\-]?[a-zA-Z0-9]+)*)\.([A-Za-z]{2,})$" required="required" size="24" maxlength="30">
    <input name="phone" type="tel" id="input_text" size="24"  />
    <input name="company" type="text" id="input_text" placeholder="Firma..." size="24" maxlength="30">
    <textarea style="height:100%" name="comments" cols="30" rows="10" id="input_text" spellcheck="true" required="required"></textarea>
    <input type="submit" id="SubmitButton" value="Absenden" />
</form>

if I add to my button classes="kontakt_oeffnen" it will always popup ... without sending the email. But I should only popup if the email would be sent correctly. Can't I just call the jquery function from php (where the questions marks are...)

Answer 1

i would change the source a lil bit

HTML

<form>
    <input name="name" type="text" id="input_text" required="required" size="24" maxlength="30" />
    <input name="email" type="email" id="input_text" pattern="^[A-Za-z0-9](([_\.\-]?[a-zA-Z0-9]+)*)@([A-Za-z0-9]+)(([\.\-]?[a-zA-Z0-9]+)*)\.([A-Za-z]{2,})$" required="required" size="24" maxlength="30" />
    <input name="phone" type="tel" id="input_text" size="24" />
    <input name="company" type="text" id="input_text" placeholder="Firma..." size="24" maxlength="30" />
    <textarea style="height:100%" name="comments" cols="30" rows="10" id="input_text" spellcheck="true" required="required"></textarea>
    <input type="submit" id="SubmitButton" value="Absenden" />
</form>

jQuery

$(document).ready(function () {
    $('#SubmitButton').on('click', function () {
        var formData = $('form').serializeArray();
        var fData = Array();
        var postActive = false; // only because i dont have the contact.php (denie error)
        $(formData).each(function(){
            //console.log(this.name + ":" + this.value);
            fData[this.name] = this.value;
        });

        if(postActive)
        {
            //now submit data to php file
            $.post('classes/contact.php', {
                data: fData    // deal with info in phpfile, $_POST['data']['name'] or
                               // $_POST['data']['email'] .. return your mail result with a echo.
                               // lets say echo 1; for true or echo 0 for false
                               // because true and false in php is not the same as in js
            }).done(function (response) {
                //response contains 1 (mail was send!)
                // by the way... you have a function befor/complete/error for handeling results...
                // check out jquery.com
                alert(response);

                /* CANT find this in your "ALL MY SOURCE" post :)
                if (response === false) {
                    $("#kontakt").fadeIn("normal");
                    $("#hintergrund").css("opacity", "0.7");
                    $("#hintergrund").fadeIn("normal");
                    popup_zustand = true;
                }
                */

            });
        }
        console.log(fData); // open console to browse the array
    });
});

PHP File (classes/contact.php)

<?php
    //some source
    // Data from Form is available like next row
    $recipient = $_POST['data']['email'];
    $name      = $_POST['data']['name'];
    ....
    $result = 0;
    if(mail($rescipient, ... ))
        $result = 1;

    echo $result;

?>

of course you can work with JSON for better usage :)

in this way everything is clean, you have your HTML, your PHP and your jQuery source separated :)

PS: Check out the FIDDLE

Answer 2

You can try to mix it like this:

<?php
    if(mail($address, $e_subject, $msg)) {
?>
<script>
    jQuery(function($) {

        var popup_zustand = false;

        $(".kontakt_oeffnen").submit(function() {

            if(popup_zustand == false) {
                $("#kontakt").fadeIn("normal");
                $("#hintergrund").css("opacity", "0.7");
                $("#hintergrund").fadeIn("normal");
                popup_zustand = true;
            }

            return false;
        });
    });
</script>
<?
    } else {
        echo 'ERROR!';
    }/**
?>