CODEWITHSUNDEEP
javascripthideshow
honey
honey

Reputation: 21

Show and hide several fields using Javascript

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>

Upvotes: 1

Views: 5409

Answers (1)

Iswanto San
Iswanto San

Reputation: 18569

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 :

  1. Multiple element with same id.
  2. In your javascript, it try to get tipopago and mpcobro element, where is the element ?
  3. I think this part : 
  document.getElementById('otrosban').style.display = '';

Should be : 

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

Upvotes: 2

Related Questions