CODEWITHSUNDEEP
javascripthtmljquerycssbrowser
mattarello
mattarello

Reputation: 229

changing textarea content back to it's starting form by button click

I have a <p id="tag"> which can be edited by users on button click.

Edit button onclick function:

function p_edit() {
        var content= $("#tag").text();
        "now var content is equal to tag's content"
        $("#tag-form2").css("display", "block")
        $("#tag").css("display", "none")
        $(".user-holder4").css("display", "none")
        $("#id_tag").text(content)
        "above the content obtained from the tag is appended to the textarea"
        $(".kokomo-holder2").css("display","block")
        $(".login-button4").css("display","block")
        $(".login-button6").css("display","block")
    }
    "as you can see, the button gets the tag's content and appends it to the textarea of which the id is 'id_tag'"

After the edit button is click the user can either change the text or press the cancel button.

Cancel button onclick function:

function cancel(){
        $(".bilgilendirme-holder2").css("display","none")
        $(".login-button4").css("display","none")
        $(".login-button5").css("display","none")
        $(".login-button6").css("display","none")
        $("#tag-form2").css("display","none")
        $("#tag").css("display","block")
        $(".user-holder4").css("display","block")
        $("#id_tag").text(content)
    }
"this function reverses what was done by the edit function so the <p> tag becomes visible again"

It works perfecly when an edit is done and the edit button is reclicked afterwards.

The problem occures when a user presses edit button, makes changes in text area and then presses cancel. In this case when edit button is reclicked the content of textarea remains the way it was edited by the user while it should be the same content as the content of the <p> tag.

It probably happens because the browser caches textarea content and as long as the appended content is the same as initial content cached by browser the textarea's text remains the way it was changed by the user.

I assigned 'autocomplete="off"' attribute to the textarea but it didn't work.

I wonder if there is a way of getting rid of this problem without removing and recreating the textarea each time the edit button is clicked.

Upvotes: 0

Views: 735

Answers (2)

Negi Rox
Negi Rox

Reputation: 3922

I think your cancel button logic should be something like below.

$(document).ready(function(){
$("#Edit").on('click',EditOrSave);
$("#cancel").on('click',Cancel);


})

function EditOrSave(){
  var btn=$("#Edit");
  if(btn.val()=="Edit")
  {
    window.textContentofP=$("#tag").text();
    $("#editcontent2").show();
    $("#editcontent2").val(window.textContentofP);
    $("#tag").hide();
    $("#cancel").show();
    btn.val("Save");
  }
  else{
    $("#tag").text($("#editcontent2").val());
     $("#editcontent2").hide();
    $("#tag").show();
     $("#cancel").hide();
    btn.val("Edit");
  }
}
function Cancel(){
   $("#tag").text(window.textContentofP);
   $("#editcontent2").hide();
   $("#tag").show();
    $("#cancel").hide();
    $("#Edit").val("Edit");
    $("#cancel").hide()
   
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="tag">Hello How are you</p>
<textarea id="editcontent2" style="display:none;"></textarea>
<input type="button" id="Edit" value="Edit"/>
<input type="button" id="cancel" style="display:none;" value="Cancel" />

Upvotes: 2

RobJarvis
RobJarvis

Reputation: 370

In your p_edit() method, you have this line, which you say assigns text to the textarea:

$("#id_tag").text(content)

However, in your cancel() method, you have this line:

$("#id_etiket2").text("")

Instead of that (or maybe in addition to since I don't know what #id_etiket2 references), try adding $("#id_tag").text(""); to your cancel() method.

Upvotes: 0

Related Questions