CODEWITHSUNDEEP
javascriptinnerhtml
rodrunner
rodrunner

Reputation: 1930

innerHTML not applying from event handler

I have a very simple html with a div for info messages and a form with two buttons (actually two input types submit and reset)

the div#info is populated dynamically (ajax). In JavaScritpt, I wait for the window to load and I register the reset input for the onreset event:

window.addEventListener("load", onloadWindow);

function onloadWindow() { 
  // Document loaded, register onreset event for my form
  document.getElementById("formId").addEventListener("onreset", onresetForm);
}

// Reset al the infos
function onresetForm(event) {
  document.getElementById("formId").reset();
  document.getElementById("info").innerHTML = '';
}
<body>
  <div id="info"></div> 
  <form id='formId' action='#' method='post'>
    <label for='cod'>Code:</label>
    <input id='cod'  type='text'   name='cod'><br>
    <label for='desc'>Description:</label>
    <input id='desc' type='text'   name='desc'><br>
    <label for='type'>Type:</label>
    <input id='type' type='text'   name='type'><br>
    <input id='upd'  type='submit' name='upd' value='Update'>
    <input id='res'  type='reset'  name='res' value='Reset'>
  </form>
</body>

All the text fields in the form get cleared, but the innerHTML = '' for the div#info is not working, the former messages generated by ajax are not deleted. Am I missing something here?

By the way, I'm using a Smarty template for the form, but I don't think this is related to my problem

Upvotes: 0

Views: 160

Answers (1)

Sarah Gro&#223;
Sarah Gro&#223;

Reputation: 10879

The event type/name is simply reset, not onreset. Then inside your reset callback, you don't need to reset the form again.

window.addEventListener("load", onloadWindow);

function onloadWindow() { 
  // Document loaded, register onreset event for my form
  document.getElementById("formId").addEventListener("reset", onresetForm);
}

// Reset al the infos
function onresetForm(event) {
  document.getElementById("info").innerHTML = 'form has been reset';
}
<body>
  <div id="info">Info before reset</div> 
  <form id='formId' action='#' method='post'>
    <label for='cod'>Code:</label>
    <input id='cod'  type='text'   name='cod'><br>
    <label for='desc'>Description:</label>
    <input id='desc' type='text'   name='desc'><br>
    <label for='type'>Type:</label>
    <input id='type' type='text'   name='type'><br>
    <input id='upd'  type='submit' name='upd' value='Update'>
    <input id='res'  type='reset'  name='res' value='Reset'>
  </form>
</body>

Upvotes: 1

Related Questions