skip to Main Content

As a beginner I’m struggling with what seems so simple. I have a disabled textarea and an "Edit" button. Once I click on the button, the textarea becomes editable as I want, but I need the "Edit" to become "Save". Could anybody help please?

$("#editButton").click(function() {
  $("#editButton").html("save");
});
<div class="input-field">
  <textarea disabled id="textarea2" class="materialize-textarea" type="text" data-length="500">.            </textarea>
  <label for="textarea2"></label>
  <a href="#" class="btn-large" id="editButton">Edit</a>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

2

Answers


  1. I’m not sure why you are saying that the textarea becomes editable as you want, as I see nothing in the code you have provided that changes anything about the textarea. As for the text of the button, I would use .text over .html – I would use the latter only if I was adding HTML.

    If you wish for the button to have a toggle effect, you would use:

    $("#editButton").click(function() {
      const isDisabled = !$('#textarea2').prop('disabled');
    
      $('#textarea2').prop('disabled', isDisabled)
      $("#editButton").text(isDisabled ? 'Edit' : 'Save');
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="input-field">
       <textarea disabled id="textarea2" class="materialize-textarea" type="text" data-length="500"></textarea>
       <label for="textarea2"></label>
       <a href="#" class="btn-large" id="editButton">Edit</a>
    </div>
    Login or Signup to reply.
  2. Please try this

    $("#editButton").click(function() {
     if($("#editButton").html()=="Edit"){
      $("#editButton").html("save");
      $("#textarea2").prop("disabled",false);
      }
      else
      {
       $("#editButton").html("Edit");
       $("#textarea2").prop("disabled",true);
      }
    });
    <div class="input-field">
      <textarea disabled id="textarea2" class="materialize-textarea" type="text" data-length="500"></textarea>
      <label for="textarea2"></label>
      <a href="#" class="btn-large" id="editButton">Edit</a>
    </div>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search