Edit data after double click like in phpmyadmin

Question

I have a table and that displays data from a database. I would like to have the users to click on the record that they want to edit and once they have double clicked on it, then have the system update in the database. Just like the tables in phpmyadmin.

How do i go about it?

You should refer like inline edit with php using jquery and what you had tried for that. — Mayank Vadiya, Aug 12 '17 at 10:39
Use javascript to catch the doubleclick-event and replace the text value with an input, bind a onblur event handler on that new input to catch when the user clicks or tabs outside the input and send the new value to the server using AJAX to update the database with the new value. — rickdenhaan, Aug 12 '17 at 10:41

Thanasis1101 · Accepted Answer · 2017-08-16T10:38:08.240

Here is a sample code with the suggestions made by @rickdenhaan using jquery.

// On double click show the input box
$( "#text1" ).dblclick(function() {

  $( "#text1" ).hide();
  $( "#text1_input" ).val($( "#text1" ).html()); // Copies the text of the span to the input box.
  $( "#text1_input" ).show();
  $( "#text1_input" ).focus();
  
});

// What to do when user changes the text of the input
function textChanged(){

  $( "#text1_input" ).hide();
  $( "#text1" ).html($( "#text1_input" ).val()); // Copies the text of the input box to the span.
  $( "#text1" ).show();
      
  // Here update the database
      
}

// On blur and on enter pressed, call the textChanged function
$( "#text1_input" ).blur(textChanged);
$( "#text1_input" ).keypress(function (e) {
 var key = e.which;
 if(key == 13)  // the enter key code
  {
    textChanged();
    return false;  
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span id="text1">Double click me to change me</span>
<Input id="text1_input" style="display:none"/>

For updating the database using javascript see posts like this in Stack Overflow.

In the code above, there is a span with the plain text and a input box for the user to change the text.

The input box is invisible at the beggining (style="display:none"). When the user double clicks the span ($( "#text1" ).dblclick(function() {...});) then the span disappears ($( "#text1" ).hide();) and the input box appears ($( "#text1_input" ).show();) with the content of the span bying copied to the input box for the user to be able to change it.

When the user presses the enter ($( "#text1_input" ).keypress(function (e) {...});) or clicks somewhere outside the input box ($( "#text1_input" ).blur(textChanged);) then the input box dissapears and the span reappears but now having the edited text of the input box.

I hope this was helpful. If you wanted somthing more or something else please let me know.

Edit data after double click like in phpmyadmin

1 Answers1