Show and hide several fields using Javascript

Question

I'm trying to do hide and show of several select and text fields

the idea is that in the first field when "Banco" is selected it shows a dropdown for the user to select which bank, till that part everything works perfectly fine, the problem comes when in the next "banco" dropdown people select "otros" it should show a text field for the costumer to write the name of the bank, but I have done everything and can't seem to make it work

Can you help me please??

this is the JS

function formapago() {
if (document.getElementById('infopago').value == 'banco') {
    document.getElementById('banco').style.display = '';
    document.getElementById('tipopago').style.display='';
    }   

else {
          document.getElementById('banco').style.display = 'none';
          document.getElementById('tipopago').style.display='none';
}

if (document.getElementById('infopago').value == 'mp') {
    document.getElementById('mpcobro').style.display = '';
} else {
          document.getElementById('mpcobro').style.display = 'none';
}  
if (document.getElementById('banco').value == 'otros') {
    document.getElementById('otrosban').style.display = '';
    }   

else {
          document.getElementById('otrosban').style.display = 'none';
}

}

and HTLM

<select name="infopago" id="infopago" onchange='formapago()'>
          <option value="elegir" selected="selected">Elegir</option>
          <option value="banco">Banco</option>
          <option value="mp">Mercado Pago</option>
        </select>
        </p>
        <div id="banco" style="display: none">
      <p><strong>BANCO: </strong></p>
      <p>
        <label for="banco">Banco Emisor</label>
        <select name="banco" id="banco" onchange='formapago()'>
          <option value="elegir" selected="selected">Elegir</option>
          <option value="provincial">Provincial</option>
          <option value="mercantil">Mercantil</option>
          <option value="banesco">Banesco</option>
          <option value="venezuela">Venezuela</option>
          <option value="otros">Otro</option>
        </select>
      </p> </div>

      <div id="otroban" style="display: none">
      <p>
        <label for="otroban">Otro Banco</label>
        <input type="text" name="otroban" id="otroban"/>
      </p>
      </div>

You really should be using a javascript framework like jQuery. It makes issues like this pretty trivial. — Spencer Ruport
– Spencer Ruport, Commented Feb 5, 2013 at 6:44
I tried to use jQuery but I'm already using it as it's a form converted in wizard and for some reason jQuery code doesn't work, that is why I'm trying to do it this way, if you could help me I would appreciate it — honey
– honey, Commented Feb 5, 2013 at 6:46
Put this in a Js fiddle and we can fix it. Nothing complicated. — Farrukh Subhani
– Farrukh Subhani, Commented Feb 5, 2013 at 6:48
I'm using this one jankoatwarpspeed.com/… and it works great but my boss wants to the fields to appear of thin air and that it was working great till that second dropbox — honey
– honey, Commented Feb 5, 2013 at 7:01

Iswanto San · Accepted Answer · 2013-02-05 07:17:35Z

2

Your problem is that you have two element with same ID.

This part :

  <div id="banco" style="display: none">
    <p><strong>BANCO: </strong></p>
    <p>
      <label for="banco">Banco Emisor</label>
      <select name="banco" id="banco" onchange='formapago()'>
       <option value="elegir" selected="selected">Elegir</option>
       <option value="provincial">Provincial</option>
       <option value="mercantil">Mercantil</option>
       <option value="banesco">Banesco</option>
       <option value="venezuela">Venezuela</option>
       <option value="otros">Otro</option>
       </select>
    </p> 
 </div>

div and select element have id="banco". Try to change select id.

EDIT

Here some problem i found when i see your HTML :

Multiple element with same id.
In your javascript, it try to get tipopago and mpcobro element, where is the element ?
I think this part :

  document.getElementById('otrosban').style.display = '';

Should be :

  document.getElementById('otroban').style.display = '';

edited Feb 5, 2013 at 7:17

answered Feb 5, 2013 at 6:50

Iswanto San

18.6k13 gold badges60 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

honey Over a year ago

Hi I didn't include that the part of tipopago or mpcobro because those 2 are working perfectly fine... But I'm glad to say that with the id change and the otroban that scaped my eyes (must be because it's 2:45am) it's fixed!! Thank youuuuu!!!

Collectives™ on Stack Overflow

Show and hide several fields using Javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related