I have the following code for the user to register attendance at work. This registration is done by reading a card with a bar code.

let $scannerInput = $(".scanner-input");
  
$(document).ready(function(){
  $scannerInput.focus();
});

function inserir_assid()
  {
  
    var ColabAssid = $("input[name='ColabAssid']").val();
  
    var dadosajax = {
      'ColabAssid' : $("#ColabAssid").val()
    };
  
    $.ajax({
      url: 'insertAssid.php',
      type: 'POST',
      cache: false,
      data: dadosajax,
      error: function(){
  
      },
      success: function(result)
      { 
        $.ajax({
          url:"entradacol.php",  
          method:"POST",
          cache: false,
          data: {ColabAssid:ColabAssid},                                
          dataType:"json",  
          success:function(data){
  
            if(data[i][0] == '' && data[i][1] == ''){
  
              var linha = ``;
  
              for (var i = 0; i < data.length; i  ) {
                Entrada = data[i][0];
                HoraEntrada = data[i][1];
  
                linha  = `Entrada em ${Entrada} às ${HoraEntrada}`;
              }
              $('#minhaDiv99').hide();
              $('#minhaDiv100').show();
              $(".horaentrada").html(linha);
            }else{
              var linha = ``;
  
            for (var i = 0; i < data.length; i  ) {
              Saida = data[i][0];
              HoraSaida = data[i][1];
  
              linha  = `Saída em ${Saida} às ${HoraSaida}`;
            }
            }
            
            $('#minhaDiv99').hide();
            $('#minhaDiv101').show();
            $(".horasaida").html(linha);
          }
        })
      }
    });
  }

.lnr {
  margin-top: 5%;
  font-size: 1000% !important;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/pe-icon-7-stroke/dist/pe-icon-7-stroke.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form name="form" method="post" action="">
  <input type="text" name="ColabAssid"  id="ColabAssid" value="" style="opacity: 0; position: absolute; top: 0; left: 0">
  <button type="submit"  onclick="inserir_assid();"> <i ></i></button>
</form>

Everything works fine, but I intended, after inserting it into the database, to show the message that is inside the success, returned by json.

But as the button is of type submit, it does not return the message that is inside the success. I wanted it to show the message and only update after 5 seconds.

Is it possible to do that?

CodePudding user response：

So you want to make 3 ajax calls instead of 1 submit 2 ajax calls.

In your case, we convert the form submit to an ajax call.

let $scannerInput = $(".scanner-input");

$(document).ready(function() {
  $scannerInput.focus();
});


function start_sequence() {
  var dadosajax = {
    'ColabAssid': $("#ColabAssid").val()
  };

  $.ajax({
    url: '',
    type: 'POST',
    cache: false,
    data: dadosajax,
    success: inserir_assid
  })
}

function inserir_assid() {

  var ColabAssid = $("input[name='ColabAssid']").val();

  var dadosajax = {
    'ColabAssid': $("#ColabAssid").val()
  };

  $.ajax({
    url: 'insertAssid.php',
    type: 'POST',
    cache: false,
    data: dadosajax,
    success: function(result) {
      $.ajax({
        url: "entradacol.php",
        method: "POST",
        cache: false,
        data: {
          ColabAssid: ColabAssid
        },
        dataType: "json",
        success: function(data) {

          if (data[i][0] == '' && data[i][1] == '') {

            var linha = ``;

            for (var i = 0; i < data.length; i  ) {
              Entrada = data[i][0];
              HoraEntrada = data[i][1];

              linha  = `Entrada em ${Entrada} às ${HoraEntrada}`;
            }
            $('#minhaDiv99').hide();
            $('#minhaDiv100').show();
            $(".horaentrada").html(linha);
          } else {
            var linha = ``;

            for (var i = 0; i < data.length; i  ) {
              Saida = data[i][0];
              HoraSaida = data[i][1];

              linha  = `Saída em ${Saida} às ${HoraSaida}`;
            }
          }

          $('#minhaDiv99').hide();
          $('#minhaDiv101').show();
          $(".horasaida").html(linha);

          setTimeout(function() {
            // location reload?
            // remove message?
          }, 5000)
        }

      })
    }
  });
}

.lnr {
  margin-top: 5%;
  font-size: 1000% !important;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/pe-icon-7-stroke/dist/pe-icon-7-stroke.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form name="form" method="post" action="" onsubmit="start_sequence(); return false">
  <input type="text" name="ColabAssid"  id="ColabAssid" value="" style="opacity: 0; position: absolute; top: 0; left: 0">
  <button type="submit" > <i ></i></button>
</form>

See 2 short examples about submitting a form and possibly canceling in my recent answer