OnBeforeUnload if qty inputs are differents of 0_问答_开发者

OnBeforeUnload if qty inputs are differents of 0

开发者 https://www.devze.com 2023-03-21 08:13 出处：网络

I have html table like this : <table border=\"1\"> <tr> <td>Prod name </td> <td>Qty</td>

I have html table like this :

<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" max开发者_高级运维length="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>

and I want to avoid that user quit the page when there is a quantity typed in the qty input fields.

(I have to show a message only if a quantity field is not 0).

With jQuery you could:

$(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';
    }
});

However https://developer.mozilla.org/en/DOM/window.onbeforeunload

Note that in Firefox 4 and later the returned string is not displayed to the user. See Bug 588292.

Added AJAX when non-zero - NOT tested

<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>