Input hidden reset

Try to confirm is input hidden is clean after a form.reset

by Miguel Roman

HTML

<form>
<input type="hidden" name="code" default />
<div>
  <label>
    <span>Name:</span>
    <input type="text" name="name" />
  </label>
</div>
<div>
  <label>
    <span>Description:</span>
    <textarea name="description"></textarea>
  </label>
</div>
<div>
<button type="submit">Save</button>
</div>
</form>

<table>
  <thead>
    <tr>
      <th>Code</th>
      <th>Name</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Prueba 1</td>
      <td>Descripcion 1</td>
      <td><button type="button" onclick="edit()">Edit</button></td>
    </tr>
  </tbody>
</table>

JavaScript

function submit(event) {
	console.log("submit");
	event.preventDefault();
  const form = event.target;
  const data = new FormData(form);
  const values = Array.from(data.entries());
  console.log('values', values);
  form.reset();
  // we need to set value as empty string to reset input hidden values.
  const code = document.querySelector('input[type=hidden][name=code]');
  code.value = "";
}

function edit()
{
	console.log('edit');
  const code = document.querySelector('input[type=hidden][name=code]');
  const name = document.querySelector('input[type=text][name=name]');
  const description = document.querySelector('textarea[name=description]');
  
  code.value = 1;
  name.value = "Prueba 1";
  description.value = "Descripcion 1";
}

function load()
{
  const [form] = document.getElementsByTagName("form");
  form.addEventListener("submit", submit);

  console.log(`load ${!!form}`);
}

load();