Onsubmit is not working

Question

I’m checking a form with the onsubmit, but even returning true He gives the Shadow. Follows the function calling on onsubmit:

function checkFormModal(){
        var senhaAtual = document.getElementById("senhaAtu").value;
        var alerta = document.getElementById("avisoSenhaDig");
        var usuario = document.getElementById("nomeUsuarioTestaSenha").value;
        var p = document.getElementById("p");
        var xmlreq = CriaRequest();

        xmlreq.open("GET", "../Controller/verificaSenhaUsuario.php?senha="+senhaAtual+"&nomeusu="+usuario, true);

        xmlreq.onreadystatechange = function(){
          if (xmlreq.readyState == 4) {
            if (xmlreq.status == 200) {
              if (xmlreq.responseText == "nao") {
                if (senhaAtual.length > 0) {
                  return false;
                }
                return false;
              }else if (xmlreq.responseText == "sim"){
                p.innerHTML = "true";
                return true;
              }
            }else{
              alerta.innerHTML = "ERRO: " + xmlreq.statusText;
              return false;
            }
          }
        };
        xmlreq.send(null);
        return false;

      }

It is to return true only if the Ext answer is yes, it enters the if that checks it (it gives the innerHTML in p) but it still doesn’t give the Ubmit in the form. Below is the form and how Onsubmit is made:

<form name="formSenha" role="form" onsubmit="return checkFormModal()" class="form" action="../Controller/editaSenhaUsuario.php" method="POST" autocomplete="off">

I would like to know why it does not give true Return. Thank you from now.

Answer 1

You will not be able to use the form Ubmit with Ajax because both are asynchronous. When you do Submit, the whole function is executed before the processing of Ajax, that is, before Ajax is processed, the last return false has already been sent back. Only then does Ajax enter the if with true, but then it’s too late because the function has already made the return of false.

In this case, you will have to do a manual Submit after processing Ajax. You need to send the form via this in the onsubmit in this way:

onsubmit="return checkFormModal(this)"

And include a parameter in the function:

function checkFormModal(form){...

The variable form will be the form element within the function. To my view, all those if’s checking nao and several false Returns become unnecessary, leaving only the last return false so that the form is not submitted when calling the function.

Reformulating the function, it would look like this, making a Submit when the return of Ajax is sim:

function checkFormModal(form){

        var senhaAtual = document.getElementById("senhaAtu").value;
        var alerta = document.getElementById("avisoSenhaDig");
        var usuario = document.getElementById("nomeUsuarioTestaSenha").value;
        var p = document.getElementById("p");
        var xmlreq = new XMLHttpRequest();
        var xmlreq = CriaRequest();

        xmlreq.open("GET", "../Controller/verificaSenhaUsuario.php?senha="+senhaAtual+"&nomeusu="+usuario, true);

        xmlreq.onreadystatechange = function(){
          if (xmlreq.readyState == 4) {
            if (xmlreq.status == 200) {
              if (xmlreq.responseText == "sim"){
                p.innerHTML = "true";
                form.submit();
              }
            }else{
              alerta.innerHTML = "ERRO: " + xmlreq.statusText;
            }
          }
        };
        xmlreq.send(null);

        return false;
}

Answer 2

If I understand what you want to do, what you need is your method checkFormModal() return true or false, and in the case of false the page is not sent.

If that’s what you need to do is something like this.

<form action="/*pagina*/" onsubmit="return checkFormModal(this)" method="post">

 /***Seus inputs***/
<input type="submit" value="Submit">

</form>