JavaScript 系列一：第4課

by tp655998

HTML

<fieldset class="order-online">
   <legend>線上下單</legend>
   <input type="text" id="user-name" placeholder="您的姓名" value="">
   

  <section class="info-group">
    <select id="order-info-category" required>
      <option selected disabled hidden value="">選擇服裝分類</option>
      <option value="男裝">男裝</option>
      <option value="女裝">女裝</option>
    </select>

    <select id="order-info-type" required>
       <option selected disabled hidden value="">選擇服裝類型</option>
       <option value="外套">外套</option>
       <option value="上衣">上衣</option>
       <option value="下身">下身</option>
    </select>
  </section>

  <section class="function-group">
    <button class="btn order" onclick="order()">我要訂購</button>
    <button class="btn about" onclick="about()">認識工廠</button>  
  </section>
  
  <dl id="order-detail">
    <h3>您的訂單</h3>
    <dt>顧客姓名：<span id="order-detail-name"></span></dt>
    <dt>服裝分類：<span id="order-detail-category"></span></dt>
    <dt>服裝類型：<span id="order-detail-type"></span></dt>
  </dl>  
</fieldset>

CSS

button{
  border: none;
}
html{
  height: 100%;
}
body{
  height: 100%;
  background-color: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}
.order-online{
  background-color: rgba(255, 255, 255, .35);
  display: grid;
  grid-template-columns: 3fr;
  border-radius: .5rem;
  padding: 1rem;
  border: 1px solid #666;
}

#user-name, select{
  padding: .5rem;
  border: 1px solid #aaa;
  border-radius: .5rem;
}

.info-group{
  margin-top: .5rem; 
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.function-group{
  margin-top: .5rem; 
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 0.5rem;
}


.btn{
  padding: .5rem;
  background-color: #fff;
  border: 1px solid #aaa;
  border-radius: .5rem;
}

.btn:hover{
  background-color: #333;
  color: #fff;
  cursor: pointer;
}

.order{
  background-color: #EBB471;
}
#order-detail{
  border-top: 1px dashed #000;
  font-size: .9rem;
  display: none;
}

#order-detail h3{
  text-align: center;
  font-size: 1rem;
}

JavaScript

function order()
{
	const username = document.getElementById('user-name').value;  
 	const orde_info_category = document.getElementById('order-info-category').value;
  const order_info_type = document.getElementById('order-info-type').value;
  
  if(username != '' && orde_info_category != '' && order_info_type != ''){
    alert(username + '您好！' + '謝謝您對我們的衣服有興趣！請致電 0987-654-321，會有專人提供您報價！');
    show_order_detail(username, orde_info_category, order_info_type);  
  }
  else{
  	alert(username + '您好！' + '請確認每個欄位皆有確實填寫再繼續！');
  }

  
}

function show_order_detail(username, category, type)
{  
  let order_detail_name = document.getElementById('order-detail-name');
  order_detail_name.innerHTML = username;
  
  let order_detail_category = document.getElementById('order-detail-category');
  order_detail_category.innerHTML = category;
  
  let order_detail_type = document.getElementById('order-detail-type');
  order_detail_type.innerHTML = type;
  
  let order_detail = document.getElementById('order-detail');
  order_detail.style.display = "initial";
  
}

function about()
{
  alert('我們工廠位於新北市，通過國際 ISO9001 認證，品質讓您放心！');
}