How can I calling popup jquery from php form submit? - php

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!';
}/**
?>