Editing information from a MYSQL database from website frontend.

I wonder is someone can help, I'm building a website, which is driven from a database. It will consist of user submitted information.

Currently all the information is pulled from a record in the database and is being output 开发者_如何学Govia a PHP echo, what i would like too do is add a feature that would allow me to edit the information if incorrect from the websites front end.

I have seen many websites have some form of edit icon next to information in there databases, when clicking this icon the echoed text changes from text to a text field and you are able to update the field being echoed from the database.

Im a designer so have limited knowledge of how functionality for this kinda feature might work.

please could anyone let me know how something like this might be achieved.

many thanks.

You would need to build some kind of javascript functionality to allow the in-place editing of those data bits. One possible solution is a jQuery plugin like jEditable.

Then you need to build a server-side script in something like PHP or ruby where it would take the submitted information and update the database.

well the process is the same for the front-end and back-end. it depends whether you want you build a password protected editable forms or just editable for everyone.

One way you can do this is

• echo your information into text inputs
• give them a css class that removes the border and makes it transparent
• make it readonly(so someone couldnt tab into it and change it)
• add a javascript onclick event that changes the class to a normal
  text box that is not readonly
• add a javascript onchange event that uses ajax to save the new
  information into the database when they are done typing, or press enter
• after the ajax is done turn the text box back to the first css class

EDIT also add a onblur event that changes it back as well

you could even change the cursor for the text input to a pointer instead of the default (text) cursor so that is looks like you can click on it.

.

now html5 has contenteditable attribute which you can set for elements simple example: www.hongkiat.com/blog/html5-editable-content/

simpler demo:

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_global_contenteditable