Question 10711 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Change button text (html) after clicking with Jquery

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>
Tags:

2

Answers


  1. 0

    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. 0

    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