JSFiddle - React, Tailwind, and code Playground

by ysuper

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jexcel/1.5.7/js/jquery.jexcel.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jexcel/1.5.7/css/jquery.jexcel.css" type="text/css" />

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.js"></script>

<div class="form-group">
    <label for="part_number" class="col-md-2 control-label">Part Number
        
          <strong style="color: red">&#42;</strong>
    </label>
    <div class="col-md-10">
      
      <textarea class="form-control" id="part_number" name="part_number" required rows="1"></textarea>
      
      
    </div>
    
  </div>

        
          
            
          
          
  
  <div class="form-group">
    <label for="part_description" class="col-md-2 control-label">Part Description
        
          <strong style="color: red">&#42;</strong>
    </label>
    <div class="col-md-10">
      
      <textarea class="form-control" id="part_description" name="part_description" required rows="1"></textarea>
      
      
    </div>
    
  </div>

        
          
            
          
          
  
  <div class="form-group">
    <label for="key_size_amount" class="col-md-2 control-label">Key Size Amount
        &nbsp;
    </label>
    <div class="col-md-10">
      
      <input class="form-control" id="key_size_amount" name="key_size_amount" type="text" value="">
      
      
    </div>
    
  </div>

        
          
            
          
          
  
  <div class="form-group">
    <label for="all_size_amount" class="col-md-2 control-label">All Size Amount
        &nbsp;
    </label>
    <div class="col-md-10">
      
      <input class="form-control" id="all_size_amount" name="all_size_amount" type="text" value="">
      
      
    </div>
    
  </div>

        
          
            
          
          
  
  <div...

JavaScript

/* $("#parameters_json").parent().parent().hide(); */
  /* $("#parameters_area").parent().parent().hide(); */

  $.get(
    "https://97e56467.ngrok.io/erp/get/invmb",
    data => {
      erpdata = $.map(data, function(obj) {
        obj.id = obj.id || obj.MB001; // select2 need id&text column to choice
        obj.text = obj.text || obj.MB001; // replace name with the property used for the text
        return obj;
      });

      $("#part_number").select2({
        data: erpdata
      });
      console.log(data);
    },
    "json"
  );

  $("#part_number").change(function() {
    $("#part_description").val($("#part_number").select2('data').MB002);

    $.get("https://97e56467.ngrok.io/iqc/get/material/" + $("#part_number").val(), iqcdata => {
      if (iqcdata) {
        alert("【注意】此料號之前已建檔，將讀取既有資料進行修改");
        $("#date").val(iqcdata.date);
        $("#part_description").val(iqcdata.part_description);
        $("#key_size_amount").val(iqcdata.key_size_amount);
        $("#all_size_amount").val(iqcdata.all_size_amount);
        jexcel(iqcdata.parameters_json);
        filename = iqcdata.filename;
        $("#filename").replaceWith("<div class=\"image-thumbnail\"> <img src=\"/static/upload/" + filename + "\"> <input type=\"checkbox\" name=\"_filename-delete\">Delete</input> <input name=\"filename\" type=\"hidden\" value=\"" + filename + "\"></div><input class=\"form-control\" id=\"filename\" name=\"filename\" type=\"file\">");
      }
    }, "json");
  })

  $("#key_size_amount").change(function() {
    if ($("#key_size_amount").val() > 26 || $("#key_size_amount").val() < 1) {
      alert("Key Size Amount 範圍介於1-26間")
      $("#key_size_amount").val(null)
    } else {
      jexcel(null);
    }
  })

  $("#all_size_amount").change(function() {
    if ($("#all_size_amount").val() - $("#key_size_amount").val() < 0) {
      alert("All Size Amount 應該大於 Key Size Amount")
      $("#all_size_amount").val(null)
    } else {
      jexcel(null);
    }
  })

  function...