[英]PreventDefault not working after checkbox "onchange"
I am working on signature-pad jQuery plugin in my modal.我正在我的模态中使用签名板 jQuery 插件。 I have to approve a prescription with my signature.我必须通过我的签名批准处方。 I have a checkbox as well for default signature.我也有一个用于默认签名的复选框。 if i have any image for my signature in directory it will show that image on modal with default checkbox "checked".如果我在目录中有任何签名图像,它将在模式上显示该图像,默认复选框“已选中”。 There are two possibilities either I will have a default signature or not: 1. Use the default signature 2. Uncheck the checkbox and add a new signature.有两种可能我是否有默认签名: 1. 使用默认签名 2. 取消选中复选框并添加新签名。 If the signature-pad is empty in any case the form will not submit and will prompt an error message.如果签名板在任何情况下都是空的,表单将不会提交并提示错误消息。
I have an issue with onchange functionality, when I change the checkBox status to "uncheck" the signature-pad div is showed and if i kept it empty and press save button it prompt me an error message.我有一个 onchange 功能问题,当我将复选框状态更改为“取消选中”时,签名板 div 显示,如果我将其保留为空并按下保存按钮,它会提示我一条错误消息。 But when I "check" and "uncheck" the checkbox again the "PreventDefault" function didnot work and the form is submitted with any empty signature-pad.但是,当我再次“选中”和“取消选中”复选框时,“PreventDefault”功能不起作用,并且提交的表单带有任何空的签名板。
My JavaScript code:我的 JavaScript 代码:
$('.already_signed').change(function(event) {
if (this.checked) {
$('.sign').hide(); // hide signaturepad
$(".already_signed").attr("checked", true); // checked the checkbox
$('.default_img').show(); // show the default image
document.getElementById('save').addEventListener("click", function (event) {
$('#sign_image').val(''); // if form is submitted with default signature keep the signature-pad hidden image input empty
document.getElementById('signature_alert').style.display = 'none'; // hide the error message as well
$('#signature_form').submit();
});
} else {
$('.sign').show(); // show signature-pad
$(".already_signed").attr("checked", false); // unchecked the checkbox
$('.default_img').hide(); // hide the default image
// jquery signature
var wrapper = document.getElementById("signature-pad"),
clearButton = wrapper.querySelector("[data-action=clear]"),
savePNGButton = wrapper.querySelector("[data-action=save-png]"),
saveSVGButton = wrapper.querySelector("[data-action=save-svg]"),
canvas = wrapper.querySelector("canvas"),
signaturePad;
signaturePad = new SignaturePad(canvas);
document.getElementById('save').addEventListener("click", function (event) {
if (signaturePad.isEmpty()) {
event.preventDefault();
var timePeriodInMs = 3000;
setTimeout(function()
{
document.getElementById("signature_alert").style.display = "none";
},
timePeriodInMs);
document.getElementById('signature_alert').style.display = 'block';
}
document.getElementById('signature_image').src = signaturePad.toDataURL();
var image = document.getElementById('signature_image').src;
document.getElementById('sign_image').value = image;
});
}
});
I also put return false, but still the form submitted.我也把 return false ,但仍然提交表单。 I am badly stuck in this, i would appreciate if any of you could help/ guide me in this.我在这方面深陷困境,如果你们中的任何人能在这方面帮助/指导我,我将不胜感激。 Thanks,谢谢,
Try disabling the button when checkbox is not checked and enable the button when user starts writing on pad.尝试在未选中复选框时禁用该按钮,并在用户开始在键盘上书写时启用该按钮。
$('.already_signed').change(function(event) {
if (!$("#checkbox").is(":checked")) {
$('input[type=submit]').attr('disabled', 'disabled');
}
});
var canvas = document.querySelector("canvas");
var signaturePad = new SignaturePad(canvas);
signaturePad.onBegin({$('input[type=submit]').removeAttr('disabled');});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.