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>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!
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>