Clear form on entry?

Asked

Viewed 1,044 times

1

There is the possibility to clean up the form or the fields after the call without pressing any button? In my case the user changes menu and the data continues.

Call menu: Menu

Content page: Content

javascript html form

  • Could explain a little more?

  • @Ronnyamarante my doubt is to enter the page and delete the filled fields (in my case the user changes menu and the data continues)

  • This must be happening if you use inputs with the same name.

2 answers

1

Yes there is, you can call the reset form with

document.getElementById('minhaForm').reset();

What this method does is restore the original form values.

If the form is submitted via AJAX, ie without reloading the page, you can join this code above within the AJAX Success function.

If the page loads again, then the fields are already clean.

For example: http://jsfiddle.net/8PaG2/

  • In that case I use document.getElementById('minhaForm').reset(); within the <form>?

  • @Isaias, you say you change menu. What code do you use for this change?

  • I use a menu with tabs, and the problem is that when I open the "main tab" it opens all the others and does not close any in the change! Obs* in the main tab calling the data!

  • @Isaias, can you put your code in a jsFiddle (http://jsfiddle.net/) or edit the question and put it there? So you’ll get help to solve this problem too.

1

So you can analyze the Jsfiddle in your question, the forms for each tab are inside a iframe. Therefore, in the function dealing with the change of tab, you should apply the following code:

// localizar a iFrame
var minhaFrame = document.getElementById( iframeID );

// localizar o conteudo da iframe
var minhaFrameDoc = minhaFrame.contentDocument || minhaFrame.contentWindow.document;

// localizar o formulário dentro da iframe pelo ID do formulario
var meuFormulario = minhaFrameDoc.getElementById( formID );

// repor formulário a vazio conforme resposta do @Sergio
meuFormulario.reset();

Your job Alter() will stay:

function Alter(menu,conteudo)
{
  for (i=0;i<arAbas.length;i++)
  {
   m = document.getElementById(arAbas[i].menu);
   m.className = 'menu';
   c = document.getElementById(arAbas[i].conteudo)
   c.style.display = 'none';
  }
  m = document.getElementById(menu)
  m.className = 'menu-sel';
  c = document.getElementById(conteudo)
  c.style.display = '';


  var minhaFrame = c.getElementById( iframeID );
  var minhaFrameDoc = minhaFrame.contentDocument || minhaFrame.contentWindow.document;
  var meuFormulario = minhaFrameDoc.getElementById( formID );

  // repor formulário a vazio conforme resposta do @Sergio
  meuFormulario.reset();
}

For this to work, you must have one id unique in each iframe as well as a id unique in each form:

Iframe

<table border="0" width="50%">
  <tr>
    <td>
      <iframe id="iframeID" style="border-radius:20px;"  scrolling="no" src="../sai_cada_usua/sai_frm_incl_usua.php" width="830" height="310" >
      </iframe>
    </td>
  </tr>
</table>

Form

<form name="sai_frm_incl_usua1" id="formID" action="sai_incl_usua" method="POST" autocomplete="off"  onsubmit="return f_veri_dados();">
  <!-- conteúdo do formulário -->
</form>

This way, whenever the user clicks to change tab, the form that will be presented will be cleaned via Javascript, being thus without anything filled in the fields of the same.

Browser other questions tagged javascript html form

You are not signed in. Login or sign up in order to post.