title: innerHTML alternative or replace onchange event with a div
body: <p>I am stuck with a problem and I need you people to help me out.</p>
  
  <p>I have a html form. It sends country, state, city and pin code(to be entered manually) to a php file to process with help of ajax. Once submitted it returns with the pin code value in the text box.</p>
  
  <p>What I want is, whenever a user changes the value of pin code for the second time the form needs to be reset.</p>
  
  <p>What I have done is, I used innerHTML like this:</p>
  
  <pre><code>&lt;form id="someid" method="post"&gt;
  &lt;input type="text" value="'.$_POST['pin-code'].'" onChange="resetpin();" /&gt;
  </code></pre>
  
  <p>The reset form is like this:</p>
  
  <pre><code>function resetpin() {
  document.getElementById('someid').innerHTML = Full HTML CODE FROM ABOVE FORM GOES HERE
  </code></pre>
  
  <p>This code becomes ugly as the .innerHTML contains all the code for selecting country, city, state which gets repeated two time in the same page.</p>
  
  <p>So what I thought was, can I be able to do something like this?</p>
  
  <p>When user changes pin for the second time the form need to get reset like.</p>
  
  <pre><code>onchange=showdiv("ID of the form and contents to be displayed")
  </code></pre>
  
  <p>Can I be able to do this so that I do not need to use innerHTML...</p>
  
  <p>Please help me out.</p>