jQuery/AJAX send autogenerated Email without form and stay on page

[JohnGalt]

Hello everyone,

I know this is a widely covered subject, but I kept searching the Web and couldn't find a solution for my specific problem.

What I am trying to do with jQuery/AJAX (as mentioned in the title):

I DON'T want any sort of Form that the user can fill out.
I just want a button (some HTML-Element) that when clicked sends an automatically generated mail to a predefined addess.
Neither the content nor the subject or anything else needs to be "filled in" by the viewer/user.

There will only be one JS-variable (a client-side script will insert the right value) that should be put somewhere in the content of the Email. (see "myVar" in Code)

On clicking the button, the mail should be sent, the button should be replaced by a "Thanks whatever..."-message and that's IT! No redirecting to another page or whatnot.


What I have so far for the JS Part: (in PHP-File)

PHP Code:

$script = '
    <script>
        $("#notify").click(function(){
            $.ajax({
                type: "POST",
                url: "/.../sendEmail.php",
                data: "' . "{ 'body': '" . $email_content . "' + myVar, 'to': '" . $email_recipient . "', 'from': '" . $email_sender . "', 'subject': '" . $email_subject . "' }" . '",
                dataType: "text",
                complete: function (transport) {  if (transport.status == 200) $("#notify").html("Success"); else alert("Please try again later"); }
            });
            return false;
        });
' 


My relevant HTML part is simply <p id="notify">Notify</p> .

The sendEmail.php file:

PHP Code:

<?php

$mailTo = $_POST['to'];
$mailFrom = $_POST['from'];
$subject = $_POST['subject'];
$message = $_POST['body'];

            
mail($mailTo, $subject, $message, "From: ".$mailFrom);
?>

Obviously I made a mistake somewhere or forgot something because the "Notify" changes to "Success", but I receive no Email. (I am using my own Address for testing purposes.)

For what it's worth: The Output (as shown in Sourcecode) seems to be correct with respect to syntax as well as Email adress etc.

I still very much lack experience and would be very grateful for a solution, or even for a nudge in the right direction!

If this problem has already been solved for someone on this site, I apologize. I didn't find it.

Regards,
JohnGalt

PS: If this is the wrong category, I apologize again. Please don't close/delete the thread, but just move it instead.

[DanInMa]

I think you might be "eating" the error on the php side. instead of complete try using success: and error: to handle errors n such.

take a look here for more info on error handling http://www.openlogic.com/wazi/bid/18...n-and-Handling

could you show the javascript block as it appears on client side also please? might help.

[JohnGalt]

@DanInMa

Good thinking,
here goes the Output on the client side:

<p id="notify">Notify</p>		

...
	<script>
		$("#notify").click(function(){
			$.ajax({
				type: "POST",
				url: "/.../sendEmail.php",
				data: "{ 'body': 'TEST', 'to': 'CorrectEmailHere', 'from': 'CorrectEmailHereAsWell', 'subject': 'Test' }",
				dataType: "text",
				complete: function (transport) {  if (transport.status == 200) $("#notify").html("Success"); else alert("Please try again later"); }
			});
			return false;
		});
	</script>

Hope this helps solving my problem.

Will take a look at the error handling thing also, thanks for that!

[DanInMa]

side note, you should probably be checkign readystate too ie:

if (transport.status == 200)

you might wanna change to

if (transport.status == 200 && transport.readyState == 4)

[JohnGalt]

This is what it looks like now:

PHP Code:

<script>
    $("#notify").click(function(){
        $.ajax({
            type: "POST",
            url: "/.../sendEmail.php",
            data: "{ 'body': 'TEST', 'to': '...', 'from': '...', 'subject': 'Test' }",
            dataType: "text",
            statusCode: {
                404: function() {
                    $("#notify").html("Could not contact server.");
                },
                500: function() {
                    $("#notify").html("A server-side error has occurred.");
                }
            },
            error: function() {
                $("#notify").html("A problem has occurred.");
            },
            success: function() {
                $("#notify").html("Success!");
            }
        });
        return false;
    });
</script> 


Still getting my Success-message. Still not receiving an email.
I have a feeling there's more to the error/success part, than I understand so far...

Any help would be greatly appreciated.

My sendEmail.php again:

PHP Code:

<?php

$mailTo = $_POST['to'];
$mailFrom = $_POST['from'];
$subject = $_POST['subject'];
$message = $_POST['body'];

            
mail($mailTo, $subject, $message, "From: ".$mailFrom);
?>

I really don't get it.