How to submit this form using jQuery AJAX?

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 …

via PHP Website Development » Search Results » ajax:

How to submit this form using jQuery AJAX?

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:
Click here to get the link sent to your email.” ?>Here’s the source of email.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 “

Email:


“;

?>

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 =

//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
Your eMail: 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.