網頁前端設計工程師培訓班
<!-- 調用 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>