Title1

Title2

Title3

prev12. Bootstrap Table(二)
14. 表單頁面(二)next
鐵人賽-Google Apps Script整合運用

13. 表單頁面(一)

想法

  1. 當按下「新增」、「編輯」時，會自動將畫面轉至「表單頁面」等待輸入資料
  2. 流程指標為 op=form_custom
  3. 「新增」sn=''、「編輯」sn=xxx：用流水號來判斷要做新增或編輯
  4. 這裡先用固定畫面處理，待日後將之用樣版語法，屆時可以套用到任何管理系統

程式

  1. 路由： 
    
// 客戶管理 表單
Route.path("form_custom", form_custom);

    記得函式 form_custom 要先建立，不然會報錯

  2. form_custom(e) 
    
/*========================================
  客戶資料 表單
=========================================*/
function form_custom(e){
  
}

     

  3. 判斷是否接收到 sn
     

    
/*========================================
  客戶資料 表單
=========================================*/
function form_custom(e){  
  let content = '';
  // 判斷是否接收到 sn
  let sn = e.parameter.sn ? e.parameter.sn : '';

  let title = sn ? '客戶 編輯表單' : '客戶 新增表單';
  content = `<h2 class='mt-3'>${title}</h2>`;
  
  content += render('form_custom', {}); 

  return render('tmp', {content: content}, title); 
}

     

  4. 上面有用到 form_custom 的樣版，故也要先建一個樣版 form_custom.html

  5. 表單結構規劃
    表單標題：form_label
    表單名稱：form_name
    表單預設值：form_value
    表單寬度：form_width => 1~12
    表單類別：form_kind => 隱藏|簡答|段落|下拉選單|單選|複選
    表單選項：form_option
    表單是否驗證：form_validate
    表單說明：form_readme
    表單暫留字：form_placeholder

    <!-- 隱藏 -->
<input type="hidden" name="sn" id="sn" value="">

<!-- 簡答 -->
<div class="col-md-4 mb-3">
  <label>
    簡答
    <span class="text-danger"> *</span>
    <span class="text-danger"> (表單說明)</span>
  </label>
  <input type="text" class="form-control" name="f2" id="f2" value="表單預設值" placeholder="表單暫留字">
</div>

<!-- 段落 -->
<div class="col-md-12 mb-3">
  <label>
    段落
    <span class="text-danger"> *</span>
    <span class="text-danger"> (表單說明)</span>
  </label>
  <textarea class="form-control" name="f3" id="f3" rows="3" placeholder="表單暫留字">表單預設值</textarea>
</div>

<!-- 下拉選單 -->
<div class="col-md-12 mb-3">
  <label class="control-label">
    下拉選單
    <span class="text-danger"> (表單說明)</span>
  </label>
  <select name="f4" id="f4" class="form-select">
    <option>選單1</option>
    <option>選單2</option>
    <option>選單3</option>
    <option selected>選單4</option>
  </select>
</div>

<!-- 單選 -->
<div class="col-md-12 mb-3">
  <label class="control-label w-100">
    單選 
    <span class="text-danger"> (表單說明)</span>
  </label>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" id="f50" value="單選1" name="f5">
    <label class="form-check-label" for="f50">單選1</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" id="f51" value="單選2" name="f5">
    <label class="form-check-label" for="f51">單選2</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" id="f52" value="單選3" name="f5" checked>
    <label class="form-check-label" for="f52">單選3</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" id="f53" value="單選4" name="f5">
    <label class="form-check-label" for="f53">單選4</label>
  </div>
</div>

     

  6. 本單元先將有用到的類型輸入，待看出規則後，再來套用樣版語法，讓後面要做的其他管理系統也可以套用該樣版。
    在 form_custom.html 把結構先註解以利處理
     

    <!-- 
   let stru = [
    { title: '流水號', type: '' },//sn
    { title: '客戶名稱', type: '文字' },//title
    { title: '客戶電話', type: '文字' },//tel
    { title: '客戶地址', type: '文字' },//addr
    { title: '備註', type: '文字' },//ps
  ];
 -->

     

  7. 表單主架構

    
<form action="<?!= global['url'] ?>" id="myForm" class="mb-5" method="POST">
  <div class="row">
    
    
    <div class="col-md-12 d-grid">
      <button id="submit" type="submit" class="btn btn-primary btn-block">送出</button>
    </div>
  </div>
</form>
  8. 畫面

  9. 每個表單欄位，視為元件，按類型套入即可, 客戶管理用到 隱藏、簡答、段落三種類別，另 下拉選單、單選、複選，待這裡處理好後，再來擴充。

  10. form_custom.html
    把元件放入後，將 label、name、id置換掉，其他如 value、placeholder、是否必填、表單說明再依需求設定在「表單結構」中，
    最終我們希望達到，設定「表單結構」，然後表單畫面自動完成。

    <!-- 
   let stru = [
    { title: '流水號', type: '' },//sn
    { title: '客戶名稱', type: '文字' },//title
    { title: '客戶電話', type: '文字' },//tel
    { title: '客戶地址', type: '文字' },//addr
    { title: '備註', type: '文字' },//ps
  ];
 -->

<form action="<?!= global['url'] ?>" id="myForm" class="mb-5" method="POST">
  <div class="row">
    <!-- 隱藏 流水號 -->
    <input type="hidden" name="sn" id="sn" value="">    

    <!-- 簡答  -->
    <div class="col-md-4 mb-3">
      <label>
        客戶名稱
        <span class="text-danger"> *</span>
        <span class="text-danger"> (表單說明)</span>
      </label>
      <input type="text" class="form-control" name="title" id="title" value="表單預設值" placeholder="表單暫留字">
    </div>
        

    <!-- 簡答  -->
    <div class="col-md-4 mb-3">
      <label>
        客戶電話
        <span class="text-danger"> *</span>
        <span class="text-danger"> (表單說明)</span>
      </label>
      <input type="text" class="form-control" name="tel" id="tel" value="表單預設值" placeholder="表單暫留字">
    </div>

    <!-- 簡答  -->
    <div class="col-md-4 mb-3">
      <label>
        客戶地址
        <span class="text-danger"> *</span>
        <span class="text-danger"> (表單說明)</span>
      </label>
      <input type="text" class="form-control" name="addr" id="addr" value="表單預設值" placeholder="表單暫留字">
    </div>
    
    <!-- 段落 -->
    <div class="col-md-12 mb-3">
      <label>
        備註
        <span class="text-danger"> *</span>
        <span class="text-danger"> (表單說明)</span>
      </label>
      <textarea class="form-control" name="ps" id="ps" rows="3" placeholder="表單暫留字">表單預設值</textarea>
    </div>
    
    <div class="col-md-12 d-grid">
      <button id="submit" type="submit" class="btn btn-primary btn-block">送出</button>
    </div>
  </div>
</form>
  11. 畫面

 

 

 

prev12. Bootstrap Table(二)
14. 表單頁面(二)next

友善列印 & 下載 PDF 匯出 MarkDown 格式