I'm trying to send the id of the object that we select to edit in the form action.

 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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

So if we choose first entrie to edit I want the action of the form to be /users/1/edit/

If I try to add with javascript I get the following error

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

If someone can help me I would be very happy, thanks in advance!

CodePudding user response：

Delegate

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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>