Javascript 如果数量输入差异为0，则在卸载前启用_Javascript_Jquery

Javascript 如果数量输入差异为0，则在卸载前启用

javascript jquery

Javascript 如果数量输入差异为0，则在卸载前启用,javascript,jquery,Javascript,Jquery,我有如下html表格： <table border="1"> <tr> <td>Prod name </td> <td>Qty</td> <td>Add to cart </td> </tr> <tr> <td>product 1 </td> <td><input name="supe

我有如下html表格：

<table border="1">
  <tr>
    <td>Prod name </td>
    <td>Qty</td>
    <td>Add to cart </td>
  </tr>
  <tr>
    <td>product 1 </td>
    <td><input name="super_group[961]" type="text" class="input-text qty" title="Qty" value="0" size="5" maxlength="12"></td>
    <td><input type="submit" name="Submit" value="Envoyer" /></td>
  </tr>
  <tr>
    <td>product 2 </td>
    <td><input name="super_group[962]" type="text" class="input-text qty" title="Qty" value="0" size="5" maxlength="12"></td>
    <td><input type="submit" name="Submit2" value="Envoyer" /></td>
  </tr>
</table>


产品名称
数量
添加到购物车
产品1
产品2

我想避免用户在数量输入字段中输入数量时退出页面

（仅当数量字段不是0时，我必须显示消息）。

但是

请注意，在Firefox4和更高版本中，返回的字符串不会显示给用户。看

在非零-未测试时添加AJAX

<html>
  <head>
  <title></title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script type="text/javascript">
$(window).bind('beforeunload', function(e) { // thanks @Ghostoy for the jquery version of this
  var nonzero = false;
  $(".qty").each(function() { // selector assuming input with class qty
    if (this.value>0) {
      nonzero=true;
      return false; // leave the each
    }
  });
  if (nonzero) return "You have unsaved changes";
});  
$("input[id^='sg_']").each(function() {
  $(this).bind("keyup", function() {
      var disabled = isEmpty(this.value);
      $("#bt_"+this.id.split("_")[1]).attr("disabled",disabled); 
  });
});
$("input[id^='bt_']").each(function() {
  var itemId=this.id.split("_")[1]
  var val = $("#sg_"+itemId).val()
  $(this).attr("disabled",isEmpty(val);
  $(this).click(function() {
      $.get("add_to_cart.php?item="+itemId+"&qty="+$("#sg_"+itemId).val();
  });
});
function isEmpty(val) {
  return isNaN(val() || val=="" || val==null;
}

  </script>
  </head>
  <body>
  <form action="">
  <table border="1">
  <tr>
    <td>Prod name </td>
    <td>Qty</td>
    <td>Add to cart </td>
  </tr>
  <tr>
    <td>product 1 </td>
    <td><input name="super_group[961]" id="sg_961" type="text" class="input-text qty" title="Qty" value="0" size="5" maxlength="12"></td>
    <td><input type="button" id="bt_961" value="Envoyer" /></td>
  </tr>
  <tr>
    <td>product 2 </td>
    <td><input name="super_group[962]" id="sg_962" type="text" class="input-text qty" title="Qty" value="0" size="5" maxlength="12"></td>
    <td><input type="button" id="bt_962" value="Envoyer" /></td>
  </tr>
</table>
</form>
  </body>
</html>


$（window）.bind（'beforeunload'，function（e）{//感谢@Ghostoy提供了此版本的jquery
var非零=假；
$（“.qty”）.each（函数（）{//selector假设输入带有类qty
如果（该值>0）{
非零=真；
return false；//保留每个
}
});
如果（非零）返回“您有未保存的更改”；
});  
$（“输入[id^='sg_']）{
$（this.bind（“keyup”，function（））{
var disabled=isEmpty（此.value）；
$（“#bt_u”+this.id.split（“”）[1]）.attr（“disabled”，disabled）；
});
});
$（“输入[id^='bt\']”）。每个（函数（）{
var itemId=this.id.split（“”）[1]
var val=$（“#sg"+itemId）.val（）
$（this.attr（“disabled”），isEmpty（val）；
$（此）。单击（函数（）{
$.get（“将_添加到_cart.php？item=“+itemId+”&qty=“++$”（“#sg_u”+itemId）.val（）；
});
});
函数为空（val）{
返回isNaN（val（）| | val==“”| | val==null；
}
产品名称
数量
添加到购物车
产品1
产品2

使用jQuery，您可以：

$(window).bind('beforeunload', function(e) {
    var prompt = false;
    $('input.qty').each(function(i, input) {
      if ($(input).val() != '0') {
          prompt = true;
      }
    });
    if (prompt) {
        return e.returnValue = 'Some warning message';
    }
});

啊，我想bind更为一致。@Ghostoy:谢谢，它可以工作，但信息在中不可见firefox@Bizboss改进了IE/FF4的代码-兼容性。Firefox 4及更高版本返回的字符串不会显示给用户。请参阅。@Ghostoy:我看不到解决此Firefox问题（错误）的方法！：（请参阅我的更新以了解消息本身不可用的原因。）shown@mplungjan：非常感谢，现在已经清楚了。另一个小问题：我如何才能禁用按钮上的消息单击“添加到购物车”（当然，当数量不为空时）：）啊，你应该将添加到购物车而不是离开页面。