Question

我有一个购物车，其中包含一个表单字段和每行的复选框。如果客户想要修改他们订购的产品的数量，则表单字段控制可以编辑的数量，并且复选框选择该项目，以将项目丢弃在愿望清单中，或者将其删除。 “添加到愿望”列表和“删除功能”与此特定问题分开。

我正在做的是检测表单何时更改，然后在页面上定位每个锚标记和按钮，因此如果项目已被修改，脚本将停止点击并弹出一个bootstrap模式，提醒用户他们的购物车中的某些内容已被修改。

HTML （购物车行，通过JSTL forEach循环运行，但标记为此）：

<table>
<form id="shoppingCart" action="updateTheCart.action">
     <c:forEach var="item" items="${shoppingCart.items}" varStatus="status">
          <tr class="cart-row">
               <td class="remove" data-label="Remove">
                    <label>
                         <input type="checkbox" name="removeFlag(<c:out value="${status.count}"/>)" value="true"/>
                    </label>
               </td>
               <td class="title" data-label="Title">
                    ${item.value.sellableGood.name}
               </td>
               <td class="qty" data-label="Quantity">
                    <input type="num" class="form-control qty-input" name="quantity(<c:out value="${status.count}" />)" value="<c:out value="${item.value.quantity}" />"/>    
               </td>
               <td class="subtotal" data-label="Line Total">
                    <fmt:formatNumber type="currency" pattern="$#,##0.00" value="${item.value.itemExtendedTotal}" />
               </td>
          </tr>
     </c:foreach>
</table>

<p><a href="checkout.action" id="checkout">Checkout</a></p>
<p><button type="submit" id="checkout">Update Cart</button></p>
<p><button id="addToWishlist" type="submit" id="wish-list">Add To Wish List</button></p>
<p><a href="/" id="shop-more">Chontinue Shopping</a></p>
</form>

JS：

$("#shoppingCart :input").change(function() {
     $("#shoppingCart").data("changed",true);
});

我知道我错过了很多，但我真的不知道从哪里开始。

Answer 1

您可以尝试onbeforeunload Event

$('input').change(function() {
    if( $(this).val() != "" )
        window.onbeforeunload = "Are you sure you want to leave?";
});

Answer 2

使用Javascript：

;[].forEach.call(document.querySelectorAll('a, button'), function(element) {
  //do something with buttons and links, for example:
  element.setAttribute('data-changed', true')
});

jquery等价物是：

$('a, button').each(function(element) {})

要观看更改表单，我会使用blur事件，这是焦点的反面：

;[].forEach.call(document.querySelectorAll('#myForm input'), function(element) {
  element.addEventListener('blur', function(event) {
    //something has changed
  })
});

Jquery的：

$('#myForm input').on('blur', function(event) {})

如何定位页面上的每个链接和按钮？

2 个答案: