Jquery Ajax woking only once

Question

function postData() {
    var fName=$("#fName").val();
    var lName=$("#lName").val();
    var city=$("#city").val();
    var data="fName="+fName+"&lName="+lName+"&city="+city+"&submit=submit";
    $.ajax({
        type:'POST',
        url:'employeeajaxcodebehind.php',
        data:data,
        success:function(data){
        $("#results").html(data);
        }
    });
}

Php Code below

if(isset($_POST['submit'])) {
    $fName=$_POST['fName'];
    $lName=$_POST['lName'];
    $city=$_POST['city'];
    $Query="INSERT INTO employee(emp_id,firstname,lastname,city) VALUES ('','$fName','$lName','$city')";
    $Result=mysql_query($Query);
    viewRecord();
}

Html:

<form method="POST">
    Firstname: <input type="text" id="fName" name="fName"><br>
    Lastname: <input type="text" id="lName" name="lName"><br>
    City: <input type="text" id="city" name="city"><br>
    <input type="submit" id="submit" name="submit" onclick="postData();">
</form>

Now problem is that whenever I open the page I insert one record and its getting saved successfully on my DB. But when I add another record its not getting saved... I have to reload the page on every insert...

Whats is the problem here? Also the php function viewRecord(); should be executed but its not...

Answer 1

This is because you are adding the emp_id as blank (if it is not a primary key or unique key). You need to omit this in the sql:

$sql = "INSERT INTO employee(firstname,lastname,city) VALUES ('$fName','$lName','$city')";

JS Changes: as you are using submit button. you need to prevent the page not to refresh. So change your ajax call like this one:

<script type='text/javascript'>
    /* attach a submit handler to the form */
    $("#commentForm").submit(function(event) {

      /* stop form from submitting normally */
      event.preventDefault();

      /* get some values from elements on the page: */
      var $form = $( this ),
      var url =  "employeeajaxcodebehind.php" // or $form.attr( 'action' );

      /* Send the data using post */
      var posting = $.post( url, { fName: $('#fName').val(), lName: $('#lName').val(), city: $('#city').val() } );

      /* Put the results in a div */
      posting.done(function( data ) {
        $("#results").html(data);
      });
    });
</script>

Answer 2

Use .serialize() to get data from form.

Also your form send data two times - at onclick and onsubmit. Please prevent onsubmit event by adding return false;

Answer 3

The problem as @skparwal mentioned is that you are trying to insert '' into your primary key. You need to use mysql_error() after your insert to see what errors occur. Have a look at this link on how to do this: http://php.net/manual/en/function.mysql-error.php

Also, your ajax won't work as expected because you are not returning false for onClick() which means that the form is being submitted each time after the ajax call gets triggered.

Furthermore, you should be moving to mysqli or PDO because mysql is deprecated.

Edit

Try this but it is not meant to work or be a final implementation, it is just to get you on the right path. It is untested so there might be some errors:

Change your javascript to this:

$(function(){
    $('#submit').click(postData);
});

function postData() {
    var fName=$("#fName").val();
    var lName=$("#lName").val();
    var city=$("#city").val();
    var data="fName="+fName+"&lName="+lName+"&city="+city+"&submit=submit";
    $.ajax({
        type:'POST',
        url:'employeeajaxcodebehind.php',
        data:data,
        success:function(data){
            $("#results").html(data);
        }
    });
    return false;
}

Change your PHP to this:

if(isset($_POST['submit'])) {
    $fName=$_POST['fName'];
    $lName=$_POST['lName'];
    $city=$_POST['city'];
    $Query="INSERT INTO employee(firstname,lastname,city) VALUES ('$fName','$lName','$city')";
    if( !( $Result=mysql_query($Query) ) )
        exit( '@todo need to check for error here' );
    viewRecord();
}

Change your HTML to this:

<form method="POST">
    Firstname: <input type="text" id="fName" name="fName"><br>
    Lastname: <input type="text" id="lName" name="lName"><br>
    City: <input type="text" id="city" name="city"><br>
    <input type="submit" id="submit" name="submit">
</form>