CODEWITHSUNDEEP
jquery
user2818430
user2818430

Reputation: 6029

jQuery - show edit textarea form when link is clicked and hide paragraph

I have a bunch of items listed on a page. Each item has an Edit link.

When user clicks it I want to hide the paragraph and show the form with the textarea containing the text. By default the form is hidden and shown to user when the Edit link is clicked only. How can I show toggle the form with the paragraph?

Something like this:

enter image description here

Here is some quick code about this:

<div>
   <p id="message">The quick fox stuff</p>

   <form id="editForm" style="display: none;">
         <textarea rows="2" id="editMessage" /></textarea>
         <input type="submit" value="Save"></input>
   </form>

   <a href="#">Edit Link</a>
</div>

Upvotes: 1

Views: 2813

Answers (4)

Relm
Relm

Reputation: 8290

I guess you will have to create the "edit form" as a template or go with contentEditable

if you go with the "Edit Form" as a template;

<span style="display:none;" id="editForm_template">
<form action="control.php" method="post">
<textarea class="templateTextarea"></textarea>
</form>
</span>

With Jquery

<script>
$(document).ready(function(e){
    ////////Make the edit button as a class.
    $(document).on('click', '.editButton', function(){
        //Get the parent of both the edit button and the paragraph
        var parent = $(this).parent('.parentOfBoth');
        var editFormTemplate = $('#editForm_template').html();
        var currentTextInParagraph = $(parent).find('.paragraphTobeEditted');
        $('.templateTextarea').val(currentTextInParagraph);
        $(parent).slideUp('fast',function(){
            // Append the template after the parent of both the paragraph and edit button have been hidden (slideUp)
            $(parent).after(editFormTemplate);
            });
    });
});
</script>

In HTML5 any element can be editable 

<!DOCTYPE html>
<html>
  <body>
    <div contentEditable="true">
      This text can be edited by the user.
    </div>
  </body>
</html>

Upvotes: 0

Dhiraj
Dhiraj

Reputation: 33628

Since there are many items like these please use classes and not IDs as ID should be unique.

Use .closest() or .parent() to get the parent div. Using the parent find the p.message and form.editform.

Something like this should do.

$('a.edit-link').on('click', function(e){ // 
  e.preventDefault();
  var $parent = $(this).closest('div'); // or var $parent = $(this).parent();
  $parent.find('p.message').hide(); // use slide methods fancy show/hide are required
  $parent.find('form.editForm').show();
  // Not sure but you'd want to hide <a href="#">Edit link </a> after clicking
  // in that case use the below
  // $(this).hide();
});

The structure would look something like this 

<div>
   <p class="message">The quick fox stuff</p>

   <form class="editForm" style="display: none;">
         <textarea rows="2" id="editMessage" /></textarea>
         <input type="submit" value="Save"></input>
   </form>

   <a href="#" class="edit-link">Edit Link</a>
</div>

A Simple demo http://jsbin.com/nurixo/edit?js,output

Upvotes: 3

Ash
Ash

Reputation: 2108

Here is one possible solution:

CSS:

#editForm { display:none; }

JS:

$( document ).ready(function() {
    $('a').click(function() {
        var div = $(this).parent('div');
        div.find('p').toggle();
        div.find('form').toggle();
    });
});

Demo here : http://jsfiddle.net/oj7o6p96/

Hope it helps.

Upvotes: 0

Malik Naik
Malik Naik

Reputation: 1502

Try this..

HTML

<div>
   <p id="message">The quick fox stuff</p>

   <form id="editForm">
         <textarea rows="2" id="editMessage" /></textarea>
         <input type="submit" value="Save" onclick="saveMsg(event);"></input>
   </form>

   <a href="javascript:editLink();">Edit Link</a>
</div>

CSS

#editForm{
    display: none;
}

Pure Javascript

function editLink(){
    document.getElementById("editForm").style.display = "block";
    document.getElementById("message").style.display = "none";
    var message = document.getElementById("message").innerHTML;
    document.getElementById("editMessage").value = message;
}
function saveMsg(e){
    e.preventDefault();
    document.getElementById("editForm").style.display = "none";
    document.getElementById("message").style.display = "block";
}

Check out this Fiddle

Upvotes: 0

Related Questions