So I am trying to get my form to use jquery to send an email. I know email is server side, so I have connected my jquery to php, and what I want to do is get an alert back after the email has been sent from the php file, but I don't get any alerts back as of right now.
<!-- JS FILE -->
<script type="text/javascript" src="js/includes.js"></script>
<!-- HTML FORM -->
<div id="id01" class="modal">
<form class="modal-content animate" action="#" method="POST">
<div class="imgcontainer">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close">×</span>
</div>
<div class="container_form">
<span><b>Account Information</b></span>
<input id="email" type="email" placeholder="Enter Email Address" name="email_name" required>
<input id="lbutton" type="submit" value="Submit"/>
</div>
Java Script Code:
$(function() { //shorthand document.ready function
$('#lbutton').on('submit', function(e) { //use on if jQuery 1.7+
e.preventDefault(); //prevent form from submitting
$.ajax({
type : 'POST',
url : './helpers/sendmail.php',
data: {
action: "lost_info",
email : $('#email').val()
},
success:function (data) {
if (data == "sent")
alert("An email has been sent to you, please check your email");
else
alert("Something went wrong, please try again");
}
});
});
});
PHP Code for testing:
<?php
echo "sent";
?>
Related
I have set up a page that is still in construction and i'm building a webform for users to contact me.
When i fill the webform and hit the "send" button, message gets send succesfully and i receieve it on my mail...but when i hit the "send" button, i get re-directed off page, saying it was sent successfully.
How can i prompt user that the message was sent successfully, without getting redirected of page, and get the message in same window?
This is my HTML code
<form action="assets/php/contactUs.php" id="contact" class="form" role="form" method="post">
<div class="row">
<div class="col-xs-6 col-md-6 form-group">
<input class="form-control" id="name" name="name" placeholder="Name" type="text" required />
</div>
<div class="col-xs-6 col-md-6 form-group">
<input class="form-control" id="email" name="email" placeholder="Email" type="email" required />
</div>
</div>
<textarea class="form-control" id="message" name="message" placeholder="Message" rows="5"></textarea>
<div class="row">
<div class="col-xs-12 col-md-12">
<button class="btn btn btn-lg">Send Message</button>
</div>
</div>
</form>
And this is my contactUs.php code
<?php
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$message = <<<EMAIL
$message
From: $name
My email is: $email
EMAIL;
$to = "mymail#mymail.com";
$subject = "New Customer Enquiry";
mail($to, $subject, $message, "From: " . $email);
echo "Thank you, your message has been successfully sent!";
?>
AJAX
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('.btn-lg').click(function(){
$.post( "assets/php/contactUs.php", $( "#contact" ).serialize(), function(msg){
alert(msg);
} );
});
});
</script>
This is a result of successfully sent message.
Please guys help me out! Thanks!
REDIRECT OPTION
$firstpageurl = 'http://example.com';
echo "Your message has been successfully sent!";
$header('Location: '.$firstpageurl);
Use Ajax as below.Change the submit type button to a normal button by removing the type attribute.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('.btn-lg').click(function(event){
$.post( "config.php", $( "#contact" ).serialize(), function(msg){
alert(msg);
} );
event.preventDefault();
});
});
</script>
The action part of your form tag is "assets/php/contactUs.php"
<form action="assets/php/contactUs.php" id="contact" class="form" role="form" method="post">
That means that posting this form will bring you to that page. You can either code that page to send the email and redirect them back like this...
header('Location: '.$firstpageurl);
or put the php code into this first page and remove the entire action property. If you put the php on this page, you need to wrap your code in an if so that people can load the page before posting the form.
if (isset($_POST['email'])){
echo "Sent email";
[email send code here]
}
as for putting the message saying it's sent...that will only work with the second method. To do it without a full page load at all do it with ajax.
You want to use JQuery for that.
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$("#contact").submit(function(){
var form_data=$("form").serialize();
$.post( "assets/php/contactUs.php",form_data, function( data ) {
alert(data);
});
event.preventDefault();
});
</script>
You can do it without using Javascript. Do the following:
Set the form to post to itself (e.g. if your form was on index.php, set action="index.php"
When the page loads, check $_POST to see if the form values were sent.
If the $_POST values are empty, display the form
If the $_POST values are set, do what you need to do with those values, then output your results into the page.
Here's a really simple example demonstrating what I mean.
<?php
$submitted = false;
if (isset($_POST["myinput"]) && $_POST["myinput"] != '') {
$submitted = true;
}
?>
<?php
if ($submitted == false) {
?>
<form action="index.php" method="post">
<input name="myinput"><input type="submit">
</form>
<?php } else { ?>
<h1>Form Submitted</h1>
<?php } ?>
Been scouring this site and find many AJAX to PHP examples but following these I cannot figure why on earth my scripts are not working.
I have an HTML form with a button. You click the button it calls a Bootstrap modal window. You enter an email address click Submit.
It posts to a PHP file that will email me.
The reason I am implementing using AJAX is because I do not want the ACTION and METHOD submit on the form. I want to submit via AJAX so the user is not redirected to my PHP page.
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"> </script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<script>
$(document).ready(function () {
$("button#submit").click(function(){
$.ajax({
type: "POST",
url: "email.php", //
data: $('form.icontact').serialize(),
success: function(msg){
$("#thanks").html(msg)
$("#contact").modal('hide');
},
error: function(){
alert("failure");
}
});
});
});
</script>
</head>
<body>
<div class="container"> <!-- numbers cannot total more than 12 for rows-->
<div id="thanks"><p>Submit!</p></div>
</div>
<!--contact modal-->
<div class="modal fade"id="contact" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<form class ="form-horizontal" name="icontact" id="icontact">
<div class="modal-header">
<h4>testemail</h4>
</div>
<div class="modal-body">
<p>Please enter your email address and click submit to receive your free first chapter</p>
<div class="form-group">
<label for ="contact-email" class="col-lg-2 control-label">Email: </label>
<div class="col-lg-10">
<input type="email" class="form-control" id="fromaddress" placeholder="new#example.com" name="fromaddress" />
<input type="hidden" id ="subject" value="enter in your email" name="subject" />
</div>
</div>
</div>
<div class="modal-footer">
<a class="btn btn-default" data-dismiss="modal">Cancel</a>
<button class="btn btn-primary" type="submit" id="submit">Send</button>
</div>
</form>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
<script src="js/bootstrap.js"></script>
</body>
and here is the php file. I get failure when I run it and it is passing the data in the URL like a GET. What am I doing wrong?
<?php
function spamcheck($field) {
// Sanitize e-mail address
$field=filter_var($field, FILTER_SANITIZE_EMAIL);
// Validate e-mail address
if(filter_var($field, FILTER_VALIDATE_EMAIL)) {
return TRUE;
} else {
return FALSE;
}
}
if (isset($_POST["fromaddress"])) {
// Check if "from" email address is valid
$mailcheck = spamcheck($_POST["fromaddress"]);
if ($mailcheck==FALSE) {
echo "Invalid input";
} else {
echo "<span class=\"alert alert-success\" >Your message has been received. Thanks!</span><br><br>";
$from = strip_tags($_POST["fromaddress"]); // sender
$subject = strip_tags($_POST["subject"]);
$message = "Thanks.";
// message lines should not exceed 70 characters (PHP rule), so wrap it
$message = wordwrap($message, 70);
// send mail
mail("test#test.com",$subject,$message,"From: $from\n");
}
}
?>
The problem is, you form is submitting either ways. You haven't prevented the default behaviour of the submit button. i.e. Submitting the form and redirecting to the form-action.
Do something like this
$("button#submit").click(function(e){
e.preventDefault(); // This line avoids the default submit event.
//Rest of stuff as you have it.....
});
A better option is to do the AJAX call on the .submit() rather than on the .click() as below
$("form#icontact").submit(function(e){
e.preventDefault();
//Proceed with other stuff as is...
});
Hope this helps! :)
I believe my problem has something to do with the fact that my first form RETURNS a new form via ajax success .html(result) AFTER DOM has executed. My jquery within DOM isn't being recognized because elements aren't visible until after the submit of first form. HOW to get my $("#fullFormMA").on(submit,(function(e){ to execute is eluding me. Here is my html
<?php
session_start();
require_once('functions.php');
include('header.htm');?>
<title>Membership Application</title>
<meta name="description" content="">
</head>
<body>
<div id="container">
<div id="loginBanner">
<?php include ("loginMenu.php"); ?>
<?php include ("bannerIcons.php"); ?>
</div> <!--end loginBanner-->
<div id="header" class="clear">
</div> <!--end header-->
<div id="content"><div class="content">
<div id="colLt">
<?php include('tabContent.php');?>
<?php include('leftSidebar.php');?>
</div>
<div id="colRt"><div class="content">
<h1>New Member Application</h1>
<ul><li>submitting an application</li><li>submitting payment</li></ul><h6>Step #1—the application</h6>Please enter an email which will ultimately be used as your website username. This email will remain as your private email.</p><br><br>
<form method="post" name="checkUserMA" id="checkUserMA">
<label class="clear" style="width:120px">Username/Email<br><span class="small"></span></label>
<input type="text" name="usernameMA" id="usernameMA" class="green" style="width:300px;"/><br><br>
<input type="submit" id="checkUserMA" class="submit" value="Submit" />
</form>
<div class="clear"></div>
<div id="errorMA" style="background:yellow;width:200px;height:100px"></div>
<div id="resultMA"></div>
</div></div>
<div class="clear"></div>
</div></div><!--end content-->
<div id="footer">
<?php include("footer.htm") ?>
<!--<?php include("disclaimer.htm") ?>-->
</div><!--end footer-->
<div class="clear"></div>
</div><!--end container-->
<div class="clear"></div>
</body>
</html>
Here is my jquery:
$(document).ready(function() {
$('#resultMA').hide();
$('#errorMA').hide();
$("#checkUserMA").submit(function(event){
event.preventDefault();
$("#resultMA").html('');
var values = $(this).serialize();
$.ajax({
url: "checkMA.php",
type: "post",
data: values,
success: function(result){
$("#resultMA").html(result).fadeIn();
$('.error').hide();
},
error:function(){
// alert("failure");
$("#resultMA").html('There was an error. Please try again.').fadeIn();
}
});//end ajax
});
$("#fullFormMA").on(submit,(function(e){
e.preventDefault();
$("#errorMA").html('');
var values = $(this).serialize();
$.ajax({
url: "validMA.php",
type: "post",
data: values,
success: function(result){
},
error:function(){
// alert("failure");
$("#errorMA").html('There was an error. Please try again.').fadeIn();
}
});//end ajax
});
});//end dom
Here is checkMA.php...
<?php
session_start();
include('functions.php');
connect();
$username = urldecode(protect($_POST['usernameMA']));
$_SESSION['guestUser'] = $username;
$sql2 = mysql_query("SELECT username FROM members WHERE username = '$username'");
$checkNumRows = mysql_num_rows($sql2);
if (!$username){
echo "<p class='red'>Enter an email to be used as your username...</p>";
} else if ($checkNumRows == 1){
echo "<span style='font-weight:bold'>The username: ".$username." is already in use.</span>";
} else if ($checkNumRows == 0){
echo "<hr><p class='green'>This username is available.</p><p>Please continue with the registration process...</p><br>";?>
<form method="post" name="fullFormMA" action="memberAppProcess.php">
<h6>Public Information - this information will be displayed to website visitors</h6>
<label class="clear" style="width:75px">Name</label>
<label class="error" id="name_error">This field is required.</label>
<input type="text" name="firstName" id="firstName" class="left inputCheck" style="width:150px" placeholder="first name"/>
<input type="text" name="lastName" id="lastName" class="inputCheck" style="margin-left:10px" placeholder="last name"/><br><br>
<input type="submit" name="fullFormMA" id="fullFormMA" class='submit right' onClick='submitFullForm();' value="Submit application">
</form>
<?php
}?>
My #checkUserMA works but my #fullFormMA doesn't work. I would love to understand why (DOM already loaded?) and how I might fix my code to allow for a form added "after the fact" via ajax .html(result). Thank you.
The DOM is ready before your ajax success so you can write this JQuery full code
$(document).ready(function() {
$('#resultMA').hide();
$('#errorMA').hide();
$("#checkUserMA").submit(function(event){
event.preventDefault();
$("#resultMA").html('');
var values = $(this).serialize();
$.ajax({
url: "checkMA.php",
type: "post",
data: values,
success: function(result){
$("#resultMA").html(result).fadeIn();
$('.error').hide();
RunAfterAjax();
},
error:function(){
// alert("failure");
$("#resultMA").html('There was an error. Please try again.').fadeIn();
}
});//end ajax
});
function RunAfterAjax(){
$("#fullFormMA").on(submit,(function(e){
e.preventDefault();
$("#errorMA").html('');
var values = $(this).serialize();
$.ajax({
url: "validMA.php",
type: "post",
data: values,
success: function(result){
},
error:function(){
// alert("failure");
$("#errorMA").html('There was an error. Please try again.').fadeIn();
}
});//end ajax
});
}
});//end dom
It's executing, you just aren't waiting long enough for it to exist. Move the event binding for the new form to the line right after you add the new form to the document.
$("#resultMA").html(result).fadeIn();
$("#fullFormMA").on(submit,(function(e){...
$("#fullFormMA").on(submit,(function(e){ /* ... */ });
fullFormMA is an <input>, you should bind click instead of submit, and use quotes around the event name.
When you use $('#something').on('event', ...), it only works if the #something element already exists.
You could fix your code by delegating the listener to an upper existing element :
$('#content').on('click', '#fullFormMA', function() { /* ... */ });
This code will detect the click event on #fullFormMA event if it is added after an ajax response.
I have the following signup form near the bottom of a new website. As soon as the AJAX response loads, the page skips to the top of the page. As far as I can tell, I have included "return false" correctly. What am I missing? Thank you!
## index.php ##
<script type="text/javascript" src="mailing-list.js"></script>
<div class="signup container">
<form id="signup-form" action="<?=$_SERVER['PHP_SELF']; ?>" method="get">
<fieldset>
<legend><h2 style="align:center;">Enter Your Email Address</h2></legend>
<div class="row">
<div class="offset4 span3">
<input class="email" type="text" name="email" id="email" />
</div>
<div class="span1">
<input type="submit" name="submit" value="Join" class="btn btn-large btn-primary" />
</div>
</div>
<div id="response">
<? require_once('inc/store-address.php'); if($_GET['submit']){ echo storeAddress(); } ?>
</div>
</fieldset>
</form>
</div>
## and mailing-list.js ##
$(document).ready(function() {
$('#signup-form').submit(function() {
// update user interface
$('#response').html('Adding email address');
// Prepare query string and send AJAX request
$.ajax({
url: 'inc/store-address.php',
data: 'ajax=true&email=' + escape($('#email').val()),
success: function(msg) {
$('#response').html(msg);
}
});
return false;
});
});
$(document).ready(function() {
$('#signup-form').submit(function(e) {
e.preventDefault();
// update user interface
$('#response').html('Adding email address');
// Prepare query string and send AJAX request
$.ajax({
url: 'inc/store-address.php',
data: 'ajax=true&email=' + escape($('#email').val()),
success: function(msg) {
$('#response').html(msg);
}
});
return false;
});
});
I doubt it is executing the default form submit behavior. Prevent it byt using the preventDefault method.
$(function(){
$('#signup-form').submit(function(e) {
e.preventDefault();
//your existing code goes here
});
});
You need to prevent the form from submitting the data (even if it is to the same file). Otherwise the page will reload before your ajax call is done. You do this with .preventDefault();
Try
...
$('#signup-form').submit(function(event) {
event.preventDefault();
// update user interface
...
I have a contact form which performs a PHP action. The contact form is connected with validation engine in jQuery. If messege is sent correctly I simply include PHP file with thanks message - require_once('success.php');. After sending message I would like to replace contact form with thanks message without reloading the whole page. Please give me some advices how to do it.
Here is my html:
<div id="contactForm">
<form id="expertForm" class="formular" method="post" action="send.php">
<fieldset>
<label>
<input name="email"
id="email"
class="required email"
type="text"
size="40"/>
</label>
<p>
<textarea name="body" id="body" rows="5" cols="50" class="required"></textarea>
</p>
</fieldset>
<input class="submit"
type="image"
src="../images/btn-send.png"/>
</form>
</div>
<script type="text/javascript">
$("#expertForm").validate();
</script>
In send.php I have:
if(!$mail->Send()) {
echo "Mailer Error: " . $mail->ErrorInfo;
} else {
require_once('success.php');
}
You can see an almost working demo here http://jsfiddle.net/v7MJA/1/
$(function(){
$("#expertForm").submit(function(e){
e.preventDefault();
if(!$(this).validate().form()) return false;
$.ajax({
url:$(this).attr('action'),
data:$(this).serialize(),
type:'post',
success:function(msg){
$("#expertForm").replaceWith(msg);
}
});
});
});
You'd better give us some code so that we could help.
Here is the theorical way: use the success event of the jquery ajax[ref] call:
$.ajax({
url: "test.html",
context: document.body,
success: function(){
$("#myformdiv").html("Thanks!");
}
});
assuming that your HTML markup is something like:
<div id="myformdiv">
<form>
<!-- form code here -->
</form>
</div>
Assuming I've understood your question correctly, you can use the replaceWith method to replace the matched elements with the specified content:
$("#yourForm").replaceWith("<p>Thanks!</p>");
I'm assuming that you're doing something asynchronously to send the form data to the server, so you can just run the above code in the callback:
$.post("yourScript.php", function() {
$("#yourForm").replaceWith("<p>Thanks!</p>");
});