PHP how to form submit using ajax

Question

I am trying a simple ajax request that does not need to refresh the page upon submit. But I think I did it the wrong way. Any help would be much appreciated.

HTML/JS PAGE

<script>
    $(function () {
        $('form#person').on('submit', function(e) {
            $.ajax({
                type: 'post',
                url: 'addAPerson.php',
                data: $(this).serialize(),
                success: function (o) {
                          =====>    console.log(o); <=== I TRIED DOING THIS BUT NOTHING IS PRINTED
                    alert('MUST ALERT TO DETERMINE SUCCESS PAGE');
                }
            });
            e.preventDefault();
        });
    });     
</script>

<form id="person" action="addAPerson.php" method="post">
  Firstname: <input name="fname" />
  Lastname: <input name="lname" />
  <input type="reset" style="float:right"name="cancel" value="cancel"/>
  <input type="submit" name="submit" value="save"/>
</form>

addAPerson.php

<?php
  $fname = $_POST['fname'];
  $lname =$_POST['lname'];
  $con = mysql_connect("localhost","root","");
  mysql_select_db("person",$con);
  $sql = "INSERT INTO person(firstname, lastname) VALUES('$fname', '$lname')";

  mysql_close();
?>

For one thing, this <input name="fname" /> needs to be changed to <input type="text" name="fname" /> and do the same for the other one. — Funk Forty Niner
– Funk Forty Niner, Commented Aug 25, 2013 at 2:14
@Barmar Oh, I didn't know that, till now. Thanks for the added info, will keep that in mind. (call it habit) ;-) — Funk Forty Niner
– Funk Forty Niner, Commented Aug 25, 2013 at 2:17
No idea if it is necessary, but a full path for the URL might be nice?? — Jonathon
– Jonathon, Commented Aug 25, 2013 at 2:19
@Barmar Since the Ajax already contains action="addAPerson.php", is it still necessary as the form action? I remember seeing many times, that it wasn't necessary to be inside the form, just the Ajax, as long as it point to the form's ID, am I correct? — Funk Forty Niner
– Funk Forty Niner, Commented Aug 25, 2013 at 2:21

Barmar · Accepted Answer · 2013-08-25 02:14:42Z

2

if you have more than one form on the page, you need to change:

$('form').serialize(),

to:

$(this).serialize(),

Otherwise it will include fields from all the forms in the parameters to this script.

I'd also recommend that the PHP echo something to indicate whether it was successful or not, which the AJAX success function can then display.

You should also sanitize the inputs to the script, and convert from the mysql_xxx functions to mysqli_xxx or PDO, preferably using parametrized queries.

answered Aug 25, 2013 at 2:14

Barmar

789k57 gold badges554 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Boy Pasmo Over a year ago

Thanks for this such a small mistake but.. My only problem is that my form was successfully submitted but the data is not there. I still need to refresh the page to see the inserted data. Any recommendation? Thanks

Barmar Over a year ago

You need to put code in the success function that updates the DOM to show the new data. In traditional form submission that would happen because it reloads the page, but you need to code it explicitly when using AJAX.

Boy Pasmo Over a year ago

I tried to use console.log() the 'o' but didn't print anything. Sorry, I'm still new in ajax request. Thanks for the help tho.

Boy Pasmo Over a year ago

Oh. I'm sorry. I just edited my post. What should be done to be able to print my inserted data? Again, so glad for your help.

Barmar Over a year ago

Have you read any AJAX tutorials? I'm not going to try to teach you how to do AJAX in this setting, the tutorials should show it.

|

Sithu · Accepted Answer · 2013-08-25 02:36:31Z

Following is my test based on your codes. I have a few modification in there. First, I put in jQuery link and add "type" to each textbox.

<html>
<head>
    <script src="./jquery-1.9.1.min.js"></script>
    <script>
        $(function () {
            $('form#person').on('submit', function(e) {
                $.ajax({
                    type: 'post',
                    url: 'test.php',
                    data: $('form').serialize(),
                    success: function () {
                        alert('MUST ALERT TO DETERMINE SUCCESS PAGE');
                    }
                });
                e.preventDefault();
            });
        });     
    </script>
</head>
<body>
<form id="person" method="post">
  Firstname: <input name="fname" type="text" />
  Lastname: <input name="lname" type="text" />
  <input type="reset" style="float:right"name="cancel" value="cancel"/>
  <input type="submit" name="submit" value="save" />
</form>
</body>

This is php code. Instead of wirting to database I simply echo a string. I can see the alert when I click "save" button without refreshing the page.

<?php echo "success"; ?>

Here is an alternative for your requirement. They provide source code which you can download and test run at local.

http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/

Collectives™ on Stack Overflow

PHP how to form submit using ajax

2 Answers 2

9 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related