Javascript blocking required

Asked

Viewed 163 times

0

I’m having a strange problem. I added the function below to prevent the user from clicking more than once on Submit. But from the moment I added her, the required HTML5 and validate() stopped working in all fields. Someone would know why?

function block() {
        var button = document.getElementById("confirmar");
        button.removeAttribute("disabled");
        button.onclick = function() {
          if (!button.getAttribute("disabled") != "disabled") {
            button.setAttribute("disabled", "disabled");
            setTimeout(function() {
              button.removeAttribute("disabled");
            }, 5000);
            document.getElementById("cadastro").submit();
          }
        }
}

<body class="noheader" onload="moveRelogio(); getInfo(); document.cadastro.reset(); slide(); block()">
javascript html5

  • why don’t you put a Hide() on the Ubmit button next to the event click()?

  • in your case I think so document.getElementById('confirmar').style.display = 'none'; if Submit is that element confirm

  • of course within the event . onclick() there you have posted

  • I tried to change but it didn’t work, the button disappeared and it didn’t appear anymore...

  • Disappeared and the form was sent anyway

  • [...prevent the user from clicking more than once on Ubmit.. ] one click and then Hide, if the whole form is gone then that id='confirm' is the form id and not the input-Ubmit look there

Show 1 more comment

1 answer

1


In short, the disabled can take a lot of functionality from your page. For more information, the one searched on the internet. The correct is for you to add, in your file . js that your mastepage or _Layout renders, the function:

$(document).on({
submit: function () { $(this).find('[type="submit"]:not([ajax="true"])').prop('disabled', true); },
ready: function () { $(this).find('[type="submit"]').prop('disabled', false); }

});

In this case, all your pages that have Submit, will be blocked after the click.

Note that not([ajax="true"]) serves to not perform this procedure when your button has ajax=true, for example:

<button type="submit" class="btn btn-success btn-sm" id="btnSalvar" name="btnSalvar" value="Salvar" ajax="true">Salvar</button>

And to lock the button after the click, just take out the ajax

The Submit will lock and the ready will unlock.

I hope I’ve helped.

Browser other questions tagged javascript html5

You are not signed in. Login or sign up in order to post.