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();
?>

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();
?>

• php
• javascript
• jquery
• html
• ajax

Share Improve this question Follow edited Aug 25, 2013 at 2:35 Boy Pasmo asked Aug 25, 2013 at 2:05 Boy PasmoBoy Pasmo 8,5411414 gold badges4444 silver badges7070 bronze badges 7

• 1 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 Commented Aug 25, 2013 at 2:14
• @Fred-ii- type="text" is the default. – Barmar Commented Aug 25, 2013 at 2:16
• @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 Commented Aug 25, 2013 at 2:17
• No idea if it is necessary, but a full path for the URL might be nice?? – 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 Commented Aug 25, 2013 at 2:21

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 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 remend 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.

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./tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/