Forums

Hi guys, im new with Chrono and have the next problem. Im trying to connect two Drop-down fields, i mean, if in the first element the value is "Transferencia" should display the second dropdown field. I follow the steps from this tutorial http://www.chronoengine.com/faqs/2657-how-can-i-build-a-combo-box-input.html but i dont get it done 😟 .

Gooogle Chrome says

Uncaught TypeError: Cannot read property 'value' null

The code im using is the next

window.addEvent('domready', function() {
  var transaccion, emisor;
  transaccion = $('seleccione_transaccion');
  emisor = $('banco_emisor');
  switchEmisor();
  transaccion.addEvent('change', switchEmisor);
  function switchEmisor() {
    if ( transaccion.value == 'Transferencia' ) {
      emisor.disabled = false;
    } else {
      emisor.value = '';
      emisor.disabled = true;
    }
  }
});

Sorry for my poor english 😶

Hi dacevedo,

What is the HTML that goes with this?

Have you looked at the Double Drop-down tutorials, they may be nearer to what you need?

Bob

Hi Bob, thanks for your time 🙂

Here is the HTML Code

<div class="ccms_form_element cfdiv_select" id="seleccione_transaccion1_container_div" style="">
  <label>Seleccione un tipo de transacción</label>
  <select size="1" class=" validate['required']" title="" name="seleccione_transaccion">
    <option value="Depósito">Depósito</option>
    <option value="Transferencia">Transferencia Bancaria</option>
  </select>
  <div class="clear"></div>
  <div id="error-message-seleccione_transaccion"></div>
</div>
<div class="ccms_form_element cfdiv_select" id="banco_receptor1_container_div" style="">
  <label>Banco Receptor</label>
  <select size="1" class=" validate['required']" title="" name="banco_receptor">
    <option value="Banesco">Banesco</option>
    <option value="Provincial">Provincial</option>
  </select>
  <div class="clear"></div>
  <div id="error-message-banco_receptor"></div>
</div>
<div class="ccms_form_element cfdiv_select" id="banco_emisor1_container_div" style="">
  <label>Banco Emisor</label>
  <select size="1" class=" validate['required']" title="" name="banco_emisor">
    <option value="1">Banco de Venezuela</option>
    <option value="2">Provincial</option>
    <option value="3">Bancaribe</option>
    <option value="4">Banesco</option>
    <option value="5">Bicentenario</option>
  </select>
  <div class="clear"></div>
  <div id="error-message-banco_emisor"></div>
</div>
<div class="ccms_form_element cfdiv_datetime" id="fecha_transaccion1_container_div" style="">
  <label>Fecha Transacción</label>
  <input maxlength="150" size="16" class=" validate['required'] cf_date_picker" title="" type="text" value="" name="fecha_transaccion" />
  <div class="clear"></div>
  <div id="error-message-fecha_transaccion"></div>
</div>
<div class="ccms_form_element cfdiv_text" id="monto1_container_div" style="">
  <label>Monto</label>
  <input maxlength="150" size="30" class=" validate['required']" title="" type="text" value="" name="monto" />
  <div class="clear"></div>
  <div id="error-message-monto"></div>
</div>
<div class="ccms_form_element cfdiv_text" id="nro_de_movimiento1_container_div" style="">
  <label>Nro de Movimiento</label>
  <input maxlength="150" size="30" class=" validate['required']" title="" type="text" value="" name="nro_de_movimiento" />
  <div class="clear"></div>
  <div id="error-message-nro_de_movimiento"></div>
</div>
<div class="ccms_form_element cfdiv_text" id="cedula_de_identidad1_container_div" style="">
  <label>Cedula</label>
  <input maxlength="150" size="30" class=" validate['required']" title="" type="text" value="" name="cedula_de_identidad" />
  <div class="clear"></div>
  <div id="error-message-cedula_de_identidad"></div>
</div>
<div class="ccms_form_element cfdiv_submit" id="procesar1_container_div" style="text-align:left">
  <input name="procesar" class="" value="Procesar" type="submit" />
  <div class="clear"></div>
  <div id="error-message-procesar"></div>
</div>
<div class="ccms_form_element cfdiv_empty" id="empty_container_div" style="">
  <div class="clear"></div>
  <div id="error-message-empty"></div>
</div>

I check the double Drop-down tutorial but in that case is a DropDown inside another Dropdown.. in this case i have 2 separate dropdown fields. The second must be disable if in the first one the user didnt select "transferencia".

Thanks again for your time.

I change from NAME to ID in the vars leaving the JS like this

window.addEvent('domready', function() {
  var transaccion, emisor;
  transaccion = $('seleccione_transaccion1_container_div');
  emisor = $('banco_emisor1_container_div');
  switchEmisor();
  transaccion.addEvent('change', switchEmisor);
  function switchEmisor() {
    if ( transaccion.value == 'Transferencia' ) {
      emisor.setStyle('display', 'block');
    } else {
      emisor.value = '';
      emisor.setStyle('display', 'none');
    }
  }
});

Now the error un chrome it's gone and the second dropdown is hidden (diplay none)(just like it's supposed) but when the first dropdown change to "transferencia" the state dosent change. The script keep hidden it. Any suggestions? anyone? 😟