new.hbs

<div class="row">
  <div class="col-3 text-right">
    <p>*必填欄位</p>
  </div>
  <div class="col-6 text-center">
    <h4>請輸入你的新增支出</h4>
  </div>
</div>
<div class="row mt-2">
  <form method="POST" action="/record" class="col-12">
    <div class="form-group">
      <label class="text-md-right col-12 col-md-4" for="name">*名稱 : </label>
      <input class="col-12 col-md-4" type="text" id="name" name="name" required>
    </div>
    <div class="form-group">
      <label class="text-md-right col-12 col-md-4" for="date">*日期 : </label>
      <input class="col-12 col-md-4" type="date" id="date" name="date" required>
    </div>
    <div class="form-group">
      <label class="text-md-right col-12 col-md-4" for="amount" min="1">*金額 : </label>
      <input class="col-12 col-md-4" type="number" id="amount" name="amount" min="1" tep="1" required>
    </div>
    <div class="form-group">
      <label class="text-md-right col-12 col-md-4" for="category"> *類型 : </label>
      <select class="custom-select col-12 col-md-4" id="category" name="category">
        <option selected disabled> 請選擇類別 </option>
        {{#each category}}
        <option value="{{this.name}},{{this.icon}}">{{this.name}}</option>
        {{/each}}
      </select>
    </div>
    <div class="form-group d-flex align-items-start">
      <label class="text-md-right text-md-top col-12 col-md-4" for="description" min="1">備註 : </label>
      <textarea type="text" id="description" name="description" class="col-12 col-md-4" rows="3"></textarea>
    </div>
    <div class="d-flex justify-content-center">
      {{!-- <button type="submit" class="btn btn-info">Submit</button> --}}
      <button class="btn btn-info create-btn" data-toggle="modal" type="button"
        data-target="#exampleModal">Submit</button>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title m-2">確認新增:</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
          </div>
          <div class="modal-footer justify-content-center">
            <button type="submit" class="btn btn-info">Submit</button>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>

<script>
  const createBtn = document.querySelector('.create-btn')

  function createPrompt(e) {
    const name = document.querySelector('#name').value
    const date = document.querySelector('#date').value
    const amount = document.querySelector('#amount').value
    const category = document.querySelector('#category').value
    const categoryArry = category.split(',')
    const description = document.querySelector('#description').value
    document.querySelector('.modal-body').innerHTML = `
  <p>*名稱 : <span>${name}</span></p> 
  <p>*日期 : <span>${date}</span></p> 
  <p>*金額 : <span>${amount}</span></p> 
  <p>*類型 : <span>${categoryArry[0]}</span></p> 
  <p>備註 : <span>${description}</span></p> 
  `
  }

  createBtn.addEventListener('click', createPrompt)
</script>