I checked the input value before submitting it in the form and confirmed that it is correct, returning as a string.enter image description here
const saveList = () => {
const inputListNameText = inputListName.value;
fetch('/api/lists', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ list_name: inputListNameText }),
}).then(response => response.json())
.then(data => {
console.log(data);
console.log(inputListNameText);
const tableBody = document.querySelector('#tbody');
const newRow = document.createElement('tr');
const listCell = document.createElement('td');
listCell.textContent = inputListNameText.value;
newRow.appendChild(listCell);
tableBody.appendChild(newRow);
})
}
<table class="table table-striped table-sm table-bordered">
<thead class="thead-dark">
<tr>
<th scope="col">Task</th>
</tr>
</thead>
<tbody id="tbody">
<tr id="list-container"/>
<th scope="row"><input class="todo__checkbox" type="checkbox"></th>
<td class="text-break"></td>
</tr>
</tbody>
</table>
I verified that the data is being processed correctly.