I have a table with data inside. Every row contains a button that allows to modify that item and send a Put request.
I want to populate the form with the data of the row selected, so changes can be made a lot easier.
This is the modal
<div class="modal-body" id="modal-body-modify">
<label for="Name">Name:</label> <input id="NamePut" type="text" name="Name">
<label for="Surname">Surname:</label> <input id="SurnamePut" type="text" name="Surname">
<label for="Birthday">Birthday:</label> <input id="BirthdayPut" type="text" name="Birthday">
<label for="Fiscal-Code">Fiscal Code:</label> <input id="Fiscal-CodePut" type="text" name="Fiscal-Code">
<label for="Course">Course:</label>
<select id="CourseSelectPut" name="Course">
<option class="optionPut" value="nessuno" selected>nobody</option>
</select>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" onclick="eliminaMessaggioPut()">Close</button>
<button type="button" class="btn btn-primary" onclick="Put()" id="modalModificaButton">Modify</button>
</div>
Normally, to take data from that table and write it on my page I do this:
var name = document.getElementById(`name-${id}`);
var surname = document.getElementById(`surname-${id}`);
var divTitle = document.getElementById("nomeStudente");
divTitle.innerText = name.innerHTML + " " + surname.innerHTML;
I’ve tried many things to be able to write inside that input field, but nothing succeeds.
var NamePut = document.getElementById("NamePut");
NamePut.value = Name.innerHTML;
var name = document.getElementById(`name-${id}`);
var NamePut = document.getElementById("NamePut");
NamePut.append(name);
// document.getElementById(`NamePut`).setAttribute('value', Name);
// NamePut.value = document.getElementById(`name-${id}`).value;
I know a solution could be transforming it into a form, but it would change all the css style and I prefer it to solve it maintaining it like this.