I have a PHP email form and the user enters their email and it sends them the link to the file they uploaded. How would I submit that form with AJAX?
Right now, I have it where they click on a link to go to the page with the email form on it, and I am passing the $target_path variable in the URL so the link to the uploaded file can be in the email. Here's the PHP I have on the "Successfully uploaded" page to go to email.php:
<?php echo "<a href='email.php?target_path=".$target_path."'>Click here</a> to get the link sent to your email." ?>
Here's the source of email.php:
<html>
<head>
<title>Upload File</title>
<style type="text/css">
body {
font-family:arial,sans-serif;
}
.error {
color:red;
}
</style>
</head>
<body>
<?php
function spamcheck($field)
{
//filter_var() sanitizes the e-mail
//address using FILTER_SANITIZE_EMAIL
$field=filter_var($field, FILTER_SANITIZE_EMAIL);
//filter_var() validates the e-mail
//address using FILTER_VALIDATE_EMAIL
if(filter_var($field, FILTER_VALIDATE_EMAIL))
{
return TRUE;
}
else
{
return FALSE;
}
}
if (isset($_REQUEST['email']))
{//if "email" is filled out, proceed
//check if the email address is invalid
$mailcheck = spamcheck($_REQUEST['email']);
if ($mailcheck==FALSE)
{
echo "Invalid email, please try again.";
}
else
{//send email
$to = $_REQUEST['email'] ;
$subject = "Your file has been uploaded to our site and here's a link to it" ;
$message = "
Hello,
Your file has been uploaded to our site. Here is a link to it for future reference, keep this email if you want to remember the link to your file: http://www.example.com/upload/".$_REQUEST['target_path']."
Thank you.";
mail($to,$subject,$message, "From: noreply@example.com" );
echo "Email has been sent. Please check your inbox and/or spam folder.";
}
}
else
{//if "email" is not filled out, display the form
echo "<form method='post' action=''>
Email: <input name='email' type='text' /><br /><br />
<input type='submit' />
</form>";
}
?>
</body>
</html>
As you can see, when they click the link to go to email.php on the "Successfully Uploaded File" page (upload.php) it passes the $target_path variable so it will be able to send a link to the uploaded file.
I would like to put the email form right on upload.php (the page where the file upload form gets submitted to) and then submit that email form with jQuery AJAX. I just don't know how to make that work. I'll also need that variable to still be passed, but I don't think it would be in the URL, it would probably be in somewhere else in the AJAX code.
Any help is greatly appreciated.
Thanks,
Nathan
Following is the JS bit of code
$(document).ready(function(){
$('#emailbtn').click(function(){
//This is short form of php echo
var target_path = <?php=$target_path?>
//Get eMail from input
var email = $('#email').val();
//Send form to email.php using GET method
$.ajax(
{
type: "GET",
url: "email.php",
data: ({"target_path" : target_path, "email" : email}),
success: function(message)
{
$("#btnspan").empty().append(message);
}
});
});
});
This is HTML bit of code
<span id="btnspan">Your eMail: <input type="text" name="email" id="email" /> <button id="emailbtn" class="button">eMail me the link</button></span>
Seems your email.php return valid messages, so what will happen when you click on the button is that content provided by your php will replace the form content! Page does NOT refresh.
One thing I would suggest you change is the GET method, change it to POST! For php I assume you know it's $_POST[varname] to retrieve the value and for the JS, just change AJAX type to POST.
You could add a hidden input to the form containing the target_path value, so you avoid passing it through the url, and you can easily access it from the jQuery AJAX callback.
<input type='hidden' id='path' value='<?php echo $target_path;?>'/>
and add
var path=$('#path').val();
var email=$('#email').val();
and send both of them with the data parameter.
data:{'path' : path, 'email' : email}
Otherwise first post almost covered it.
I would highly recommend the JQuery Form plugin found at http://jquery.malsup.com/form/. It makes it trivial to add ajax functionality to new or existing forms and I use it on applications that could be run in both ajax mode and non ajax mode.