CODEWITHSUNDEEP
javascript
pratski
pratski

Reputation: 1488

How to use javascript to edit HTML content?

I have a section in my website where a user can type an answer to a Question. For example the questions states:

Movie I have watched the most times: Answer: Wedding Crashers

I have an edit button next to the question. When the user clicks on the edit button I want the website to open up a text-box with Wedding Crashers in it in the same place as the original answer box. The user can edit the answer and change it to another movie. There should be a save and cancel button below the text-box. Once the user changes the answer from Wedding Crashers to another movie and clicks save, the text-box disappears and the new answer is displayed on the website. For now I only want to be able to edit the hard-coated HTML content. I will connect to a database later and put a query to update the users database as per his/her answer. I think it is something to do with javascript and the CSS properties of display:block and display:hide. Can anybody help?

Upvotes: 1

Views: 1692

Answers (4)

Nick Ginanto
Nick Ginanto

Reputation: 32190

Seeing you other question relate to Rails, you can use an edit-in-place solution such as

https://github.com/bernat/best_in_place

is that what you need?

Upvotes: 2

op1ekun
op1ekun

Reputation: 1928

Whoa! Clicking edit button sounds like 1999 for me ...

Did You consider using plain text input (with proper styling, no border etc.) that will appear as editable on hover/focus? You still need a bit of javascript to send a request on enter (AJAX for better UX or normal POST when js is disabled) and remove focus from the field. I do it this way at my work. It works really well.

Upvotes: 1

Osiris
Osiris

Reputation: 4185

Is the textbox absolutely necessary?

You can use the wonder of HTML5 (http://html5demos.com/contenteditable) for browsers that support it.

Upvotes: 0

mfadel
mfadel

Reputation: 897

you can use something like this:

document.getElementById('someid').innerHTML = 'Fred Flinstone';

and for changing CSS properties: 

document.getElementById('someid').style.borderWidth = '4px';

Upvotes: 0

Related Questions