PreventDefault not working after checkbox "onchange"

Question

I am working on signature-pad jQuery plugin in my modal. 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. 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. But when I "check" and "uncheck" the checkbox again the "PreventDefault" function didnot work and the form is submitted with any empty signature-pad.

My JavaScript code:

$('.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. I am badly stuck in this, i would appreciate if any of you could help/ guide me in this. Thanks,

Answer 1

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