Ajax CSS HTML jQuery

Ajax table adding removing rows dynamically using javascript animation

A good and successful web application must have good user interface to interact more users and increase its usability. Application built with ajax saves number of page refreshes. I have few application/scripts which run completely on Ajax which makes it fast, user friendly and interactive to name few of them below is the list.

You can find complete list here Ajax application example.

Today we are going to design a dynamic table, in which we can dynamically add rows to table using javascript remove rows number of times without refreshing a page even once and thats also with cool javascript animation. Say thanks to ajax.

Lets start with few dummy rows, and dummy data. This page also contains entry form which we will be using for adding new data to the table.

This file will contain all the processing, like inserting record row in mysql and deleting record row from database table. Before saving the data dont forget to sanitize the input to stop xss attacks and sql injections. We are returning data in a json format
to minimize the connection overload and make application faster. This is how it works in dynamically add rows to table using javascript.
Its a demo app so i havent added database code in it. If you are dealing with database dont forget to use mysql_real_escape_string() or PDO classes


This file contains all the javascript. which includes the functionality to add remove rows in the table dynamically. Main role was played by javascript in this dynamically add rows to table using javascript.

If you like this and really appreciate dynamically add rows to table using javascript dont forget to share it.

Please visit and download updated code with edit functionality and many other customization options


Note : I noticed lot of users getting “Unexpected Error, Try again” error, Its because error reporting configuration in php.ini.

  • Make sure you have enabled php PDO library, If its not enabled script will not work properly.
  • Open php.ini file and edit “error_reporting” and change it to “E_ALL & ~E_NOTICE”
  • Add “error_reporting(E_ALL ^ E_NOTICE);” line to your php file.
[download id=”28″] [download id=”34″]


      • Thanks, for reporting it, I will upload two version, one with database and one without database connectivity.

    • tabove code is nooot working ….in action column jxt 2 empty boxex are in each cell of table???????????:-( just extracting the data from data bese and nothing else is working in code…….kindly help me

  • I love your code, I’m new with PHP and im that good with Javascript can you show me how to do this with mySQL database

    • remove the first line on ajax.php file. and add
      $fname = $_POST['fname'];
      $lname = $_POST['lname'];
      $email = $_POST['email'];
      $phone = $_POST['phone'];

      And inside if($action == "save"){
      write your “insert” query leave “echo json_encode…” statement as it is. Similarly for
      if($action == "delete"){ put your delete query.

    • Hey Amit, I have a question. Why does this message displays “Unexpected error! Try again” when I try save or delete the data? Do I need to create a database first to run this sample you have? I didn’t change anything from your code because I want to try it first if it’s working or not and there you go it displays that message. Sorry, I’m new to this. Thank you.

      • I just downloaded the code and run it, It working fine. You dont need to create the database, without the database it should work, its designed in that way. Which browser are you using and version ?

        • Are you familiar with php mysql ?? Add below code to your ajax.php file, before “extract($_POST);” but before that create a table in database “ajax_table” and

          $host = “localhost”;
          $db_uname = “root”;
          $db_pass = “admin”;
          $database = “ajax_table”;
          if (!$conn = mysql_connect($host,$db_uname,$db_pass)){
          die(‘Could not connect: ‘ . mysql_error());

          and then replace the line “// Add code to save data into mysql” with your insert query. Follow the same procedure for delete operation.

          • $fname = $_POST[‘fname’];
            $lname = $_POST[‘lname’];
            $email = $_POST[’email’];
            $phone = $_POST[‘phone’];

            if($action == “save”){
            // Add code to save data into mysql
            // Check connection
            if (mysql_connect_errno())
            echo “Failed to connect to MySQL: ” . mysql_connect_error();

            mysql_query($con,”INSERT INTO info (f_name, l_name, email, phone_no)
            VALUES (”,’$fname’, ‘$lname’,’$email’,’$phone’ )”);


          • Rahul : Here is the complete code, I havent tested it but it should work

            $conn = mysql_connect("localhost","root","") or die(mysql_error());
            mysql_select_db("rahul_table",$conn) or die(mysql_error());

            if(isset($_POST) && count($_POST)){
            $fname = $_POST['fname'];
            $lname = $_POST['lname'];
            $email = $_POST['email'];
            $phone = $_POST['phone'];
            $item_id = $_POST['item_id'];
            $action = $_POST['action'];
            if($action == "save"){
            $res = mysql_query("insert into info values('','".$fname."','".$lname."','".$email."','".$phone."')");
            echo json_encode(
            "success" => "1",
            "row_id" => mysql_insert_id(),
            "fname" => htmlentities($fname),
            "lname" => htmlentities($lname),
            "email" => htmlentities($email),
            "phone" => htmlentities($phone),
            else if($action == "delete"){
            $res = mysql_query("delete from info where id = $item_id");
            echo json_encode(
            "success" => "1",
            "item_id" => $item_id
            echo "No data set";

      • Hi! I tried your codes, I just downloaded it and when i’m trying to run it on my PC, i got an error,
        I dont know how to fix it up. The page displays a message box whenever I click Save and Delete.
        “Unexpected Error! Please try again”

        Huhuhu T_T, I’m doing our thesis. And I think you’re codes will be a really big help to our group!
        thank you!

        • Many user reported me about this erro “Unexpected Error! Please try again”, and every time i downloaded it and testeed it again and found that its working fine at my end, but i am sure now, there must be some problem. Can you please check and tell me if “short_open_tag” is on ? Those who faced this problem must be having short_open_tag set to OFF…is it ?

          • I have just uploaded new code, Please check and let me know if you still get the same error.

          • Hi, just downloaded the Code from your page and tried to use it. Without changes, I get the “Unexpected Error, Try again” error message.

            Firebug shows me the following:

            Notice: Undefined index: fname in /Applications/MAMP/htdocs/start/ajax-table/ajax.php on line 4

            Notice: Undefined index: lname in /Applications/MAMP/htdocs/start/ajax-table/ajax.php on line 5

            Notice: Undefined index: email in /Applications/MAMP/htdocs/start/ajax-table/ajax.php on line 6

            Notice: Undefined index: phone in /Applications/MAMP/htdocs/start/ajax-table/ajax.php on line 7

            Could you tell me what I can do to fix it?

  • Hi, I’ve downloaded the code, unzipped and run, but for me it doesn’t work… Delete don’t’ delete and the save button don’t save… all without error, but it doesn’t work, why? Can you help me? Thank’s!!

  • Yes, I’ve connected the script with mysql db (I can see my record in the table), but I didn’t wrote any line of code to insert/delete record from db… is this the problem?

    • @Roberto : Yes thats the problem you need to write the code to make it alive. See above comments (reply to Rahul) to find the code for insertion and deletion operations.

          • Sorry Amit, I’m here again!! 🙂
            This part of your code doesn’t work for me:
            else if($action == “delete”){
            $res = mysql_query(“delete from info where id = $”);
            echo json_encode(
            “success” => “1”,
            “item_id” => $item_id

            The error returned is:

            TypeError: response is null
            if(response.success == “1”){
            (script.js row 36)

          • This means your query failed, try printing your query and run it in phpmyadmin to see whats the problem in query.

  • in phpmyadmin or in another scrips, for example, the query:
    delete from info where id = 1366379681
    is correct and do his job very well, but in your code, the query:
    delete from info where id = $
    return the above error… what does in means the character “$” in your query?
    In the JSON response, I see :
    “success” => “1″, “item_id” => null
    Why idem_id is null if I have this code in the beginning of the file? :
    $item_id = $_POST[‘$item_id’];

        • I don’t know why, but it doesn’t work… This is the firebug output in the post section:

          Parameter: application/x-www-form-urlencoded
          action delete
          item_id 1366386444

          and this is my php code (the sql query work fine in phpmyadmin and the save action is ok, but the delete action don’t work):
          “row_id” => htmlentities($new_id),
          “fname” => htmlentities($fname),
          “lname” => htmlentities($lname),
          if($action == “delete”){
          $res = mysql_query(“delete from users where id = ‘$item_id'”);
          echo json_encode(
          “success” => “1”,
          “item_id” => $item_id
          echo “No data set”;

          but the JSON responde I sow on delete action si:

          “success” => “1″, “item_id” => null

          it’s a real mistery!!!

          • Sorry for errors in copy/paste, buy I have this line of cone in the beginnig of the file:
            $item_id = $_POST[‘$item_id’];

  • Sorry i didnt noticed that $, actually it should be “$item_id”, You also say $item_id is null, that means its not set in a code, explore the source code and check the code for Delete button it should have id attribute set, which is not set in your case. Source code should look like below
    notice the ****id=”4″****

  • It seems to be a problem with mysql_real_escape_string(); If I’m deleting this functions in ajax.php it works. With this functions i get many errors like this, if I’m trying to save a new entry:

    Warning: mysql_real_escape_string() [function.mysql-real-escape-string]: Access denied for user ‘root’@’localhost’ (using password: NO) in /Applications/MAMP/htdocs/start/ajax-table/ajax.php on line 3

  • Ahh, I found the problem, it doesn’t work if you don’t establish a mysql connection first in ajax.php. You should make some little changes in your example files.

      • Yes, that’s right, but: You can’t use “mysql_real_escape_string();” without a database connection. So you have to make an db connection before you use this function. At the moment your demo gives errors, because you are calling the function without a connection to the database.

        The mysql_real_escape_string() function needs a live connection to the database, so it can do the right kind of escaping with respect to the connection’s character set. So you need to connect before you do escaping.

        So you should change your demo, because it’s a demo without a db connection.

        • James, Yes thats correct, mysql_real_escape_string() works only if there is database connection, recently i upgraded the code so i might have forgot to remove it. Demo is working fine, i think i forgot to remove it from script i allowed users to download. James, Thanks for pointing it out.

  • Hey! Its much more better if you add two downloads link. First link is use with database and link two is same what is there! Great script, i love it! But i dont get it work 🙁

  • Notice: Undefined index: item_id in /var/zpanel/hostdata/zadmin/public_html/silmaring/regkool/ajax.php on line 8

    • I have just added a download which is a example with a database connection, which you can directly use as is in your application.

  • In IE10 when you add a row it goes on an infinite loop of row additions. If you refresh the page it only adds that 1 row like it should but obviously something needs to be adjusted for IE10.

    • Uhh i just check the demo in IE and yes you are right, Its because IE doesnt support effect method and second reason is IE doesnt support all the good things in web programming so just put if condition before ‘effect’ like, See the updated demo its working fine now, Thanks for the bug report

      if ( ! $.browser.msie ) {
      $(".table-list tr:last").effect("highlight", {color: '#4BADF5'}, 1000);

  • Fatal error: Uncaught exception ‘PDOException’ with message ‘could not find driver’ in C:\AppServ\www\Mou\config.php:7 Stack trace: #0 C:\AppServ\www\Mou\config.php(7): PDO->__construct(‘mysql:host=loca…’, ‘root’, ‘123’) #1 C:\AppServ\www\Mou\index.php(2): include(‘C:\AppServ\www\…’) #2 {main} thrown in C:\AppServ\www\Mou\config.php on line 7

    • Please check your phpinfo() and make sure you have PDO drivers installed and enables. If not enable PDO or may be you can also replace the PDO code with plain mysql.

        • Can you please send me your phpinfo() page as a html or image so i can check it with my configuration to tackle the issue. Because apart from that there couldnt be any other issue, as its just a simple script.

  • Dear Bong, when I download is not work so can you do again .

    Thanks you very much for your code.
    I waiting for you Becuase I have project relative to this

  • Dear Bong,

    I download source code without data base where I don’t see where config.php file
    please tell me I wait you

    Thank you
    Best regards

    • What error do you get ? If you have firefug please check ajax request and see what error it returns ? or best way if you have teamviewer can we have a teamviewer session so i can directly look into the code to check whats going wrong

  • When I completed information on the textbox when I save it so error Unexpected error! Try again.

    I thanks maybe error on the JavaScript
    thank you
    Best regards,

  • Function working fine but got Unexpected error! Try again every time data not reflect on page. But if refresh the page than data show on page….Please help…

    • that means there is some error in return JSON data, can you please check the response in firebug ? and post it here ?

  • I make some correction in code and it work fine….But the correction is by heat and try method, so i am not know the exact correction..

    Thanx for the code dude…:)

    • Pinkesh, can you please send me your code so i can compare it with my code, because many users posted this error, and unfortunately its working fine at my end so i am not able to reproduce the error and resolve it.

  • please help me you’r code does not work and show this error????
    Notice: Undefined variable: title in C:\wamp\www\image\index.php on line 28

    • Its because you have to disable error reporting in php.ini, or may be add this in your php file

      @ini_set('display_errors', 0);

      • Edited php.ini but still get “Unexpexted Error – try again!”
        When click on ‘save’ I get the mentioned error and have to cancel or close to continue. It does save the data to my mysql table, but does not display in form. When I try to add another record, it still displays the previous data in my entry-form.

  • dear Amit, ur script work like a charm. perfect.
    but i found my self into trouble coz my little understanding about json data. in ur ajax.php script we can save each record every time we click save button. but i dont want to do that. i want all data store into json then after that the data save into mysql database, load from json data. but i found my self no solution. could you give me an example how to save json data from ur ajax.php file into mysql database. i really gratefull for ur help.

    kindly regards,

    Mark Kurniawan
    #sorry for bad english.

  • Thanks but it is not working on my pc,nothing happens when i click delete or save,and iam not using a database. i just want to see the effect when i enter data into the form and on delete.But it works on your demo ,why not on my machine?

  • do I really need them if Iam not going to use mysql and Iam only getting data from an array.please help me here because I want to start from A, before I can proceed to B.

    • Sorry, ignore the database related settings as you are using plain version, But even if you are not using the database still you have to make changes in ini file, because if error reporting settings are not ther then it will throw “undefined variable abc”, which can cause script not working properly/

    • if you are not using the database then you can change the extensions from php to html. It should work fine, or may be you can again make change in php.ini file and tell apache to treat .html files as php files, but this is not the right way i guess. Give it a try changing php to html and it should work with no problems at all.

  • hello again,how can i send fields of type “file” .its like icannot see them when I try it out.how can I pick the file name in the ajax script??

  • Amit, thanks for your script, very very usefull, i found the problem and fixit,

    Te problem when the error message appear “Unexpected error! Try again.” is because the ajax in ajax.php didn’t found the indexs fname, lname, email etc, the solution is replacing this part of script with extract($_POST), thats all

    Thanks again

    • Its not good to use extract() function, It may open a door for hackers to hack in to your server, so dont use extract() method, Never trust end users.

    • Did you made changes in php.ini file ? If you didnt make any changed then it will keep throwing that error, and if you check response in firebug you will see something like “Undefined variable xyz”

  • Hi Amit ,

    i was searching for this , i havent try yet it , but will soon test it , dude can u do one more thing in t ?

    You have just given and option for add and delete , can you give the option for EDIT also ? , so it will be complete form in a simple manner … please email me @ my id

  • Hi,
    Those who facing “Undefined variable” problem , OPEN your CONFIG.PHP file and after <? just paste this and save
    @ini_set('display_errors', 0);

  • Hi amit
    if am select one product to store in table using session,but if am refresh the page entire row is cleared ,please give guideline for this methods

  • Hi Amit,

    I am a php developer and i need to know how can i do it with select button in each row through ajax fetching from database.
    i am using your code but when i add a row, it say (Unexpected Error ! try again later)and the data is not saved in the row, but when i refresh the page i found that the data is added to the row what is the issue and how can i solve it please reply..


  • What exactly should be replaced with ‘extract($_POST)’? Am getting the same error “Unexpected Error! Try Again!” And in the browser ‘prepare($sql); $q->execute(array($title)); $q->setFetchMode(PDO::FETCH_BOTH); // fetch while($r = $q->fetch()){ echo ”; } ?>’ these lines are displayed before the table. Please help me with this

  • Hi Amit,
    First many thanks for sharing this code with us.
    I’m new in php and much in the code is not clear to me. I’d try to fix it myself. Anyway, I’m getting error “Unexpected Error” when trying to add or delete an entry. I’ve read all comments but have found nothing to solve my issue.
    I did tried both DB and without DB versions, the same error.

    The only thing I’m sure is that once I succeed to run without DB version(I don’t remember how, if I’m not mistaken I copied something from page and replaced with code in archive(I don’t remember which exact file)).

    Actually I don’t understand the point how we can use “Without DB” version to remember entries, anyway, if there is a way to same data without using SQL would be much preferred.

    Thanks in advance,

    • Please check the response string In fire bug, send me the error. It’s midnight and I am half a sleep, So I will reply you in the morning.

  • hi amit,
    actually i am working as software devloper…i am creating table with two buttons add new row and submit rows data..i am doing this dynamically…when i click on add new button the row gets created…..and on submit click.the data on the texboxes and drop down will get submitted to database….i want new functionality that i want to provide one button on each dynamically created row on that button click it will delete all the row…so can help me out with this in javascript…

  • ype: “POST”,
    url: “ajax.php”,
    data : data,
    dataType: “json”,
    success: function(response){
    if(response.success == “1”){
    program me response.success return 0
    help me Please

  • Hi Amin,

    The problem is solved, it was coming from MySQL.

    Now I have another question and please your help.

    In your code you are using SQL table with it’s indexes(fname, lname, email, phone).
    In my table entries are divided into two types, and thus I added one more index here(e.g. type).
    Adding an entry in entry_form does the job and adds the record in SQL where I can see that type also.

    Now I have a button clicking on which I should see table having of that type of entries. SQL query would be like $sql = “SELECT * FROM info where type=gw”
    I did try it while opening the page and the query works perfect.

    What I did is added an action in script.js




    It calls function ajax with argument “show_gw”
    There I have added one more else if:
    function ajax(action,id){
    if(action ==”save”){
    data = $(“#userinfo”).serialize()+”&action=”+action;
    else if(action == “delete”){
    data = “action=”+action+”&item_id=”+id;
    else if(action == “show_pbx”){
    data = “action=”+action;

    This is also working. Then it goes to
    type: “POST”,
    url: “ajax.php”,
    data : data,
    dataType: “json”,
    success: function(response){
    and finally stacks here in success: function(response){.
    Actually I can’t get what this row is. I’m debugging the code using firebug, what I see is the process goes to success: function(response){ then it jumps to
    error: function(res){
    alert(“Unexpected error! Try again.”);

    Can you tell me please what is wrong in the code?
    I can send you code directly if you want.

    Thanks in advance,

    • This is confusing, execution pointer should go to either success: or error:, Try adding alert() or console.log() in both the functions.

    • Hi,
      I was facing the same issue as u r facing and i found the solution. Please put all the variable

      $fname = mysql_real_escape_string($_POST[‘fname’]);
      $lname = mysql_real_escape_string($_POST[‘lname’]);
      $email = mysql_real_escape_string($_POST[’email’]);
      $phone = mysql_real_escape_string($_POST[‘phone’]);
      under if($action == “save”) clause as we are not sending all the parameters when deleting the row.
      As ajax.php page expecting all the parameters and we are not providing it in case of deleting.

  • there is no error , when i pres delete it’s only delete from html not from database
    and i but the query of delete data from database
    if($action == “delete”){
    $res = mysql_query(“delete from info where id = ‘$item_id'”);
    echo json_encode(
    “success” => “1”,
    “item_id” => $item_id
    so php.ini i manipulate it !!
    what can i do ??

  • this blog is good but it is too bad, there are no id for the buttons but in JS names are there and he passed it in ajax
    this is really fantastic superb mindblowing unbelievable and last thing extrodinary…….

  • Amit, I want the entry form to be placed on the page and not toggle or something like that because when page is long the toggle form stays at the top and one has to scroll before enter data. Please help me, I’m a noob!

    • You need to make changes in css file, Just open style.css file and find “.entry-form” class and change the “position:absolute;” to “position:fixed;”

  • Thanks Amit, that was quite simple. However I have another issue. Case is that when I click on delete I have to click on the confirm delete about 4 times before it vanishes. I am using firefox and jquery.

  • Your “Advice” to turn off error reporting is a complete rookie recommendation. The problem is NOT with error reporting. The problem is something in your script. Fix the problem with your script and error reporting will not report YOUR script errors.

    Note : I noticed lot of users getting “Unexpected Error, Try again” error, Its because error reporting configuration in php.ini. There could be two solutions
    Open php.ini file and edit “error_reporting” and change it to “E_ALL & ~E_NOTICE”
    Add “error_reporting(E_ALL ^ E_NOTICE);” line to your php file.

    • Ben, thanks for visiting and really appreciate that you gave it a try, but i am not agree when you say its “rookie recommendation” because if you read other users(Tester,TAJ) comments you will notice that they are getting “Notice: Undefined variable” error which can be disabled by error_reporting, It even worked for few users.

      • Yes, of course turning off error reporting “worked” for them because it hides the actual problem that exists in the code, which is/was undefined variables. The correct thing to do is define them before they are used or check if they are set with isset.

        Brief Example:

        Okay, perhaps not a “rookie recommendation”, but nevertheless still not the correct advice, except on a production server as long as you are logging errors so you can see if there are problems.

        You, as a programmer should NEVER turn off any error reporting while you are developing, otherwise you wont know there are problems to be fixed. Nice job on the script though.

  • !!!!!!!!!!!!!!!! PROPER FIX !!!!!!!!!!!!!!!!

    Here is the proper fix for your script. In ajax.php line 24, replace that line with the following:
    $sql=”INSERT INTO info (fname, lname, email,phone)
    VALUES (‘{$fname}’, ‘{$lname}’, ‘{$email}’,'{$phone}’)”;

    The actual problem is that you were trying to do an insert without specifying the column names. Your orignal insert query did not account for the auto increment ID field. Since you did not specify column names, mysql was trying to put each record in the database starting with fname into the ID column.

    And PLEEEZE for gawd sake, stop telling people to turn off error reporting to “Fix” something. Error reporting is your best friend and tells you when your programming is bad,

    • Ben, Many thanks for the solution you provided to the users. But if you download DB version and without making any changes it will work for you(i just tried). Fix you have suggested is definitely a great suggestion, Its good practice to specify column names but in my code i have added ” which inserts auto increment field, have a look at the line number 13 which says mysql_query("insert into info values('','".$fname."','".$lname."','".$email."','".$phone."')");. I 100% agree with the last point you suggested about bad programming, i will try to follow it, thanks.

      • Okay, so I re-downloaded, no changes, same problem. So let me detail whats going on. If you are using a newer version of Mysql, I believe 5.0 or newer, your script will break at line 13 of ajax.php. You USED to be able to do like you did. On newer versions of mysql, they way you have it, php is trying to insert a “string” to an integer field.
        The actual error this produces if you run that query is : [Err] 1366 – Incorrect integer value: ” for column ‘id’ at row 1. This is because a string is being sent, and newer Mysql wont allow that.

        So, some of your users have newer mysql and some dont which explains why for some people it works, and others it does not.

        1. Optimum code is to specify the column names and drop the space for the auto-increment as I previously mention in another post.

        2.Second option is to Add a ZERO to the blank quotes of your script line 13 as follows:
        mysql_query(“insert into info values(‘0’,'”.$fname.”‘,'”.$lname.”‘,'”.$email.”‘,'”.$phone.”‘)”);

        3. Third option is to Drop the auto-increment quotes and insert NULL as follows:
        mysql_query(“insert into info values(null,'”.$fname.”‘,'”.$lname.”‘,'”.$email.”‘,'”.$phone.”‘)”);

  • For those who want to know…

    One of the changes starting with Mysql version 5.6 is that strict mode is enabled by default. Strict mode basically enforces SQL standards and will error on invalid data types attempting to be inserted into a field. This is why this script will fail for users with strict mode enabled on their Mysql installation.
    To see if strict mode is enabled on your Mysql, run the following query from a Mysql command prompt: SELECT @@sql_mode

    If it is enabled (which is a good thing) you will see: STRICT_TRANS_TABLES

    See my previous post for simple fixes if you are having problems.

  • Hi – Im trying this clean and getting the “unexpected error”. No DB or anything. Im using ffox 25, jquery 1.10+. everything seems to work ok until i try save the user. Php 5.5/ apache / windows. Demo works fine tho – I have renamed ajax.js and ajax.php to autorow respectively and updated the js file to write to autorow.php (ive also tried with default names) – but same error, any ideas?

    Thanks for a cool script!

      • Hi – I managed thanks! Cant rememeber what i didi but its working now, very helpful.

        For those who want it to be dynamic (PHP) –

        simply change the ajax name=”name[]” <– note the two square brackets. This allows multiple input types of name on a single form: ie:


        $i=0; //first in array always 0
        foreach($_POST[‘name’] as $key => $val){
        echo “Name $i: “.$_POST[‘name’][$i].”, Surname: “.$_POST[‘surname’][$i].””;
        $i++;//loop counter for each extra box

        hope syntax is correct

  • Thank You very much Sir, it is a brilliant piece of work, i was desperately in need of something similar for making multiple voucher entry

  • Very nice script! We are using it as an online conference room check out sheet on our company portal. I made some changes to column names and code so we have “Date” and “Time In” that sort automatically using strtotime() and then date() in different places to re-format the numbers. Works much better than the piece of paper we had taped to the conference room door.

    Can’t wait for the Edit row option!

    • Sure, I am working in that as well,soon you will be able to see the demo on my blog, thanks for the appreciation.

  • Hello
    Mr Amit Sir
    i tried to implement this codes but still i got an error “Unexpected error! Try again”
    even i followed according to your notice for changing error_reporting and also changed short tags set to off
    please give me solution

    • I am using PDO class for database operation, Please check if you have enabled PDO library. And let me know if this works.

        • There should be no problem running plain version, If you have firebug installed please the status of ajax request and let me know, so i can provide you the exact solution.

  • Hi Amit, It is a great tutorial. But I am having some problem when enter to the page. And the problem you had mention in the end of the post.
    prepare($sql); $q->execute(array($title)); $q->setFetchMode(PDO::FETCH_BOTH); // fetch while($r = $q->fetch()){ */ $res = mysql_query(“select * from info”); while($r = mysql_fetch_assoc($res)){ echo ”; } ?>

    I had follow the solution you provided, but still fail.

  • Still the same error 🙁
    cannot get the data from database.
    prepare($sql); $q->execute(array($title)); $q->setFetchMode(PDO::FETCH_BOTH); // fetch while($r = $q->fetch()){ */ $res = mysql_query(“select * from info”); while($r = mysql_fetch_assoc($res)){ echo ”; } ?>

  • Hello sir,

    I downloaded your code…I connected to DataBase. But i getting error when i clicked save buton.
    error is “Unexpected error! Try again”. So please help me to execute that code.I installed PDO library.
    I am new to php code. so please explain through steps, if is there any steps for enable PDO Library.
    Thank you in Advance sir.
    I am waiting to Your response.

    • You have to modify code little bit and and thead, tbody and add below search function

      _this = this;
      // Show only matching TR, hide rest of them
      $.each($(table+" tbody").find("tr"), function() {
      if($(this).text().toLowerCase().indexOf($(_this).val().toLowerCase()) == -1){
      if($(this).attr("id") != "newentry")

  • Hi amit,
    Your codeis really nice.It helped me lot in my project. But for my project i want a functinality that after click on save from child window it display on parent window instead of directly save on database anies d then from parent window save all the entries to database at one time. Please helpme on this.I am very new to php and javascript.

  • hii m sukhbir
    want your help
    my problem is that i have to create a table like below Record of patient which is to be filled weekly
    Patient Name…………… Email abc@gmail.com
    date Weight Kcal BMI AGE
    15/2 50.5 70.7 80.8 30
    22/2 51.2 65.7 80.3 29
    add button submit button
    when i click on add button a row should be add when submit it should to go to email abc@gmail.com
    and next week when to update the old table with all record should be display
    and by clicking add (i can update table and submit on email with new updated weekly on mail)
    Plz mail the code if possible
    Thanks & Regard
    Sukhbir Singh

  • how to use Dynamic combobox-listbox-drop-down using php/mysql?

    what ever data i added in combo box that will be store into database how it is possible please help me..

    • Before loading the page, fetch dropdown options in php and print them all in page as a javascript variable and using jquery pass those values to dropdown list.

  • Hello there,
    I have made changes to the ajax.php page and linked my mysql but when i run index.php i get table with getRecords(); ?> $eachRecord){ ?> what is this problem?

  • Thanks for a wonderful code. Actually I was looking for the same but with jsp and oracle database and I am new to this world. Can you help me out please ? Thanks in advance..

  • Thx for posting this. I set up the basic version of the form modifiying the index.php page to pull fields out of a test database (same field names) and also modifying the ajax.php script to connect to the test database. Am using script.js with no mods. I’m running into 2 problems.

    1) When I add a new user ajax.php executes the call correctly and adds the person to the database; the popup dismisses but the script repeately ads new fields for this new person to the html table, visually and does not quit (to stop it I have to reload the page). I use Firebug in Firefox and looked at the JSON response. To me it looks good:


    2) When I click to Delete an item it is deleted in the database but not visually from the html row. The response is:


    Reloading the page or doing a simple mysql select shows that the changes are working. I can provide snapshots or a link to the page and supporting files including a .txt version of ajax.php if this helps. Any idea?

    • It means operations are going fine but after ajax request completes some js error is causing problem updating client side view. Do you see any js error ?

  • Nothing visually on the screen. Here is a link to the demo and some new info. I was using the jquery.js file from your website. Just to see, I switched to a standard version off google and get different results. The add row now works correctly whereas the Delete row no longer calls the ajax.php file (nothing in Firebug).

    http://www.dottedi.biz/demo/code/add-delete-row/index.php (google jquery)
    http://www.dottedi.biz/demo/code/add-delete-row/index2.php (your jquery)

    • Ok, so there are 2 problems. Script uses jquery ui library for highlight effect (New row keeps adding), Second you are using latest jquery version which doesnt support “live” method, its replaced with “on”, Make changes in js file and replace “live” with “on”.

  • Switching ‘live’ to ‘on’ and using the current google jquery.js got it back to posting to ajax.php and deleting the rows from the database but not visually deleting the row. I don’t know much jQuery; I looked at the file and saw some lines that seemed to be relevant to IE – I commented out those lines and it now works perfectly in Firefox and Chrome.

    // if ( ! $.browser.msie ) {
    // $(“a[id='”+row_id+”‘]”).closest(“tr”).effect(“highlight”, {
    // color: ‘#4BADF5’
    // }, 1000);
    // }

    Someone will need to test in IE to see how it works in IE as well. Thx much.

  • Oops, not quite correctly yet. I found that the first time I went to add a new record it was fine, but after the first record, clicking to add another new record did not bring up the pop up new record screen. So I gambled again and commented out the other 5 lines related to MSIE and this fixed that problem.

    // if ( ! $.browser.msie ) {
    // $(“.table-list tr:last”).effect(“highlight”, {
    // color: ‘#4BADF5’
    // }, 1000);
    // }

    However there is one remaining issue. Delete works with records previously entered. If you change your mind and decide to delete the record you just added nothing happens, no ajax/post request. The JSON response looks to be adding the ID correctly. You must reload the page in order to be able to delete the unwanted new entry. See the index.php URL.

Leave a Comment


Notify me of followup comments via e-mail. You can also subscribe without commenting.


Let your friends know what are you reading

Share this post with your friends!