Live Edit in Select Field using JavaScript and PHP

[bagwis]

If you are looking for Live Edit in Select Field using JavaScript and PHP then you are at the right place. Today, the live edit is very trending in web development. To implement this program, we are going to use jQuery, Ajax, and PHP.

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

Creating our Database table

1. CREATE
   
   TABLE
   
   `live`
   
   (
   
2. `id`
   
   INT
   
   (
   
   1
   
   )
   
   NOT
   
   NULL
   
   ,
   
3. `user_name`
   
   VARCHAR
   
   (
   
   100
   
   )
   
   NOT
   
   NULL
   
   ,
   
4. `status`
   
   enum(
   
   'active'
   
   ,
   
   'inactive'
   
   )
   
   NOT
   
   NULL
   
   DEFAULT
   
   'inactive'
   
5. )
   
   ENGINE=
   
   InnoDB DEFAULT
   
   CHARSET=
   
   latin1;
   

Now, lets us insert a few data user name to the table.

1. INSERT
   
   INTO
   
   `live`
   
   (
   
   `id`
   
   ,
   
   `user_name`
   
   ,
   
   `status`
   
   )
   
   VALUES
   
2. (
   
   1
   
   ,
   
   'Avenger'
   
   ,
   
   'inactive'
   
   )
   
   ,
   
3. (
   
   2
   
   ,
   
   'Arrow Assasin'
   
   ,
   
   'active'
   
   )
   
   ,
   
4. (
   
   3
   
   ,
   
   'Blaze'
   
   ,
   
   'inactive'
   
   )
   
   ,
   
5. (
   
   4
   
   ,
   
   'Bodhi'
   
   ,
   
   'inactive'
   
   )
   
   ,
   
6. (
   
   5
   
   ,
   
   'Captain'
   
   ,
   
   'inactive'
   
   )
   
   ,
   
7. (
   
   6
   
   ,
   
   'Cyborg'
   
   ,
   
   'inactive'
   
   )
   
   ;
   

Creating Markup

Kindly copy and paste this source code to your BODY tag of your page.

1. <div
   
   class
   
   =
   
   "container"
   
   >
   
2. <div
   
   style
   
   =
   
   "text-align:center;width:100%;font-size:24px;margin-bottom:20px;color: #2875BB;"
   
   >
   
   Choose a User Name to Activate...</
   
   div
   
   >
   
3. <div
   
   class
   
   =
   
   "row"
   
   >
   
4. <a
   
   id
   
   =
   
   "user_name"
   
   data-type
   
   =
   
   "select"
   
   data-title
   
   =
   
   "User Name"
   
   ><?php echo $fetch[
   
   'user_name'
   
   ]
   
   ; ?></
   
   a
   
   >
   
5. </
   
   div
   
   >
   
6. </
   
   div
   
   >
   

Script Source Code

1. Fetch username to display data in the select field.
   
2. Update username when the user confirms it.
   

Kindly copy and paste this script end of your BODY tag of your page.

1. <
   
   script>
   
2. $(
   
   function
   
   (
   
   )
   
   {
   
3. $(
   
   '#user_name'
   
   )
   
   .editable
   
   (
   
   {
   
4. source:
   
   'process.php'
   
   ,
   
5. send:
   
   'always'
   
   ,
   
6. url:
   
   'update.php'
   
   ,
   
7. success:
   
   function
   
   (
   
   response)
   
   {
   
8. if
   
   (
   
   response.status
   
   ==
   
   'error'
   
   )
   
   {
   
9. return
   
   false
   
   ;
   
10. }
    
11. }
    
    ,
    
12. error:
    
    function
    
    (
    
    e)
    
    {
    
13. console.log
    
    (
    
    e.responseText
    
    )
    
    ;
    
14. }
    
15. }
    
    )
    
    ;
    
16. }
    
    )
    
    ;
    
17. </
    
    script>
    

PHP Source Code

Let's create our database connection.

1. <?php
   
2. error_reporting
   
   (
   
   0
   
   )
   
   ;
   
3. error_reporting
   
   (
   
   E_ERROR
   
   |
   
   E_WARNING
   
   |
   
   E_PARSE
   
   )
   
   ;
   
4. 
   
5. $con
   
   =
   
   mysql_connect
   
   (
   
   'localhost'
   
   ,
   
   'root'
   
   ,
   
   ''
   
   )
   
   ;
   
6. $db
   
   =
   
   mysql_select_db
   
   (
   
   'test_select'
   
   ,
   
   $con
   
   )
   
   ;
   
7. ?>
   

This PHP source code used to fetch all username data available in our database. Save it as process.php.

1. <?php
   
2. include
   
   (
   
   'config.php'
   
   )
   
   ;
   
3. $query
   
   =
   
   mysql_query
   
   (
   
   'SELECT * FROM live'
   
   )
   
   ;
   
4. 
   
5. while
   
   (
   
   $fetch
   
   =
   
   mysql_fetch_array
   
   (
   
   $query
   
   )
   
   )
   
   {
   
6. $result
   
   [
   
   ]
   
   =
   
   [
   
   'value'
   
   =>
   
   $fetch
   
   [
   
   'id'
   
   ]
   
   ,
   
   'text'
   
   =>
   
   $fetch
   
   [
   
   'user_name'
   
   ]
   
   ]
   
   ;
   
7. }
   
8. 
   
9. echo
   
   json_encode
   
   (
   
   $result
   
   )
   
   ;
   
10. ?>
    

Save this source code as update.php. Used this source code to update data.

1. <?php
   
2. include
   
   (
   
   'config.php'
   
   )
   
   ;
   
3. $id
   
   =
   
   $_POST
   
   [
   
   'value'
   
   ]
   
   ;
   
4. 
   
5. $revert
   
   =
   
   mysql_query
   
   (
   
   "update live set status='inactive'"
   
   )
   
   ;
   
6. $update
   
   =
   
   mysql_query
   
   (
   
   "update live set status='active' where id='$id
   
   '"
   
   )
   
   ;
   
7. 
   
8. if
   
   (
   
   $update
   
   )
   
   {
   
9. echo
   
   json_encode
   
   (
   
   [
   
   'status'
   
   =>
   
   'success'
   
   ]
   
   )
   
   ;
   
10. }
    
    else
    
    {
    
11. echo
    
    json_encode
    
    (
    
    [
    
    'status'
    
    =>
    
    'error'
    
    ,
    
    'data'
    
    =>
    
    mysql_error
    
    (
    
    )
    
    ]
    
    )
    
    ;
    
12. }
    
13. 
    
14. ?>
    

Result

⚙ Live Demo

That’s it! You are ready to test the simple project. Any suggestions will be really appreciated.

Hope that this tutorial will help you a lot.

Kindly click the "Download Code" button below for full source code. Thank you very much.

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