JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<input type="text" class="qty" value="1">
JavaScript
(function($){
var confirmOnPageExit = function (e){
// If we haven't been passed the event get the window.event
e = e || window.event;
var message = 'Are you sure you don\'t want to add these item(s) to cart?';
// For IE6-8 and Firefox prior to version 4
if (e)
{
console.log('event retun value assigned');
e.returnValue = message;
}
// For Chrome, Safari, IE8+ and Opera 12+
return message;
};
function isAnyInputHasValue(){
var hasSomeQty = false;
var qtyInputs = $('input.qty');
if(qtyInputs.length > 0){
qtyInputs.each(function(){
if($(this).val().length > 0){
hasSomeQty = true;
return false;
}
});
}
return hasSomeQty;
}
$(document).ready(function(){
var shouldConfirm = isAnyInputHasValue();
if(shouldConfirm){
window.onbeforeunload = confirmOnPageExit;
//$(window).on('beforeunload', confirmOnPageExit);
}else{
window.onbeforeunload = '';
}
console.log('on page load ', shouldConfirm);
});
$(document).on('change', 'input.qty', function(){
var shouldConfirm = false;
if($(this).val().length > 0){
shouldConfirm = true;
}else{
shouldConfirm = isAnyInputHasValue();
}
if(shouldConfirm){
window.onbeforeunload = confirmOnPageExit;
}else{
window.onbeforeunload = '';
}
console.log('on unload ', shouldConfirm);
});
})(jQuery);