How to replace an element by textarea using javascript

Question

What I am making is basically is a user profile that has a text box for description added by the user about himself/herself. Although I have a separate page where the user can edit the profile, but I want to provide a feature that when a user hovers over his description box then he sees an edit button.

If the user clicks that button, then he/she can edit the description field there itself, and the backend will be updated using Ajax. The ajax call and the backend processing is simple, but how can I replace the html with a textarea and submit button and again put back the original html using javascript.

Here is what my html look like

<div id="personalText" >
    <a href="#" id="editButton"> edit </a>
    <p id="descText">{{profile.desc}}</p>
</div>

When somebody clicks editButton I want to replace the html inside personalText with a textarea containing the original text in descText, and an update button. And when the user edits the text and click update, I will update the backend model and again put the <a> tag and the <p> tag.

Can anybody help. I seem to know how to do parts of it, but can't figure out how I will replace the original structure on update click.

Mark Coleman · Accepted Answer · 2011-12-29 19:41:09Z

2

Instead of creating/destroying DOM elements an option would be to have the edit <textarea/> hidden.

<div id="personalText" >
    <div class="display">
        <a href="#" id="editButton">edit</a>
        <p id="descText">{{profile.desc}}</p>
    </div>
    <div class="edit" style="display:none;">
        <input type="submit" value="Update"/>
        <textarea>{{profile.desc}}</textarea>
    </div>
</div>

Then your jQuery can simply toggle the elements and handle your ajax post.

$("input[type='submit']").on("click", function() {
    $.ajax({
        url:"/your/url/"
    }).success(function(){
        $(".display, .edit").toggle();
        $("#descText").html($("textarea").val());
    });
    return false;
});

Example on jsfiddle

edited Dec 29, 2011 at 19:41

answered Dec 29, 2011 at 19:21

Mark Coleman

40.9k9 gold badges84 silver badges101 bronze badges

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

3 Comments

Sachin Over a year ago

Thanks alot for the solution, I never though of toggle and it seems to be much better solution.

Sachin Over a year ago

There seems to be some problem with the js you have given, it is working fine on jsfiddle but when I run on development server the $("#editButton").on("click", function() is being fired twice as a result the whole thing toggles twice and the display remains the same. How I know this is happening is that I put an alert() call inside the function and the pop up came up twice.

Sachin Over a year ago

When I remove the javasrcipt for the input button then the $("#editButton") js is being fired only once, but now the text area is not showing the text that it should. Although if I see the content of the textarea using alert then the text is there, but it is not being displayed

Bassam Mehanni · Accepted Answer · 2011-12-29 19:09:01Z

1

$('#editButton').click(function(){
  var text = $('descText').text();
  var textArea = $('<textarea></textarea>');
  textArea.value = text;
  $('#personalText').replaceWith(textArea);
});

answered Dec 29, 2011 at 19:09

Bassam Mehanni

14.9k2 gold badges35 silver badges41 bronze badges

Collectives™ on Stack Overflow

How to replace an element by textarea using javascript

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related