Saving the input in the table using JS

Question

I want my table to actually "save" the input (the input dialog box should disappear and the new value should take place of the old value - of course until the next reload). Now it stays in the dialog box after the click out.

How to fix it?

function edit_description() {
  var targetDescription = $("#description-1");
  var value = targetDescription.text();

  if (value != "") {
    value = ""
  };

  targetDescription.html(`<input class="description form-control" data-target="description-1" type="text" value=${value}>`);

  $("input:text").focus();

  $("input").blur(function(e) {
    e.preventDefault();
    var target = targetDescription.attr("data-target");
    $(`#${target}`).text($(this).val());
    var description = $(this).val();
    save_description(identification = "description-1", description);
  });
};

function save_description(identification, description) {
  console.log('Saved!');

  var userInput = {
    "identification": identification,
    "description": description
  };
};

a[role="button"][onclick] {
    color: blue;
    cursor: pointer;
    text-decoration: underline;
}

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

<div class="table-wrapper">
  <table id="table" class="table table-striped">
    <thead>
      <tr>
        <th scope="col"><span>Edit</span></th>
        <th scope="col"><span>Description</span></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td id="edit-1"><a class="btn" role="button" onclick="edit_description();">Edit ></a></td>
        <td id="description-1">Lorem</td>
      </tr>
    </tbody>
  </table>
</div>

Part of the problem is you're not generating new HTML correctly: by using .html( ) with an interpolated string without even attribute-delimiting quotes means you won't generate valid output HTML. — Dai
– Dai, Commented Jul 5, 2022 at 6:51

Hai Nguyen · Accepted Answer · 2022-07-05 08:14:35Z

1

You get wrong variable var target = .... There is a <input> tag in targetDescription, this <input> has attribute data-target. So try this. In stead of:

var target = targetDescription.attr("data-target");

Let try:

var target = targetDescription.children('input').attr("data-target");

answered Jul 5, 2022 at 8:14

Hai Nguyen

1212 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Saving the input in the table using JS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related