javascript - 对所有条目使用一种模式 javascript

Question

我正在尝试发送我们选择在表单操作中编辑的对象的 ID。

 let edit_buttons = document.querySelectorAll(".edit-modal");

  for(var i = 0; i < edit_buttons.length; i++) {
    edit_buttons[i].addEventListener("click", function(e) {
    console.log(`${this.getAttribute("data-id")}`)
    console.log(`{% url 'users:edit' pk=1 %}`)
    document.querySelector("form").setAttribute("action", `{% url 'internal-users:edit-product' pk=${this.getAttribute("data-id")} %}`);
    })
  }

  <tr>
    <td class="border-0 size-13 text-gray-dark">
      <button class="btn btn-gray text-gray size-13 edit-modal"  data-id="1" data-toggle="modal" data-target="#editModal">Edit</button>
    </td>
  </tr>

  <tr>
    <td class="border-0 size-13 text-gray-dark">
      <button class="btn btn-gray text-gray size-13 edit-modal"  data-id="2" data-toggle="modal" data-target="#editModal">Edit</button>
    </td>
  </tr>
{% endfor %}


<form method="POST" action="">
  {% csrf_token %}
  <input type="hidden" id="object_id">
  
</form>

因此，如果我们选择第一个条目进行编辑，我希望表单的操作为 /users/1/edit/

如果我尝试使用 javascript 添加我会收到以下错误

Could not parse the remainder: '${this.getAttribute("data-id")}' from '${this.getAttribute("data-id")}'

如果有人可以帮助我，我会很高兴，在此先感谢！

标签： javascripthtmldjango

Answer 1

代表

document.querySelector("#myTable tbody").addEventListener("click", function(e) {
  const tgt = e.target;
  if (tgt.classList.contains("edit-modal")) {
    document.getElementById("postForm").action = `someurl?id=${tgt.dataset.id}`;
    console.log(document.getElementById("postForm").action)
  }
})

<table id="myTable">
  <tbody>
    <tr>
      <td class="border-0 size-13 text-gray-dark">
        <button class="btn btn-gray text-gray size-13 edit-modal" data-id="1" data-toggle="modal" data-target="#editModal">Edit</button>
      </td>
    </tr>

    <tr>
      <td class="border-0 size-13 text-gray-dark">
        <button class="btn btn-gray text-gray size-13 edit-modal" data-id="2" data-toggle="modal" data-target="#editModal">Edit</button>
      </td>
    </tr>
  </tbody>
</table>


<form method="POST" id="postForm" action="">

</form>