11-1-4 自動表單

<!-- 調用 WdatePicker.js-->
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/my97datepicker@4.8.0/skin/WdatePicker.css'>
<script src='https://cdn.jsdelivr.net/npm/my97datepicker@4.8.0/WdatePicker.js'></script>    
<!-- ckeditor -->
<script src="https://cdn.ckeditor.com/4.16.1/standard/ckeditor.js"></script>

<h2 class="text-center"><?= global.formTitle ?></h2>
<!-- col_form -->
<div class="my-5">
  <form action="<?!= global.url ?>" id="myForm"  method="POST">
    <div class="row">
      
      <? for(var i in stru){ ?> 
        
        <? if(stru[i].kind == "隱藏"){ ?>
          <input type="hidden" name="<?= stru[i].name ?>" id="<?= stru[i].name ?>" value="<?= row[i] ?>" >              
        
        <? } else if(stru[i].kind == "段落"){ ?>
              
          <!-- <?= stru[i].title ?> -->
          <div class="col-sm-<?= parseInt(stru[i].form_width)?> mb-3">
            <label class=""><?= stru[i].title ?><? if (stru[i].validate){ ?><span class="text-danger"> *</span><? } ?><? if (stru[i].readme){ ?><span class="text-danger">(<?= stru[i].readme ?>)</span><? } ?></label>
            <textarea class="form-control" rows="2" id="<?= stru[i].name ?>" name="<?= stru[i].name ?>"><?= row[i] ?></textarea>
          </div> 
        
        <? } else if(stru[i].kind == "下拉選單"){ ?>
              
          <!-- <?= stru[i].kind ?> -->
          <div class="col-sm-<?= parseInt(stru[i].form_width)?> mb-3">
            <label class=""><?= stru[i].title ?><? if (stru[i].validate){ ?><span class="text-danger"> *</span><? } ?><? if (stru[i].readme){ ?><span class="text-danger">(<?= stru[i].readme ?>)</span><? } ?></label>                
            <select name="<?= stru[i].name ?>" id="<?= stru[i].name ?>" class="form-select">
              <? var option = stru[i].option.split(",") ?>
              <? for(let j in option){ ?>
                <option <? if(option[j] == row[i]){ ?> selected<? } ?>><?= option[j] ?></option>
              <? } ?>
            </select>
          </div>
        <? } else if(stru[i].kind == "複選"){ ?>
               
          <!-- <?= stru[i].kind ?> -->
          <div class="col-sm-<?= parseInt(stru[i].form_width)?> mb-3">
            <label class=" d-grid"><?= stru[i].title ?></label>
            
            <? var option = stru[i].option.split(",") ?>
            <? var values = row[i].split(",") ?>
            <? for(var j in option){ ?> 
              <? var checked = (values.indexOf(option[j]) === -1) ? "" : "checked"; ?> 
              <div class="form-check form-check-inline">
                <input class="form-check-input <?= stru[i].name ?>" type="checkbox" id="<?= stru[i].name ?><?= j ?>" name="<?= stru[i].name ?>[]" value="<?= option[j] ?>" <?= checked ?>>
                <label class="form-check-label" for="<?= stru[i].name ?><?= j ?>"><?= option[j] ?></label>
              </div> 
            <? } ?>
          </div>
          
        <? } else if(stru[i].kind == "日期時間"){ ?> 
          <div class="col-sm-<?= parseInt(stru[i].form_width)?> mb-3">
            <label><?= stru[i].title ?><? if (stru[i].validate){ ?><span class="text-danger"> *</span><? } ?><? if (stru[i].readme){ ?><span class="text-danger">(<?= stru[i].readme ?>)</span><? } ?></label>
            <input type="text" class="form-control" name="<?= stru[i].name ?>" id="<?= stru[i].name ?>" value="<?= row[i] ?>" onclick="WdatePicker({dateFmt:'yyyy/MM/dd HH:mm:ss', startDate:' %y/%M/%d %H:%m:%s'})" autocomplete="off">
          </div>

        <? } else if(stru[i].kind == "日期"){ ?> 
          <div class="col-sm-<?= parseInt(stru[i].form_width)?> mb-3">
            <label><?= stru[i].title ?><? if (stru[i].validate){ ?><span class="text-danger"> *</span><? } ?><? if (stru[i].readme){ ?><span class="text-danger">(<?= stru[i].readme ?>)</span><? } ?></label>
            <input type="text" class="form-control" name="<?= stru[i].name ?>" id="<?= stru[i].name ?>" value="<?= row[i] ?>" onclick="WdatePicker({dateFmt:'yyyy/MM/dd', startDate:' %y/%M/%d'})" autocomplete="off">
          </div>

        <? } else if(stru[i].kind == "時間"){ ?> 
          <div class="col-sm-<?= parseInt(stru[i].form_width)?> mb-3">
              <label><?= stru[i].title ?><? if (stru[i].validate){ ?><span class="text-danger"> *</span><? } ?><? if (stru[i].readme){ ?><span class="text-danger">(<?= stru[i].readme ?>)</span><? } ?></label>
              <input type="text" class="form-control" name="<?= stru[i].name ?>" id="<?= stru[i].name ?>" value="<?= row[i] ?>" onclick="WdatePicker({dateFmt:'HH:mm:ss', startDate:' %H:%m:%s'})" autocomplete="off">
          </div>
          
        <? } else if(stru[i].kind == "網頁編輯器"){ ?> 
          <div class="col-sm-<?= parseInt(stru[i].form_width)?> mb-3">
            <label><?= stru[i].title ?><? if (stru[i].validate){ ?><span class="text-danger"> *</span><? } ?><? if (stru[i].readme){ ?><span class="text-danger">(<?= stru[i].readme ?>)</span><? } ?></label>
            <textarea class="form-control" rows="5" id="<?= stru[i].name ?>" name="<?= stru[i].name ?>"><?= row[i] ?></textarea>
          </div>              
          <!-- ckeditor start-->
          <script>
            CKEDITOR.replace(<?= stru[i].name ?>);
            CKEDITOR.config.allowedContent=true;
          </script>
          <!-- ckeditor end--> 
          
        <? } else{ ?>
          
          <!--<?= stru[i].title ?>-->              
          <div class="col-sm-<?= parseInt(stru[i].form_width)?> mb-3">
            <label><?= stru[i].title ?><? if (stru[i].validate){ ?><span class="text-danger"> *</span><? } ?><? if (stru[i].readme){ ?><span class="text-danger">(<?= stru[i].readme ?>)</span><? } ?></label>
            <input type="text" class="form-control" name="<?= stru[i].name ?>" id="<?= stru[i].name ?>" value="<?= row[i] ?>" >
          </div>
          
        <? } ?>
          
      <? } ?>
          
      <!--送出-->              
      <div class="col-sm-12  d-grid">
        <input type="hidden" name="op" id="op" value="set_make_source" >
        <button id="submit" type="submit" class="btn btn-primary">送出</button>
      </div> 
    </div>
  </form> 
</div>


<style>
  .error{
  color:red;    
}
</style>
<!-- JQUERY 驗證 -->
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.1/dist/jquery.validate.min.js"></script> 

<!-- 調用函式 -->
<script>
  $(function(){

    $("#myForm").validate({
      submitHandler: function(form) {
        form.submit(); 
        return false;             
      },
      rules: {
        <?!= rules ?>
      },
      messages: {
        <?!= messages ?>  
      }
    });

  });
       
</script>