Change of Tabs

Navigation
3

I have a tab menu that as you select the tabs will change the content.

Change tabs: 

<script language="JavaScript">

function stAba(menu,conteudo)
{
  this.menu = menu;
  this.conteudo = conteudo;
}

var arAbas = new Array();
arAbas[0] = new stAba('td_usua','div_usua');
arAbas[1] = new stAba('td_empr','div_empr');
arAbas[2] = new stAba('td_nota','div_nota');
arAbas[3] = new stAba('td_soft','div_soft');

function AlternarAbas(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 = '';
}

</script>

My question is: "How to clear the data from the previous tab when selecting another tab?"

Menu image:

IcallAlternarAbas()inthemenuwherethedesiredoptionischosen:

<bodyonLoad="AlternarAbas('td_usua','div_usua')">
<table width="945" height="50"  align="left" valign="top" cellspacing="0" cellpadding="5" border="0" style="border-left: 1px solid #000000;" >
   <tr>
    <td height="20" width="50" class="menu" id="td_usua" onClick="AlternarAbas('td_usua','div_usua')">Usuario</td>
    <td height="20" width="50" class="menu" id="td_empr" onClick="AlternarAbas('td_empr','div_empr')">Empresa</td>
    <td height="20" width="50" class="menu" id="td_nota" onClick="AlternarAbas('td_nota','div_nota')">Nota Fiscal</td>
    <td height="20" width="50" class="menu" id="td_soft" onClick="AlternarAbas('td_soft','div_soft')">Software</td>
  </tr>

The data I refer to are the ones the user types. That is, if the user types something in the area of incluir do Usuário and then changes to Empresa , the data that he reported in incluir will disappear!

include image:

Doesitworkifcalledbyaniframe?

<tr><tdheight="300" width="" class="tb-conteudo" colspan="4" align="left" valign="top" >  
        <div id="div_usua" class="conteudo" style="display: none; padding-top:5px;">
            <table align="left" border="0" width="2%">
                <tr>
                    <td>
                        <iframe style="border-radius:20px;" scrolling="no" src="../sai_cada_usua/menu_com_abas_usua.php" width="900" height="400 " >
                        </iframe>
                    </td>
                </tr>
            </table>
        </div>      
  </td>
</tr>
    
asked by anonymous 25.06.2014 / 16:48

1 answer

5

In order to switch tabs and clean the values filled in the form via JavaScript, you must use the reset() that will reset the form to the initial values:

Example in JSFiddle

Your changed code

Your code has been changed to include a new parameter that applies to the form: 

function stAba(menu,conteudo,formulario)
{
  this.menu = menu;
  this.conteudo = conteudo;
  this.formulario = formulario;
}

var arAbas = new Array();
arAbas[0] = new stAba('td_usua', 'div_usua', 'form_usua');
arAbas[1] = new stAba('td_empr', 'div_empr', 'form_empr');
arAbas[2] = new stAba('td_nota', 'div_nota', 'form_nota');
arAbas[3] = new stAba('td_soft', 'div_soft', 'form_soft');

function AlternarAbas(menu, conteudo, formulario)
{
  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';
   f = document.getElementById(arAbas[i].formulario);
   f.reset();
  }
  m = document.getElementById(menu)
  m.className = 'menu-sel';
  c = document.getElementById(conteudo)
  c.style.display = '';
}

The call is changed to: 

// O terceiro parâmetro é o ID for formulário alvo.
AlternarAbas('td_usua','div_usua', 'form_usua');
    
25.06.2014 / 19:26
String (g) Match Tables with Bootstrap