jQuery PopUp from Form Submit (via .php email form) - javascript

I'm having trouble figuring out how to have a nice popup that thanks the user for their form submission. On my hosting site, I'm using a .php page that sends me an email (form mail feature) after the form has been submitting. In my website code, I have a redirect to a thank you page. But, I'm not sure how to have the popup go to the redirect thank you page (thankyou.html) so I can style it (instead of using the default browser popup). I still want to make sure the .php file is used to send to my gmail account.
Form in my website:
<div id="container-footer">
<form action="gdform.php" method="post" id="contact">
<fieldset class="wrapper"><legend>Contact</legend>
<input type="hidden" name="subject" value="Submission" />
<input type="hidden" name="redirect" value="/thankyou.html" />
<ul class="group">
<li class="name"><label for="name">Your Name</label> <input id="name" name="name" type="text" /></li>
<li class="email"><label for="email">Your Email</label> <input id="email" name="email" type="email" /></li>
<li class="message"><label for="message">Say Hello</label><textarea id="message" name="message"></textarea></li>
</ul>
<input class="send" name="submit" type="submit" value="Send" />
</fieldset>
</form>
<footer class="wrapper" id="colophon">
<p>©2014 all rights reserved.</p>
</footer>
</div>
gdform.php
<?php
$request_method = $_SERVER["REQUEST_METHOD"];
if($request_method == "GET"){
$query_vars = $_GET;
} elseif ($request_method == "POST"){
$query_vars = $_POST;
}
reset($query_vars);
$t = date("U");
$file = $_SERVER['DOCUMENT_ROOT'] . "/../data/gdform_" . $t;
$fp = fopen($file,"w");
while (list ($key, $val) = each ($query_vars)) {
fputs($fp,"<GDFORM_VARIABLE NAME=$key START>\n");
fputs($fp,"$val\n");
fputs($fp,"<GDFORM_VARIABLE NAME=$key END>\n");
if ($key == "redirect") { $landing_page = $val;}
}
fclose($fp);
if ($landing_page != ""){
header("Location: http://".$_SERVER["HTTP_HOST"]."/$landing_page");
} else {
header("Location: http://".$_SERVER["HTTP_HOST"]."/");
}
?>
thankyou.html (I'd like this in the nice jQuery or other than browser popup)
<h1>THANK YOU!</h1>
<p>Thank you for contacting me. I'll get back with you as soon as possible.</p>

You could probably make the popup using Jack Moore's jQuery Modal. Then, you can call that JS function with your PHP code.
I'm not the best in this field, so someone else can probably give a better, more definitive answer.

Related

How can I prevent page from reloading after PHP form submssion?

I have this basic PHP form and I'd like to prevent the page from refreshing after pressing the submit button. Or more like, I would like to have a confirmation paragraph created after the form is sent.
I'm very close, but the paragraph is not getting displayed I think because the page is getting refreshed.
if($_POST["submit"]) {
$recipient="contact#d.com";
$subject="Form to email message";
$sender=$_POST["sender"];
$senderEmail=$_POST["senderEmail"];
$message=$_POST["message"];
$mailBody="Name: $sender\nEmail: $senderEmail\n\n$message";
mail($recipient, $subject, $mailBody, "From: $sender <$senderEmail>");
$thankYou="<div class='thanksDiv'><p>Thank you! Your message has been sent. I'll get back to you ASAP. <i class='as fa-smile-beam'></i></p><a style='cursor:pointer' class='thanksExit'><i class='fas fa-times fa-2x'></i></a></div>";
}
<form id="myForm" name="myemailform" method="post" action="index.php">
<div class="inline">
<label>Name</label>
<input id="firstName" required placeholder="e.g: Emma" type="text" size="32" name="sender" value="">
</div>
<div class="inline">
<label>Email</label>
<input autocomplete="off" required id="email" type="email" placeholder="e.g: EmmaSmith#example.com" name="senderEmail">
</div>
<div class="inline">
<label>How can I help?</label>
<textarea id="textarea" required placeholder="Type a message here..." name="message"></textarea>
</div>
<input type="submit" name="submit" value="Submit">
<?=$thankYou ?>
</form>
Note: I've tried the preventDefault function and Ajax and they didn't work.
Thank you!
They are different ways and approaches to resolve that issue.
How I do it:
I have a processing php that will receive the post and send the email then I redirect the user to a thanks page.
header("location: thanks.php);
exit();
You can also use ajax, and disable the button once it is pressed. It depends on the developer, framework and programming preferences.
You will first need to send some data back to your AJAX from PHP.
session_start();
if(isset($_POST["submit"])) {
$recipient="contact#d.com";
$subject="Form to email message";
$sender=$_POST["sender"];
$senderEmail=$_POST["senderEmail"];
$message=$_POST["message"];
$mailBody="Name: $sender\nEmail: $senderEmail\n\n$message";
mail($recipient, $subject, $mailBody, "From: $sender <$senderEmail>");
$thankYou="<div class='thanksDiv'><p>Thank you! Your message has been sent. I'll get back to you ASAP. <i class='as fa-smile-beam'></i></p><a style='cursor:pointer' class='thanksExit'><i class='fas fa-times fa-2x'></i></a></div>";
echo $thankYou;
}
Now your PHP will send the HTML back to the AJAX Call.
$(function() {
$("#myForm").submit(function(e) {
e.preventDefault();
$.post($(this).attr("action"), $(this).serialize(), function(result) {
$(this).append(result);
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm" name="myemailform" method="post" action="index.php">
<div class="inline">
<label>Name</label>
<input id="firstName" required placeholder="e.g: Emma" type="text" size="32" name="sender" value="">
</div>
<div class="inline">
<label>Email</label>
<input autocomplete="off" required id="email" type="email" placeholder="e.g: EmmaSmith#example.com" name="senderEmail">
</div>
<div class="inline">
<label>How can I help?</label>
<textarea id="textarea" required placeholder="Type a message here..." name="message"></textarea>
</div>
<input type="submit" name="submit" value="Submit">
</form>
In this JavaScript, you will notice, I make use of the Event object for the Submit Callback. This allows me to use .preventDefault() properly.
Trying to put the message into your Session is fine, yet it requires loading another page to call up a session. PHP is only executed before the web server sends the HTML to the Web Browser. With AJAX, the Post request is being performed "in the background", so data can be sent back in HTML, Text, JSON, or XML without the need to reload or redirect. The JavaScript can then work with that data on the same page, no "flicker".
In this case, we append the HTML to the Form, so once the message has been sent via PHP mail(), the User will see the Thank You message.
Update
Consider the following PHP alternate code.
<?php
if(isset($_POST["submit"])) {
$recipient = "contact#d.com";
$subject = "Form to email message";
$sender = $_POST["sender"];
$senderEmail = $_POST["senderEmail"];
$message = wordwrap($_POST["message"], 70, "\r\n");
$headers = "From: $sender <$senderEmail>\r\n";
$headers .= "Reply-To: $senderEmail\r\n";
$headers .= "X-Mailer: PHP/" . phpversion() . "\r\n";
$headers .= "X-Originating-IP: " . $_SERVER['REMOTE_ADDR']
$mailBody="Name: $sender\r\nEmail: $senderEmail\r\n\r\n$message";
var $res = mail($recipient, $subject, $mailBody, $headers);
if($res){
echo "<div class='thanksDiv'><p>Thank you! Your message has been sent. I'll get back to you ASAP. <i class='as fa-smile-beam'></i></p><a style='cursor:pointer' class='thanksExit'><i class='fas fa-times fa-2x'></i></a></div>";
} else {
echo "<div class='mailError'><p>Sorry, there was an error sending your message. Please check the details and try submitting it again.</p></div>";
}
}
Some solutions:
If the user does not need to stay on the same page then as Vidal posted, redirect to a success/thank you page.
If the user needs to stay on the same page then you have a few options:
Method A:
Set session with a form identifier (anything) if nothing is posted (i.e. initial page load). e.g. if(!isset($_POST['field'])){ $_SESSION['....
When form is submitted, check that session exists with the form identifier and process then destroy session.
Now if it's refreshed, the session won't exist, you can inform user that it's already submitted
Problem with this is that if session has timed out and the refresh is done, it will go through.
Method B:
Disable refresh: https://stackoverflow.com/a/7997282/1384889
Method C:
Check database for repeat entry
Method D: (I don't like this but it's used plenty)
Reload same page with '&t='.time() appended to URL by php header() or javascript depending on where your script is executed.

How redirect php Window.location.href or Window.open () methods in php and JavaScript

I follow up a tutorial to learn more about php, in it's source code there is something which seems works at that time but not anymore. here is the code , please let me know what should i change in the code in order to make login process work (currently after entering a valid user name and pass and clicking login it freezes and show first page and not go to home.php
here is template/header.php:
<div class="container">
<!--Head wrap starts-->
<div id="head_wrap">
<!--Header starts-->
<div id="header">
<img src="images/logo.png" style="float:left;"/>
<form method="post" action="" id="form1">
<strong>Email:</strong>
<input type="email" id="email" name="email" placeholder="Email" required="required" />
<strong>Password:</strong>
<input type="password" id="pass" name="pass" placeholder="****" required="required"/>
<button type="submit" id="login">Login</button>
</form>
</div>
<!--Header ends-->
</div>
here is login.php
<?php
session_start();
include("includes/connection.php");
if(isset($_POST['login'])){
$email = mysqli_real_escape_string($con,$_POST['email']);
$pass = mysqli_real_escape_string($con,$_POST['pass']);
$get_user = "select * from users where user_email='$email' AND user_pass='$pass'";
$run_user = mysqli_query($con,$get_user);
$check = mysqli_num_rows($run_user);
if($check==1){
$email = mysqli_real_escape_string($con,$_POST['email']);
$_SESSION['user_email']=$email;
echo "<script>window.open('home.php','_self')</script>";
}
else {
echo "<script>alert('Passowrd or email is not correct!')</script>";
}
}
?>
please note i have tried
echo "<script> window.location.href = 'home.php';</script>";
instead of
echo "<script>window.open('home.php','_self')</script>";
and still doesn't work, since it's tutorial and i have search through stackoverflow can't find any answer i appreciate your help.
This is your HTML code but with a submit button. You say all files are located in the same folder so this should work. I did not make any changes to login.php but it should run when the page is submitted.
<div class="container">
<!--Head wrap starts-->
<div id="head_wrap">
<!--Header starts-->
<div id="header">
<img src="images/logo.png" style="float:left;"/>
<form method="post" action="login.php" id="form1">
<strong>Email:</strong>
<input type="email" id="email" name="email" placeholder="Email" required="required" />
<strong>Password:</strong>
<input type="password" id="pass" name="pass" placeholder="****" required="required"/>
<input type="submit" id="login" name="login" value="Login">
</form>
</div>
<!--Header ends-->
</div>
</div>
Edit: I can't debug your entire project but after looking over some things I see you are not using the 'name' attribute. When a page is submitted a name/value pair is sent in the $_POST array. If you have no 'name' attribute nothing is sent. Start by adding the 'name' attribute. I have modified the above HTML code to show you how.
You have to use header(...) function but don't forget that your page keep to run at the end. Don't forget to use with die to stop your script. ;)
die(header("Location: home.php"))
or after 5 seconds :
header("refresh: 5; url=home.php");
if($check==1){
$email = mysqli_real_escape_string($con,$_POST['email']);
$_SESSION['user_email']=$email;
return 1;
}
else {
return 0;
}
and javascript check status 1 and 0 then window.location.href and window.open use
Check in your file..
1) header() must be called before any actual output is sent, either by
normal HTML tags, blank lines in a file, or from PHP
2) Combine all your PHP codes and make sure you don't have any spaces
at the beginning of the file.
3) after header('location: home.php'); add exit();
4) after sesssion_start() add ob_start();

Submit form using one button, one to emailmeform using html script and another to my internal database

Im sorry for my bad english.
Im begineer with PHP and all coding method.
I've been searching this for a days and still cannot find what I need lack to my understanding especially with php, java or ajax.
I have an emailmeform form and I have my own form on 1 php file which I want when client submit the send button, it will save the data entered previously by client to my internal database and send it to emailmeform in the same time but I cannot make this happen.
The solution I think will work is maybe ajax or javascript, but since lack of my knowledge with those codes I cannot solve this issue by my self.
Here's my code (all in 1 php script page):
<?php
session_start();
include "connection/database.php";
$sql = mysql_query("SELECT * from tb_config");
$config = mysql_fetch_array($sql);
if (isset($_POST['send'])) {
$username = $_POST['element_1'];
$password = $_POST['element_2'];
$referral = $_POST['referral'];
$a = mysql_num_rows(mysql_query("SELECT * from tb_member where username='$username'"));
if (empty($username) || empty($password)) {
echo "<script> alert('Please fill all the required form!!'); </script>";
} else if (strlen($_POST['element_2']) < 6) {
echo "<script> alert('Password at least 6 digit!!!'); </script>";
} else {
$save = mysql_query("insert into tb_member(username,password) values ('$username','$password')");
exit;
}
}
?>
<!-- this is emailmeform scipt -->
<form id="emf-form" target="_parent" class="leftLabel" enctype="multipart/form-data" method="post" action="http://www.emailmeform.com/builder/emf/to/ref">
<div id="emf-form-description"><h2>Form Register</h2></div>
</div>
<ul>
<li id="emf-li-0" class="emf-li-field emf-field-text data_container ">
<label class="emf-label-desc" for="element_0">Your Name</label>
<div class="emf-div-field"><input id="element_0" name="element_0" value="" size="30" type="text"
class="validate[optional]"/><div class="emf-div-instruction">Please fill your name</div></div>
<div class="emf-clear"></div>
</li><li id="emf-li-1" class="emf-li-field emf-field-text data_container ">
<label class="emf-label-desc" for="element_1">Username <span>*</span></label>
<div class="emf-div-field"><input id="username" name="element_1" value="<?php if (isset($_POST['element_1'])) { echo $_POST['element_1']; } ?>" size="30" type="text"
class="validate[required,length[6,15]]"/><div class="emf-div-instruction">At least 6 characters</div></div>
<div class="emf-clear"></div>
</li><li id="emf-li-2" class="emf-li-field emf-field-text data_container ">
<label class="emf-label-desc" for="element_2">Password <span>*</span></label>
<div class="emf-div-field"><input id="element_2" name="element_2" value="" size="30" type="text"
emf_mask_input="true"
class="validate[required,length[6,]]"/><div class="emf-div-instruction">At least 6 characters</div></div>
<li id="emf-li-post-button" class="middle">
<input value="Send" type="submit" name="send" onmouseover="return true;"/>
</li>
</ul>
<input name="element_counts" value="14" type="hidden" />
<input name="embed" value="forms" type="hidden" />
</form>
This script works and send to emailmeform, but wont submit any data to my internal database, BUT IF I change the action button to
<form method="post" action="">, this will submit to my internal database but not send to emailmeform. I want this work together, submit to my database and send it also to emailmeform.
I have struggling with this and still not found the answer.
Kindly please help.
Any help will be appreciated
Thanks
Refer this, it will demostrate how to insert data in database

Clear form field after submit

I have read other answers for the same question but I am having problems and would be grateful for some advice.
I have javaScript in my html file, and an Onclick() statement on the submit button to clear the form but now the email confirmation message does not come up and the message is no longer sent. If I put the onClick(); in the body of the form, every field is cleared just by clicking on a form field. I really want to be able to submit a message, then have the form cleared on successful send.
<script type ="text/javascript">
function clearform () {
document.getElementById("name").value="";
document.getElementById("email").value="";
document.getElementById("subject").value="";
document.getElementById("message").value="";
}
</script>
<div class="row">
<div class="col-sm-6">
<h2>Send us a message</h2>
<!-- action="replace it with active link."-->
<form action="contact.php" method="post" name="contact-form" id="contact-form" >
<label for="name">Your Name <span>*</span></label>
<input type="text" name="name" id="name" value="" required />
<label for="email">Your E-Mail <span>*</span></label>
<input type="text" name="email" id="email" value="" required />
<label for="subject">Subject</label>
<input type="text" name="subject" id="subject" value="" />
<label for="message">Your Message</label>
<textarea name="message" id="message"></textarea>
<div class="row">
<div class="col-sm-6">
<input type="submit" name="sendmessage" id="sendmessage" value="Submit" onclick="clearform();" />
</div>
<div class="col-sm-6 dynamic"></div>
</div>
</form>
I then have the following in the PHP file:
private function sendEmail(){
$mail = mail($this->email_admin, $this->subject, $this->message,
"From: ".$this->name." <".$this->email.">\r\n"
."Reply-To: ".$this->email."\r\n"
."X-Mailer: PHP/" . phpversion());
if($mail)
{
$this->response_status = 1;
//$this->response_html = '<p>Thank You!</p>';
}
}
function sendRequest(){
$this->validateFields();
if($this->response_status)
{
$this->sendEmail();
}
$response = array();
$response['status'] = $this->response_status;
$response['html'] = $this->response_html;
echo "<span class=\"alert alert-success\" >Your message has been received. Thanks!</span>";
header("Location: contact.php");// redirect back to your contact form
exit;
}
}
$contact_form = new Contact_Form($_POST, $admin_email, $message_min_length);
$contact_form->sendRequest();
?>
No ajax form post
If you are not using ajax to submit the form (you don't seem to be using it), there is no need for javascript to clear the form, the form will be reloaded on submit and it will be empty.
However, you have a problem with your location redirect: You are outputting html before that so the redirect will probably fail.
You should not output anything before you redirect and you could add a query variable to the url so that you can show your success message when the form loads:
if($this->response_status)
{
$this->sendEmail();
}
header("Location: contact.php");// redirect back to your contact form
exit;
Using ajax to post the form
If you are using ajax (the setting of your response variables seems to indicate that you want to do that), you should put the clearform () call in the success function of your ajax call and remove the header() redirect in php. Instead you probably want to return / output the results:
if($this->response_status)
{
$this->sendEmail();
}
$response = array();
$response['status'] = $this->response_status;
$response['html'] = $this->response_html;
echo json_encode($response);
exit;
You've got to make sure the event continues to propagate and the form is submitted:
function clearform () {
document.getElementById("name").value="";
document.getElementById("email").value="";
document.getElementById("subject").value="";
document.getElementById("message").value="";
return true;
}

Calling a function when the page is loaded from a posted form

On my index.php page, I have a form which posts into a 3rd party newsletter system.
The page reloads index.php?mail&
Is there anyway I can do a check when the page is loaded AND that the form has been posted? If it has, that it can call another function?
Thanks Chris
The code:
So what I'm hoping for is a sort of onload feature which will detect if the form name="subscribe" has been posted. Then I call a function (which will be a popup div).
I can get there with a little help and can do a bit of php or javascript, maybe not program it but understand some of it. don't have a clue with ajax
mailbar8 (where the actual form is located for the newsletter):
<?php include("globals.php"); ?>
<form action="<?php echo $website.$relative_string;?>" name="subscribe" onsubmit="javascript:return checkEmail(this);" method="post">
<div id="cell8" class="titlecell2"><h3>Email:</h3></div>
<div id="cell9" class="inputcell2">
<input type="text" class="inputfield2" name="email" value="Your Email..." id="email2" maxlength="255" onfocus="this.value='';">
</div>
<div id="cell10" class="textcell3">
<input name="group" type="hidden" id="group[]" value="<?php echo $group; ?>">
<input name="subscribe" id="sub" type="radio" value="true" checked>
</span>Subscribe</p>
</div>
<div id="cell11" class="buttoncell">
<button type="submit" name="Submit2" value="Join" id="submitButton2" button" onClick="javascript:myFunction();"/>
<span>Join</span>
</button>
</div>
<div id="cell8" class="textcell4">
<input type="radio" name="subscribe" id="unsub" value="false">
</span>Un-Subscribe</p>
</div>
</form>
The form name is subscribe, it checks the email entry is legit and then if it is redirects the user back to: http://www.allcoles.com/index.php?page=mail&
The index.php (this bit of code displays the mailbar8.php form):
<div id="guestArea" class="siteAreas">
<div id="guestTitle" class="roundedTitle">Guests</div>
<div id="guestContent" class="roundedContent">
<h4>Get Our Newsletter!</h4>
<?php
$mailbar=8;
$group=1;
include("maillist/mailbar.php");
?>
</div>
</div>
<!-- End of User and Guest Areas -->
index.php (the popup div I want to load when the page is open and the form is posted, it has a js file but that's not important - the popup div currently works by a href link on www.allcoles.com):
<div id="toPopup">
<div class="close"></div>
<span class="ecs_tooltip">Press Esc to close <span class="arrow"></span></span>
<div id="popup_content"> <!--your content start-->
<h2 align="center">All Coles Newsletter System</h2>
<h3 align="center">bringing News, Birthdays, Events and Invites to your mailbox!</h3>
<hr align="center" width="75%">
<p style="text-align:center"> <?php
if(isset ($_GET['page']))
{
if ($_GET['page'] == "mail")
{
include("maillist/mailmain.php");
}
if ($_GET['page'] == "about")
{
include("about.php");
}
}else {
print("THIS PRINT IS WHERE THE NEWSLETTER SAYS THAT THE EMAIL HAS BEEN SUBSCRIBED TO THE DATABASE, THIS POPUP DIV IS A NICE WAY TO SHOW THAT. THIS BIT CHANGES IF THE USER IS ALREADY SUBSCRIBED, OR ADDED OR REMOVED");
}
?> </p2>
<hr align="center" width="75%">
<p style="text-align:center; font-size: 12px;">
<font style="text-decoration:underline; font-weight:bold;">TIP</font>
: Remember to check your Junk Mail, and add 'administrator#allcoles.com' to your
<font style="text-decoration:underline; font-weight:bold;">SafeSenders</font>
list.</p>
</div>
</div>
<div class="loader"></div>
<div id="backgroundPopup"></div>
So ideally - when (http://www.allcoles.com/index.php?page=mail&) loads it recognises the form named subscribe which has been submitted and then calls a function.
for example the function: formPosted();
The solution I came up with was (with the help from everyone):
<?php
if(isset ($_GET['page']))
{
if ($_GET['page'] == "mail")
{
echo "<script>window.alert('Found the reply!');var formPosted = true;</script>";
}
}
?>
<script>
if(formPosted) {
window.alert("popupclick!");
popupClick();
}
</script>
How about something simple like this?
<?php
if( /* check if form has been postet */ ) {
$form_posted = true;
} else {
$form_posted = false;
}
?>
and then...
<?php if($form_posted) : ?>
<script>
formPosted();
</script>
<? endif ?>
Using Ajax:
var mail = ???;
$.post( "index.php", { mail : mail }, function( data ) {
formPosted();
});
It's simple. It posts to the page you want with the parameter mail and then calls the function you want.
<?php
$dispatched = isset($_POST['dispatched']) ? 1 : 0;
if($dispatched) {
// handle data
echo "<script>var formPosted = true;</script>";
}
?>
<script>
if(formPosted) {
// do something
}
</script>

Categories

Resources