Submit a form without refreshing the page

Hello,
I found a tutorial script that fits my need but it doesn’t seem to work. I’m trying to setup a email form that executes without refreshing the whole page but the script doesnt work.
I have a little bit of a javascript weakness and i was wondering if someone can figure this out for me… greatly appreciated.

thanks


<!doctype html>
<html>
	<head>
		<title>Submit form without refreshing the page</title>
		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" </script>
		<script>
			$(function()
			{	$("#send").click(function()
				{	$.ajax(
					{	type: "post",
						url: "send.php",
						data: $("#myform").serialize(),
						success: function(response)
						{	if(response == "done")
							{	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; alert("Form submitted successfully!");	}
							else
							{	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; alert("Form submission failed!");	}
						},
						error:function(response){	alert(response);	}
					});
				});
			});
		</script>
	</head>
	<body>
		<form id="myform">
			Name: <br /><input type="text" name="name" id="name" /><br />
			Email: <br /><input type="text" name="email" id="email" /> <br />
			Message: <br /><textarea name="msg" id="msg"></textarea> <br />
			<input type="button" id="send" value="Submit" />
		</form>
	</body>
</html>

<?php
$name = $_POST['name'];
$email = $_POST['email'];
$msg = $_POST['msg'];

if(!empty($name) && !empty($msg))
{	&nbsp; &nbsp; //Do your MySQL or whatever you wanna do with received data
	&nbsp;&nbsp;&nbsp; //Do not forget to echo "done" when action was completed successfully.
	&nbsp;&nbsp;
	echo "done";
}
else
{	&nbsp;&nbsp;&nbsp;
	echo "fail";
}
?>

I think PHP uses sendmail on the host. If that’s not configured it won’t work. (It won’t be set up by default). Sorry I am not a sendmail expert but I managed to use ssmtp as a replacement for sendmail with success.

Actually on reading your script again I can’t see where you are using the mail() function. Did you forget to insert it?

Is that meant to be:

<input type=“submit” id=“send” value=“Submit” />

?

Hi kiwiheretic,

Thanks for the replay back.

I tried replacing the button with submit and still not working.

I not a javascript expert and I think it has something to do with jquery script as it should return a error message if it fails in the php script.

I haven’t played with the mail function yet as Im trying to get the jquery script working.

to prevent the browser from navigating away from the page you have to listen to the form’s submit event and then use “preventDefault()”:


$(function () {
    $("#myform").on("submit", function (e) {
      	e.preventDefault();
        $.ajax({
            type: "post",
            url: "send.php",
            data: $(this).serialize(),
            success: function (response) {
                if (response == "done") {
                    alert("Form submitted successfully!");
                } else {
                    alert("Form submission failed!");
                }
            },
            error: function (response) {
                alert(response);
            }
        });
    });
});

or just return false from the handler function


$(function () {
    $("#myform").on("submit", function () {
        $.ajax({
            type: "post",
            url: "send.php",
            data: $(this).serialize(),
            success: function (response) {
                if (response == "done") {
                    alert("Form submitted successfully!");
                } else {
                    alert("Form submission failed!");
                }
            },
            error: function (response) {
                alert(response);
            }
        });
        return false;
    });
});