OnBeforeUnload如果數量輸入是0

型動物我有HTML表是這樣的：OnBeforeUnload如果數量輸入是0

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

，我想避免用戶退出頁面時，有在數量輸入字段中鍵入一個數量。

（我只有在數量字段不爲0時才顯示消息）。

來源

2011-07-20 Bizboss

看到我更新爲什麼消息本身沒有顯示 – mplungjan

然而https://developer.mozilla.org/en/DOM/window.onbeforeunload

注意，在Firefox 4及更高版本返回的字符串不會顯示給用戶。見Bug 588292。

添加了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>

來源

2011-07-20 07:39:57 mplungjan

在第一個解釋， return語句必須在每個循環之外.. – ChristopheCVB

我在想，謝謝 – mplungjan

@mplungjan：非常感謝，現在很清楚。另一個小問題：如何禁用消息點擊「添加到購物車」（當然，當qty不爲空）:) – Bizboss

使用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'; 
    } 
});

來源

2011-07-20 07:49:58 Ghostoy

啊，我認爲綁定更一致。 – mplungjan

@Ghostoy：謝謝，它的工作原理，但消息在Firefox中不可見 – Bizboss

@Bizboss改進了IE/FF4兼容性的代碼。 Firefox 4及更高版本返回的字符串不會顯示給用戶。參見[Bug 588292]（https://bugzilla.mozilla.org/show_bug.cgi?id=588292）。 – Ghostoy

OnBeforeUnload如果數量輸入是0

回答

相關問題