I have some javascript alert code that displays an alert if a checkbox is not checked if a user tries to click on confirm button and it works fine on desktop but on mobile view/devices, it doesn't work and I tried adding touchstart, touch, touchend into the javascript next to click but nothing seems to work when testing it on my mobile, my code is below if anyone can help, please.
$(document).ready(function() {
$('#confirmcheckout').on('click touchend', function() {
if ($('#terms-condition').prop('checked') == true) {
} else {
alert("To proceed you must accept the terms.")
}
});
})
Thank you in advance
I'm guessing that 'click touchend' could be firing twice on mobile.
This might help:
$(document).ready(function() {
$('#confirmcheckout').on('click touchend', function(event) {
event.stopPropagation();
event.preventDefault();
if ($('#terms-condition').prop('checked') == true) {
} else {
alert("To proceed you must accept the terms.")
}
});
})
EDIT: Another possible solution:
$(document).ready(function() {
$('#confirmcheckout').on('touchend click', function(event) {
if(event.type == 'touchend') {
$(this).off('click');
}
if ($('#terms-condition').prop('checked') == true) {
} else {
alert("To proceed you must accept the terms.")
}
});
})
(if touchend works, remove click)
Think I just solved it with the following code
<input id="terms-condition" type="checkbox" onclick="validate()" name="terms_condition" value="1" required="required" class="custom-control-input" {!! set_checkbox('terms_condition', '1') !!}>
<button class="checkout-btn btn btn-primary btn block btn-lg" onclick="validate()" data-attach-loading="disabled" data-checkout-control="confirm-checkout" data-request-form="#checkout-form" id="confirmcheckout">Confirm</button>
function validate() {
if (document.getElementById('terms-condition').checked) {
alert("Thank you for agreeing to the terms");
} else {
alert("To proceed, you must accept the terms.");
}
}
It seems to work on both mobile and desktop view