Question 234374 in Html Question posted in
Some basic documentation can be found here.

Html – Overwriting form elements

My application is used to calculate the household budget. I encountered the following problem.

At first, I entered a few items into the list
enter image description here

I clicked the edit button to change the first item
enter image description here
enter image description here

after saving the changes i did exactly the same for the second item
enter image description here
enter image description here

At the end you can see how both items from the list changed their name and value.
I wonder what the problem could be because each element when added also receives a unique ID that does not change. Please help 😀
I tried to check if it is changed when clicking the Save button, but it works fine anyway. I don’t know what else I can check

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0 
    document.getElementById("edit-form").addEventListener("submit", 
(event) => {
      event.preventDefault();
      incomes[index].name = name.value;
      incomes[index].amount = amount.value;
      item.textContent = `${name.value}: ${amount.value} PLN`;
      item.appendChild(btns);
      updateTotalIncomes();
      updateFinalScore();
      modal.style.display = "none";
      return;
    });

  2. 0

    You need to find row index when submitting a form.
    Then you can change values using a row index

    Example:

    const [tableData, setTableData] = useState([]);
function submit(formValues) {
  setTableData((prev)=> {
    const rowIndex = prev.findIndex((item)=> item.uniqueId === formValues.uniqueId);
    prev[rowIndex] = formValues;
    return [...prev];
  });
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search