PreventDefault не работает после флажка «onchange» - PullRequest
Новая
       14

PreventDefault не работает после флажка «onchange»

0 голосов
/ 21 февраля 2019

Я работаю над jQuery-плагином signature-pad в моем модале.Я должен утвердить рецепт с моей подписью.У меня также есть флажок для подписи по умолчанию.если у меня есть какое-либо изображение для моей подписи в каталоге, оно покажет это изображение на модальной стороне с установленным по умолчанию флажком «установлен».Есть две возможности: подпись по умолчанию или нет: 1. Использовать подпись по умолчанию. 2. Снимите флажок и добавьте новую подпись.Если в любом случае панель подписи пуста, форма не будет отправлена ​​и выдаст сообщение об ошибке.

У меня проблема с функциональностью onchange, когда я изменяю статус checkBox на «снятие флажка» панели подписиПоказывается div, и если я оставляю его пустым и нажимаю кнопку «Сохранить», появляется сообщение об ошибке.Но когда я снова «проверяю» и «снимаю флажок», функция «PreventDefault» не работает, и форма отправляется с пустой подписью.

Мой код 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;  
          });
    }
});

Я также поставил return false, но форма все еще отправлена.Я сильно застрял в этом, я был бы признателен, если бы кто-нибудь из вас мог помочь / направить меня в этом.Спасибо,

1 Ответ

0 голосов
/ 21 февраля 2019

Попробуйте отключить кнопку, когда флажок не установлен, и включите кнопку, когда пользователь начинает писать на клавиатуре. 

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