How do I save data in a textarea using preventDefault by using an event listener in jQuery?

Question

pretty new here so apologies for all the questions. I'm making a scheduler that saves notes for different time brackets using jQuery and I'm at a snag where I'm unable to figure out how to have the button save data from a different element.

Sample of the HTML

        <div id="17" class="times row time-block future">
          <div class="col-2 col-md-1 hour text-center py-3">5PM</div>
          <textarea class="col-8 col-md-10 description" rows="3"> </textarea>
          <button class="btn saveBtn col-2 col-md-1" aria-label="save">
            <i class="fas fa-save" aria-hidden="true"></i>
          </button>
        </div>

The JavaScript code I've been working on.

    $(".saveBtn").on("click", function() {
      var getId = $(this).parent().attr("id");
      var getText = $(this).siblings(".description").val();
      localStorage.setItem(getId, getText);
      console.log(getId, getText)
      preventDefault($(this).siblings(".description").val());
    });

I'm looking to have preventDefault keep the text input in the textarea but unsure how to do that. I'm looking to have it save/still show the information on refresh. Thank you!

I'm still new so I'm still learning how everything works together. Thank you very much!

Answer 1

preventDefault is a method of the event, in your code you should use:

$(".saveBtn").on("click", function(event) {
  ...
  event.preventDefault($(this).siblings(".description").val());
})

(link to docs)

$(".saveBtn").on("click", function(event) {
  var getId = $(this).parent().attr("id");
  var getText = $(this).siblings(".description").val();
  //localStorage.setItem(getId, getText);
  console.log(getId, getText)
  event.preventDefault($(this).siblings(".description").val());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="17" class="times row time-block future">
  <div class="col-2 col-md-1 hour text-center py-3">5PM</div>
  <textarea class="col-8 col-md-10 description" rows="3"> </textarea>
  <button class="btn saveBtn col-2 col-md-1" aria-label="save">
            <i class="fas fa-save" aria-hidden="true"></i>
          </button>
</div>