PHP Inline Adding Data using jQuery AJAX

[labestia2213]

In this tutorial, we are going to learn about PHP Inline Adding Data using jQuery AJAX. In the previous tutorial, we created Add Edit Delete Comment using jQuery AJAX show and/or hide. This simple tutorial, we are going to perform the Add function. This kind of simple tutorial suited for the beginners who want to learn to add function in inline form.

You can also check the live demo of this simple tutorial, so you can get an idea and you can try this out, let's start coding.


⚙ Live Demo



Create HTML Content

This simple source code shows the simple content that we have where the user can add data in the inline form.

1. <table
   
   class
   
   =
   
   "tbl-qa"
   
   >
   
2. <thead
   
   >
   
3. <tr
   
   >
   
4. <th
   
   class
   
   =
   
   "table-header"
   
   >
   
   Product Name</
   
   th
   
   >
   
5. <th
   
   class
   
   =
   
   "table-header"
   
   >
   
   Product Quantity</
   
   th
   
   >
   
6. <th
   
   class
   
   =
   
   "table-header"
   
   >
   
   Action</
   
   th
   
   >
   
7. </
   
   tr
   
   >
   
8. </
   
   thead
   
   >
   
9. <tbody
   
   id
   
   =
   
   "table-body"
   
   >
   
10. <?php
    
11. if(
    
    !empty(
    
    $row_product)
    
    )
    
    {
    
12. foreach(
    
    $row_product as $k=
    
    >
    
    $v) {
    
13. ?>
    
14. <tr
    
    class
    
    =
    
    "table-row"
    
    id
    
    =
    
    "table-row-<?php echo $row_product[$k]["
    
    id
    
    "]; ?>
    
    ">
    
15. <td
    
    contenteditable=
    
    "true"
    
    onBlur
    
    =
    
    "saveToDatabase(this,'product_name','<?php echo $row_product[$k]["
    
    id
    
    "]; ?>
    
    ')" onClick="editRow(this);">
    
16. <?php echo $row_product[
    
    $k]
    
    [
    
    "product_name"
    
    ]
    
    ; ?>
    
17. </
    
    td
    
    >
    
18. <td
    
    contenteditable=
    
    "true"
    
    onBlur
    
    =
    
    "saveToDatabase(this,'product_qty','<?php echo $row_product[$k]["
    
    id
    
    "]; ?>
    
    ')" onClick="editRow(this);">
    
19. <?php echo $row_product[
    
    $k]
    
    [
    
    "product_qty"
    
    ]
    
    ; ?>
    
20. </
    
    td
    
    >
    
21. <td
    
    >
    
22. <a
    
    class
    
    =
    
    "ajax-action-links"
    
    onclick
    
    =
    
    "deleteRecord(<?php echo $row_product[$k]["
    
    id
    
    "]; ?>
    
    );">
    
23. Delete
    
24. </
    
    a
    
    >
    
25. </
    
    td
    
    >
    
26. </
    
    tr
    
    >
    
27. <?php
    
28. }
    
29. }
    
30. ?>
    
31. </
    
    tbody
    
    >
    
32. </
    
    table
    
    >
    
33. <div
    
    class
    
    =
    
    "add-data-style"
    
    id
    
    =
    
    "add-more"
    
    onClick
    
    =
    
    "createNew();"
    
    >
    
    Add More</
    
    div
    
    >
    

Output

⚙ Live Demo



For the full source code, kindly click the "Download Code" button below.

If you try all the examples, you will learn a lot about PHP, in a very short time!

Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.

Download