HTML5 Inline Edit with PHP, MySQL and jQuery Ajax

Now a days,we all are trying to make a better and comfortable web applications.So in this post i will tell about HTML5 Inline Editor or In-Place editing using PHP,jQuery Ajax and MySQL.When we wants to update our profile on facebook we don’t want to go on another page/form we wants inline Editing.

View DemoDownload

HTML5 had introduced an attribute called contenteditable through which we can edit our content in line. It’s take care of inline editing and we will use few lines of jQuery code to send data to server,so we can save it.Biggest advantage of contenteditable attribute is that we don’t need to create hidden field and toogle field and it reduces our html code.
Contenteditable attribute is available almost in every element.Simply adding this attribute turns any element into an editable field.

HTML Code

You can use it in HTML Table,content,and elsewhere.(Use your creative brain)
I am creating an Inline HTML table editor.

                <table class="table">
                    <thead>
                    <tr>
                        <td>ID</td>
                        <td>First Name</td>
                        <td>Last Name</td>
                        <td>Username</td>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>1</td>
                        <td contenteditable="true" id="fname:1">Shubham</td>
                        <td contenteditable="true" id="lname:1">Kumar</td>
                        <td contenteditable="true" id="uname:1">shubhammct</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td contenteditable="true" id="fname:2">Shyam</td>
                        <td contenteditable="true" id="lname:2">Srivastava</td>
                        <td contenteditable="true" id="uname:2">srishyam</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td contenteditable="true" id="fname:3">Ram</td>
                        <td contenteditable="true" id="lname:3">Kinkar</td>
                        <td contenteditable="true" id="uname:3">ramkin</td>
                    </tr>
                    </tbody>
                </table>

Take a look at fname:1 Where fname is field name and 1 is ID.

jQuery Code

Here is the jQuery code which we will use to send new value to server.

        $(document).ready(function(){
           $("td[contenteditable=true]").blur(function(){
               var msg = $(".alert");
               var newvalue = $(this).text();
               var field = $(this).attr("id");
               $.post("update.php",field+"="+newvalue,function(d){
                   var data = JSON.parse(d);
                   msg.removeClass("hide");
                    if(data.status == '200'){
                        msg.addClass("alert-success").removeClass("alert-danger");
                    }else{
                        msg.addClass("alert-danger").removeClass("alert-success");
                    }
                   msg.text(data.response);
                   setTimeout(function(){msg.addClass("hide");},3000);//It will add hide class after 3 seconds
               });
           });
        });

PHP Code

Add the following code to your update.php file.

$response = NULL;
$status = http_response_code(406);
if(!empty($_POST)){
    include "config.php"; //Including Database Settings
    foreach($_POST as $key=>$value){
        $key = strip_tags(trim($key));
        $value = strip_tags(trim($value));
        $explode = explode(":",$key);
        $user_id = $explode[1];
        $field_name = $explode[0];
        if(isset($user_id)){
            $update = mysql_query("UPDATE users SET $field_name='{$value}' WHERE id='$user_id'"); //Update the users Table
            if($update){
                $response = "User Details Updated";
                http_response_code(200); //Setting HTTP Code to 200 i.e OK
            }else{
                $response = "Not Modified";
                http_response_code(304); //Setting HTTP Code to 304 i.e Not Modified
            }
        }else{
            $response = "Not Acceptable";
        }
    }
}
echo json_encode(array(
    "status"=>$status,
    "response"=>$response
));

View DemoDownload

Please Don’t forget to share and subscribe to latest updates of blog posts.

[moptin id="3100"]

Shubham Kumar

Hey, I am Shubham and i love Blogging, Coding and exploring new things and obviously sharing my experience with you.

You may also like...

97 Responses

  1. tom says:

    hi i need the link to download the download link do not work

  2. haizad says:

    Hi. 🙂
    Can you please give me the link?

    Thank you

  3. tor says:

    Hi, Can you send download link of “HTML5 Inline Edit with PHP, MySQL and jQuery Ajax”? please…:)

  4. lilg says:

    Hi, Can you send download link of “HTML5 Inline Edit with PHP, MySQL and jQuery Ajax”? please…:)

  5. trungnld says:

    Hi,

    Could you please send me the files?

    Thanks a lot!

    Regards,

  6. kusem says:

    Send me link, please. Download system after subscribing doesnt work 🙁

  7. Manuel Robles says:

    I cant download the code, could you send me the code to my email?:

    Thankyou.

  8. dibsiss says:

    Hi get script can not get it to work. Could you please send me a link to dowwn load the demo Thanks
    jon

  9. Matt says:

    Can you send me files?

  10. Mike says:

    I need the link to download. Also, I have to scroll pass 74 other replys to get to the Leave A Reply box. Move the Reply box up to the top.

    Thanks.

  11. aramjo says:

    Hi, Can you send download link of “HTML5 Inline Edit with PHP, MySQL and jQuery Ajax”?

  12. Susan says:

    Very nice article and code, thank you for sharing.

    I need something that will write to local file/database without using mySQL (something like flatfile). Do you have any such tutorial or know good code to accomplish this?

    Thanks again!

    Susan

  13. TOMahawk says:

    Shubham, can you please send me the source code HTML5 Inline Edit with PHP, MySQL and jQuery Ajax

    Thank you.

  14. Jonas says:

    Hi,

    Could you please send me the files?

    Thanks a lot!

    Regards,

    Jonas

  15. andri says:

    subham please i need source code HTML5 Inline Edit with PHP, MySQL and jQuery Ajax 🙁

  16. David says:

    Hi can you email me the link to download please?

  17. sali says:

    Hi would you send me the link please

  18. Ramadan says:

    hey man thank for this post
    please contact me via e mail , i would like to get your paid help for my project
    thanks

  19. Indra says:

    hi Shubham..
    I tried your code, but somehow it doesn’t work on my project…
    I understand PHP good enough, but I have some difficulties in understanding javasript, so could u provide me your email, so that I could send you my code so that you could review and notice where’s my fault in using your code..?

    thanks

    Indra

  20. Lonestar Jack says:

    Please send link……..Thank you
    (Seems too easy).

  21. Krystian says:

    Hello, Can you send download link?

  22. Hi,

    Your inline edit with HTML5-MYSQL-PHP-JQuery-AJAX is what I am looking for. Hopefully, I could get the link in order for me to download and try your sample. Thank you for sharing.

  23. Artangel says:

    hi can you please give the link to download pls.. thanks

  24. jon says:

    Hi get script can not get it to work. Could you please send me a link to dowwn load the demo Thanks
    jon

  25. John says:

    Hello,
    Thanks for the tutorial.

    Every major thing is working but I have a question.
    I styled alert-success and alert-danger classes, but it seems although the changes are saved to the DB successfully the script adds alert-danger class instead of success. Is this the way it is design to do?
    Basically it shows the “Success” message but adds the “danger” class.

    Is there any way to mimic an error and bring up the “Not modified” message for testing purposes?

    One more thing – would be nice if the script wouldnt run the update.php if no changes are made to the editable td. Now it updates and shows the success message even if I accidentally click on some td and off of it.

    P.S. You should update the “update.php” to use mysqli instead of mysql – its not working without modifications. Might be confusing for some people with little knowledge.

    • Hey JOHN,

      First of all I would like to thank you for your recommendations.
      Please provide me the code so I can try to fix the error.

      And here is the code that will not modify mysql if no changes have done.

      
      $response = NULL;
      $status = http_response_code(406);
      if(!empty($_POST)){
          include "config.php"; //Including Database Settings
          foreach($_POST as $key=>$value){
              $key = strip_tags(trim($key));
              $value = strip_tags(trim($value));
              $explode = explode(":",$key);
              $user_id = $explode[1];
              $field_name = $explode[0];
              if(isset($user_id)){
                  $update = false;
                  $selectData = mysqli_query($connection,"SELECT $field_name FROM users WHERE id='$user_id'"); //Selecting data from MySql
                  $result = mysqli_fetch_assoc($selectData); //Fetching Data
                  if($result[$field_name]!==$value){ //Checking if the Value is modified
                      $update = mysqli_query($connection,"UPDATE users SET $field_name='{$value}' WHERE id='$user_id'"); //Updating MySQL if value is Modified
                  }
                  //Update the users Table
                  if($update){
                      $response = "User Details Updated";
                      http_response_code(200); //Setting HTTP Code to 200 i.e OK
                  }else{
                      $response = "Not Modified";
                      http_response_code(304); //Setting HTTP Code to 304 i.e Not Modified
                  }
              }else{
                  $response = "Not Acceptable";
              }
          }
      }
      echo json_encode(array(
          "status"=>$status,
          "response"=>$response
      ));
      

      And Yes you have to also update your config.php file as I used mysqli instead of mysql.

      $connection = mysqli_connect("localhost","username","password","database");
      

      Read How to use MySQLi connect in PHP article to know more about MySQLi.

      I hope it will help you.

      Best Regards,
      Shubham

      • John says:

        Thanks for the code, seems to work without saving if no change is made!

        This is the JS from the end of the page:

        $(document).ready(function(){
        $("td[contenteditable=true]").blur(function(){
        var msg = $(".alert");
        var newvalue = $(this).text();
        var field = $(this).attr("id");
        $.post("update.php",field+"="+newvalue,function(d){
        var data = jQuery.parseJSON(d);
        msg.fadeIn("slow");
        if(data.status == 200){
        msg.addClass("alert-success").removeClass("alert-danger");
        }else{
        msg.addClass("alert-danger").removeClass("alert-success");
        }
        msg.text(data.response);
        setTimeout(function(){msg.fadeOut("slow");},3000);//It will add hide class after 3 seconds
        });
        });
        });

        And CSS:

        .alert {
        padding: 2px;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        color: #fff;
        font-weight: bold;
        }

        .alert-success {background: #dff0d8; color: red;}
        .alert-danger {background: #bce5ac; color: #fff; font-size: 10px; padding-left: 10px;}

        Update.php now is the one you posted.

        • Shubham Kumar says:

          Is it working correct now? If no, then open the developers console panel (press F12 key) and which class is adding on the element. If it’s working correctly then I think there is problem in the CSS , so please correct that.

          Cheers,
          Shubham

  26. Jhones says:

    Me envia o link .
    Obrigado!

  27. Hamid says:

    can you send me link ? thank you

  28. Jasir says:

    Please send me the download link

  29. Allen says:

    Hi can I also get the link to download. This article will really help me.

  30. Marcos says:

    Hello,

    Congrats for the post!

    Can you please send the above files by e-mail or any link to download?

    Greetings from Brazil.

    Kind regards,

    Marcos

  31. madgizmo says:

    Can you please provide me with the download link ?
    greeting madgizmo

  32. rashid says:

    please send me download link. thankyou

  33. Akshay says:

    Sir
    Please send a link to download the code.

  34. Lonestar says:

    Please send link

  35. guido says:

    Hi ,
    can you please give the link to download

  36. devi says:

    can you please send me the files.

  37. abubakar says:

    I need link to download this please.

  38. Gabriel says:

    Kindly send me a link for download

  39. julio says:

    Please send a download link

  40. NEET says:

    Please send a download link

  41. ili says:

    Hey, send me one to.
    Dont like offers…

  42. SONY says:

    cOOL.. can you please give the link to download

  43. yateendr says:

    send me to

  44. Mohamed Sami Kerboute says:

    hey ,
    can you please give the link to download

Leave a Reply

Your email address will not be published. Required fields are marked *

shares