Flaps change

Question

Flaps change

Asked 10 years ago

Viewed 985 times

3

I have a menu of tabs that as you select the tabs changes the content.

Flaps change:

<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 data from previous tab when selecting another tab?"

Menu image: Menu com abas

I call the AlternarAbas() in the menu where the desired option is chosen:

<body onLoad="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 to which I refer are the ones that the user types. That is, if the user type something in the area of incluir do Usuário and then change to Empresa, the data he reported on incluir will disappear!

image of include: Incluir

Works if called by an iframe?

<tr>
    <td height="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>

1 answer

Browser other questions tagged javascript html

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

by Zuul • **35,190** points · Answer 1 · 2014-06-25T17:26:11+00:00

In order to switch tab and clean the values filled in the form via Javascript, you must make use of the method reset() which will restore the form to initial values:

Example in Jsfiddle

Your code is changed

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

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 becomes:

// O terceiro parâmetro é o ID for formulário alvo.
AlternarAbas('td_usua','div_usua', 'form_usua');