JSFiddle - React, Tailwind, and code Playground

by ysuper

HTML

<head>

  <style>
    .form-group:nth-of-type(3) {
      display: none;
    }

    /* or hidden could work too, i guesss */

    /* or hidden could work too, i guesss */

  </style>
</head>

<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="parameters_json" class="col-md-2 control-label">Parameters Json
        &nbsp;
    </label>
  <div class="col-md-10">

    <textarea class="form-control" id="parameters_json" name="parameters_json"></textarea>


  </div>

</div>

JavaScript

$(document).ready(function() {

  // $("#parameters_json").parent().parent().hide();
  // $("#parameters_json").parent().parent().show();

  $.ajax({
    url: "https://c4b49071.ap.ngrok.io/erp/get/invmb",
    type: 'get',
    dataType: 'json',
    async: false,
    success: function(data) {
      erpdata = $.map(data, function(obj) {
        obj.id = obj.id || obj.MB001;
        obj.text = obj.text || obj.MB001;
        return obj;
      });
      $("#part_number").select2({
        data: erpdata
      });
      console.log(data);
			
			
			$("#part_number").val("3PP00000000040").trigger("change");
      $("#part_description").val($("#part_number").select2('data').MB002);
		  $("#parameters_json").parent().parent().show();
    }
  })





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

    $.get("https://c4b49071.ap.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");
  })
});