JSFiddle - React, Tailwind, and code Playground

by stefano caravana

HTML

<form action="http://optilab.eu/index.php?option=com_chronocontact&amp;task=send&amp;chronoformname=moduloordinelenti&amp;Itemid=62" method="post" id="ChronoContact_moduloordinelenti" name="ChronoContact_moduloordinelenti">
        
                <div class="form_item">
  <div class="form_element cf_heading">
    <h1 class="cf_text">Ottico</h1>
  </div>
  <div class="cfclear">&nbsp;</div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label style="width: 150px;" class="cf_label">Riferimento Cliente</label>
    <input type="text" name="dati_riferimento" id="text_7" title="" size="30" maxlength="150" class="cf_inputbox required">
  <a onclick="return false;" class="tooltiplink"><img width="16" height="16" border="0" src="/components/com_chronocontact/css/images/tooltip.png" alt="" class="tooltipimg"></a>
                <div class="tooltipdiv">Riferimento Cliente :: Il suo codice di riferimento</div>
  </div>
  <div class="cfclear">&nbsp;</div>
</div>

<div class="form_item">
  <div class="form_element cf_datetimepicker">
    <label style="width: 150px;" class="cf_label">Data ordine</label>
    <input type="text" name="dati_data" id="dati_data" size="20" title="ok" class="cf_datetime required dashboard" readonly="">
    <button type="button" class="dashboard"></button><a onclick="return false;" class="tooltiplink"><img width="16" height="16" border="0" src="/components/com_chronocontact/css/images/tooltip.png" alt="" class="tooltipimg"></a>
                <div class="tooltipdiv">Data ordine :: La data di compilazione del suo ordine</div>
  </div>
  <div class="cfclear">&nbsp;</div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label style="width: 150px;" class="cf_label">Nome</label>
    <input type="text" name="dati_nome" id="text_12" title="ok" size="30" maxlength="150" class="cf_inputbox required">
  <a onclick="return false;" class="tooltiplink"><img width="16" height="16" border="0"...

CSS

form#ChronoContact_moduloordinelenti {
    display: none;
}

JavaScript

// file js

/**

1* selezione
    tipodilente
2* selezione Bio GEL
    dx_bigel_tipo
    dx_bigel_geometria
2* selezione Bio SIL
    dx_biosil_tipo
    dx_biosil_geometria

*/    



  $(document).ready(function($) {

    
    var d_i = 0;
    var d_a = 0;
    var onby_tipodilente_biogel=["dx_bigel_tipo","dx_bigel_geometria"];
    var onby_tipodilente_biosil=["sx_bisil_tipo","dx_bisil_geometria"];
    
    alert('init');
    
   
    
    var select = $('select').get();    
    select.each(function(index) {
        
        if(index.name.substring(0, 3) == 'sx_' || index.name.substring(0, 3) == 'dx_'){
//            sh(index, "hide");
            $(index).show();
            $(index).prev().show();
            $(index).parent().show();
            $(index).prev('.cf_heading').show();
            $(index).parent('.form_item').show();   
            d_a++;
        }
         d_i++;
    });
        
    $('form#ChronoContact_moduloordinelenti').show();
     
    
    /* dx_bigel_tipo */
    var sel_dx_tipo = '';
    var sel_dx_geom = '';
    var sel_sx_tipo = '';
    var sel_sx_geom = '';
    

    $('select[name=tipodilente]').change(function() {
    //    alert($(this).val());
    //    alert($(this).children("option:selected").text());
    })    
    $('select[name=dx_bigel_tipo]').change(function() {
        sel_sx_tipo = $(this).children("option:selected").text();
    }) 
      $('select[name=dx_bigel_geometria]').change(function() {
        sel_sx_tipo = $(this).children("option:selected").text();
    })
    
});