JSFiddle - React, Tailwind, and code Playground

by aborrell

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>capt_incidenciastp3 test</title>
<style>
  label { font-weight:bold; }
  td { padding: 10px;}
</style>
</head>
<script type="text/javascript" src="../../194/jquery-3.3.1.js"></script>
<script type="text/javascript" src="capt_incidencias3.js"></script>

<body onload="getdat();" style="background-color:#FFFDEC;">
    <center>
      <h3>Formularios con ajax</h3>

    </center>
    <hr/>
    <form id="fm1" method="post" onsubmit="return false">
      <div style="background-color:lightgray;"><br/>

      Datos unidad: <br/>
      <div style="background-color:#707070">
        <table>
          <tr>
            <td><label>Empresa:</label></td>
            <td><input list="emps" id="emp" name="empresa" style="background-color:lightgray;height:1.5em"/></td>
              <datalist id="emps">
                  <option value="" selected>Otro</option>
              </datalist>
            </td>
              <td><label>Ruta/sitio:</label>
              <td><input type="text" style="width:2.2em;" name="ruta" /></td>
          </tr>
        </table>
      </div>

        <br/>
        Datos infracción: <br/>
        <div style="background-color:#848484;">
          <table>
            <tr>
              <td><label for="">seleccionar</label></td>
              <td>
                <select id="art" onchange="desctxt(this)">
                  <option value="" selected=""></option>
                </select>
              </td>
              <td colspan="2">
                <select id="des" onchange="desctxt(this)">
                  <option value="" selected=""></option>
                </select>
              </td>

            </tr>
            <tr>
              <td style="vertical-align:bottom;"><label>Artículos:</label></td>
              <td style="vertical-align:bottom;text-align:left;"><input id="infr" type="text" name="infraccion" value=""></td>

              <td...

JavaScript

var i=0;
    var datao;var dataa;var data;
    function getdat() {

      $("#art")[0].selectedIndex = 0;
      $('#infr').val('');
      $('#desc').val('');

      $.getJSON('inftp_fullsort.json', function(data){
        datao=data;
      //  alert(typeof data);
      //console.log(typeof datao+" "+JSON.stringify(datao));
        for(var k in datao) {
        $('#art').append("<option value="+k+">"+data[k].articulo)+"</option>";
        $('#des').append("<option value="+k+">"+data[k].descripcion)+"</option>";
        }
      });
      /*$.getJSON('inftp_fullsort.json', function(data){
        dataoi=data;
      //  alert(typeof data);
        for(var k in dataoi) {
        $('#des').append("<option value="+k+">"+data[k].descripcion)+"</option>";
        }
      });*/
      $.getJSON('emptp_full.json', function(dataa){
        dataao=dataa[1];
        //console.log(typeof dataao+" "+JSON.stringify(dataao));
        //alert(typeof dataa);
        for(var k in dataa) {
          //console.log(k+" "+dataa[k]);
          for(var l in dataa[k]) {
            console.log(l+" "+dataa[k][l]);
          }
        $('#emps').append("<option value="+l+">"+dataa[k][l])+"</option>";
        }
      });
    }
    function desctxt(e) {
      var j=e.value;
      console.log("values: "+j);
      alert(datao[j].descripcion);
      if(i==0) {
        $('#infr').val(datao[j]['articulo'])
        $('#desc').val(datao[j]['descripcion']);
      }
      else {
        var varnow=$('#infr').val();
        var descnow=$('#desc').val();
        $('#infr').val(varnow+", "+datao[j]['articulo'])
        $('#desc').val(descnow+", "+datao[j]['descripcion']);
      }

      i=i+1;
    }