1

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?

Improve this question
2
  • 4
    Erm, what have you tried so far? Show us some of your code, and tell us where is your problem? Commented Nov 29, 2012 at 8:33
  • Sorry I don't have much to share. I have just started to build the html wireframe. There is dating website called howaboutwe.com which lets you edit your profile on the fly. I like their functionality. Commented Nov 29, 2012 at 10:46

4 Answers 4

Reset to default
2

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?

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

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.

Improve this answer

3 Comments

The issue with that approach is that I don't want the textbox / textfield to take up unnecessary space on the page. The movie question above has a one line answer so a textbox in that case would suffice. But let's say I have a question asking the user to provide their life history.If I put a large text field there and the user doesnt answer the question would the text field take up unnecessary space? Sorry if I sound like an idiot. I am a beginner to all this.
Usually idiots don't ask questions :) My understanding is that You want something I call "edit in place" functionality. If You use proper CSS You don't have to worry about your fields taking too much space. For example If You need user to "provide thier life" use textarea.
However You will need js to automatically resize textarea depending of it's content (there are plenty of solutions for that here on stack).
0

you can use something like this:

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

and for changing CSS properties: 

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

Comments

0

Is the textbox absolutely necessary?

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

Improve this answer

1 Comment

Thanks, this is pretty awesome. I just got to figure out compatibility issues. Thanks for your response!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.