SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot
    Join Date
    Apr 2003
    Location
    canada
    Posts
    153
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    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

    HTML Code:
    <!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 Code:
    <?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"
    }
    ?>

  2. #2
    SitePoint Addict
    Join Date
    Aug 2013
    Location
    New Zealand
    Posts
    277
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    SitePoint Addict
    Join Date
    Aug 2013
    Location
    New Zealand
    Posts
    277
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Actually on reading your script again I can't see where you are using the mail() function. Did you forget to insert it?

  4. #4
    SitePoint Addict
    Join Date
    Aug 2013
    Location
    New Zealand
    Posts
    277
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by robin01 View Post
    <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>
    Is that meant to be:

    <input type="submit" id="send" value="Submit" />

    ?

  5. #5
    SitePoint Zealot
    Join Date
    Apr 2003
    Location
    canada
    Posts
    153
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    SitePoint Member
    Join Date
    Jan 2014
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    to prevent the browser from navigating away from the page you have to listen to the form's submit event and then use "preventDefault()":
    Code:
    $(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

    Code:
    $(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;
        });
    });


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •