window.confirm

by yshrkn

HTML

<form action="javascript: alert('Thanks for your order!')">
  <fieldset>
    <legend>Shopping Cart</legend>
    <ul id="shopping-list">
      <li>Macbook Pro</li>
      <li>iPhone 7 Plus</li>
    </ul>
    <input type="submit" id="order-btn" class="btn" value="Order">
  </fieldset>
</form>

CSS

.btn {
  padding: 5px;
  cursor: pointer;
}

#order-btn {
  display: inline-block;
  width: 100%;
}

JavaScript

/**
 * #order-btn ボタンをクリックすると、
 *
 * 「以下の内容でよろしいですか？
 * - #shopping-list のアイテム 1
 * - #shopping-list のアイテム 2」
 *
 * という確認ダイアログを表示し、
 * ユーザがYesを選択した場合にだけ、フォームが送信されるようにしてください。
 *
 */
 
var lists = document.querySelectorAll('#shopping-list > li');
var orderBtn = document.getElementById('order-btn');

orderBtn.addEventListener('click', function(e) {
  var products = lists.length ? "以下の内容でよろしいですか？\n" : "";

  for(var i = 0, len = lists.length; i < len; i++) {
    products += "- " + lists[i].textContent + "\n";
  }

  var result = window.confirm(products);

  if (!result) {
    e.preventDefault();
  }
});