How to give setTimeout in form submit? If there is such a

Question

How to give setTimeout in form submit? If there is such a

Navigation

#1 by (1 votes)

1

I have the following code and I would like to know how to make após o click no button enviar appear the message Login successfully! and after 3 seconds the form is sent:

function validarLogin(strLogin,strSenha) {

        if(strLogin == "") { 
            document.getElementById('login').style.borderColor = "red";
            document.frmLogin.txtLogin.focus();
            document.getElementById('strong1').style.display = "block";
            document.getElementById('sucesso').style.visibility = "hidden";
            return false;
        }
        else if(strSenha == "") { 
            document.getElementById('senha').style.borderColor = "red";
            document.frmLogin.txtSenha.focus();
            document.getElementById('strong2').style.display = "block";
            document.getElementById('sucesso').style.visibility = "hidden";
            return false;
        }
        else { 
            document.getElementById('sucesso').style.visibility = "visible";
            return true;
        }   
                                                        
    }                                                           

    function input1() {
        var strLogin = document.getElementById('login').value; 
        if(strLogin !== "") {
            document.getElementById('strong1').style.display = "none";
            document.getElementById('login').style.borderColor = "green";
        } 
        else {
            return false;
        }
    }

    function input2() {
        var strSenha = document.getElementById('senha').value;
        if(strSenha !== "") {
            document.getElementById('strong2').style.display = "none";
            document.getElementById('senha').style.borderColor = "green";
        }
        else {
            return false;
        }
    }

    function delay() {
        var form = document.getElementById('form');
        form.submit();
        return validarLogin();
    }

    function forml() {
        var form = document.getElementById('form');
        form.addEventListener('submit', function(e) {
            e.preventDefault();
            setTimeout(delay, 2000);
        }); 
    }

#box {
        background-color: #28B2A1;
        padding: 10px;
        border-radius: 6px; 
        margin-top: 25%;
    }
    strong {
       display: none;
       color: red; 
    }
    .btn {
        margin: 0 auto;
    }
    #sucesso {
        visibility: hidden;
        color: #28B2A1;
        background-color: #fff;
        padding: 10px;
        border-radius: 6px;        
    }
    samp{
        font-weight: bolder;
    }

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
        <div class="row justify-content-center">
            <div class="col-md-4 col-xs-12" id="box">
                <h4 class="text-center" id="sucesso">Login realizado com sucesso!</h4>
                <form name="frmLogin" id="form" action="validar_login_js.html" method="post" onsubmit="return validarLogin(txtLogin.value,txtSenha.value);">
                    <samp><label for="login">LOGIN</label></samp>
                    <input type="text" class="form-control" id="login" name="txtLogin" value="Fulano" onfocus="this.value='';" onblur="input1()">
                    <strong id="strong1">Preencha corretamente o campo Login!</strong id="strong1"><br>
                    <samp><label for="senha">SENHA</label></samp>
                    <input type="password" class="form-control" id="senha" name="txtSenha" value="123456" onfocus="this.value='';" onblur="input2()">
                    <strong id="strong2">Preencha corretamente o campo Senha!</strong><br><br>       
                    <p class="text-center"><input type="submit" class="btn btn-warning" name="btnEnviar" value="Enviar" id="enviar">&nbsp;&nbsp;&nbsp;<input type="reset" class="btn btn-secondary" name="btnLimpar" value="Resetar"></p>
                </form>
            </div>
        </div>
    </div>

javascript

asked by anonymous 18.05.2018 / 21:43

1 answer

Problem with updating a Fragment ___ ___ erkimt Picker synchronized React Native ______ qstntxt ___

I have a JSON with all states and cities. I want to make when selecting the state it shows me only the cities regarding the state already selected select. My code prints the cities. with %code% , but the return is %code% .

The following information.

JSON

%pre%

Code:

%pre%

______ azszpr301442 ___

Here's the solution I've implemented. I separated the Picker from States and Cities. Each one in different components.

CITIES

%pre%

STATES

%pre%

Then I called them on my screen this way.

%pre%

___

score 1 · Accepted Answer

Before you have to call the forml() function that activates addEventListener when loading the page. Also, the delay() function is not available, since you can do everything in the event:

(function forml() {
  var form = document.getElementById('form');
  form.addEventListener('submit', function(e) {
      e.preventDefault();
      var form = document.getElementById('form');
      var txtLogin = document.getElementById('login').value;
      var txtSenha = document.getElementById('senha').value;
      if(validarLogin(txtLogin,txtSenha)) setTimeout("form.submit()", 3000);
  }); 
}())

Change the value of setTimeout from 2000 to 3000 (3 seconds).

You also have to send the parameters in the same way you are doing in onsubmit of form to return validation, as shown in the code snippet:

...
var txtLogin = document.getElementById('login').value;
var txtSenha = document.getElementById('senha').value;
if(validarLogin(txtLogin,txtSenha)) setTimeout("form.submit()", 3000);
...

So you will only submit the form if the return of the validarLogin function is true .

Let's see it working:

function validarLogin(strLogin,strSenha) {

        if(strLogin == "") { 
            document.getElementById('login').style.borderColor = "red";
            document.frmLogin.txtLogin.focus();
            document.getElementById('strong1').style.display = "block";
            document.getElementById('sucesso').style.visibility = "hidden";
            return false;
        }
        else if(strSenha == "") { 
            document.getElementById('senha').style.borderColor = "red";
            document.frmLogin.txtSenha.focus();
            document.getElementById('strong2').style.display = "block";
            document.getElementById('sucesso').style.visibility = "hidden";
            return false;
        }
        else { 
            document.getElementById('sucesso').style.visibility = "visible";
            return true;
        }   
                                                        
    }                                                           

    function input1() {
        var strLogin = document.getElementById('login').value; 
        if(strLogin !== "") {
            document.getElementById('strong1').style.display = "none";
            document.getElementById('login').style.borderColor = "green";
        } 
        else {
            return false;
        }
    }

    function input2() {
        var strSenha = document.getElementById('senha').value;
        if(strSenha !== "") {
            document.getElementById('strong2').style.display = "none";
            document.getElementById('senha').style.borderColor = "green";
        }
        else {
            return false;
        }
    }

   (function forml() {
     var form = document.getElementById('form');
     form.addEventListener('submit', function(e) {
         e.preventDefault();
         var form = document.getElementById('form');
         var txtLogin = document.getElementById('login').value;
         var txtSenha = document.getElementById('senha').value;
         if(validarLogin(txtLogin,txtSenha)) setTimeout("form.submit()", 3000);
     }); 
   }())

#box {
     background-color: #28B2A1;
     padding: 10px;
     border-radius: 6px; 
     margin-top: 25%;
 }
 strong {
    display: none;
    color: red; 
 }
 .btn {
     margin: 0 auto;
 }
 #sucesso {
     visibility: hidden;
     color: #28B2A1;
     background-color: #fff;
     padding: 10px;
     border-radius: 6px;        
 }
 samp{
     font-weight: bolder;
 }

<div class="container">
        <div class="row justify-content-center">
            <div class="col-md-4 col-xs-12" id="box">
                <h4 class="text-center" id="sucesso">Login realizado com sucesso!</h4>
                <form name="frmLogin" id="form" action="validar_login_js.html" method="post" onsubmit="return validarLogin(txtLogin.value,txtSenha.value);">
                    <samp><label for="login">LOGIN</label></samp>
                    <input type="text" class="form-control" id="login" name="txtLogin" value="Fulano" onfocus="this.value='';" onblur="input1()">
                    <strong id="strong1">Preencha corretamente o campo Login!</strong id="strong1"><br>
                    <samp><label for="senha">SENHA</label></samp>
                    <input type="password" class="form-control" id="senha" name="txtSenha" value="123456" onfocus="this.value='';" onblur="input2()">
                    <strong id="strong2">Preencha corretamente o campo Senha!</strong><br><br>       
                    <p class="text-center"><input type="submit" class="btn btn-warning" name="btnEnviar" value="Enviar" id="enviar">&nbsp;&nbsp;&nbsp;<input type="reset" class="btn btn-secondary" name="btnLimpar" value="Resetar"></p>
                </form>
            </div>
        </div>
    </div>