表格提交延迟

Question

i am trying to submit form after 10 seconds with form value. I am not able to include setTimeout with submit function.

setTimeout(function() {
  $('#FrmID').submit();
}, 10000);
$(document).ready(function() {
  $("#submit").click(function() {
    var grp_id = $("#grp_id").val();
    var datastr = 'grp_id=' + grp_id;

    $.ajax({
      type: 'POST',
      url: 'start_calculate.php',
      data: datastr,
      success: function() {
        //$("#msg").html("Student Successfully Added");
        //$("#msg").html("response");
      }

    });


  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="FrmID" id="FrmID">
  <input type="hidden" value="<?php echo $grp_id; ?>" name="grp_id" />
  <button type="submit" name="done" class="btn btn-sm btn-success" id="submit">Done !</button>
</form>

</div>

Answer 1

You can create a function for submit, then call it after click on success:

$(document).ready(function() {

  function submitForm() {
    setTimeout(function() {
      $('#FrmID').submit();
    }, 10000);
  }

  $("#submit").click(function() {
    var grp_id = $("#grp_id").val();
    var datastr = 'grp_id=' + grp_id;

    $.ajax({
      type: 'POST',
      url: 'start_calculate.php',
      data: datastr,
      success: function() {
        //$("#msg").html("Student Successfully Added");
        //$("#msg").html("response");
        submitForm();
      }

    });


  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="FrmID" id="FrmID">
  <input type="hidden" value="<?php echo $grp_id; ?>" name="grp_id" />
  <button type="submit" name="done" class="btn btn-sm btn-success" id="submit">Done !</button>
</form>

In Action:

$(document).ready(function() {

  function submitForm() {
    i = 1;
    setInterval(function() {
      console.log(i++);
    }, 1000);

    setTimeout(function() {
      $('#FrmID').submit();
      alert("Student Successfully Added");
    }, 10000);
  }

  $("#submit").click(function(e) {
    e.preventDefault();
    submitForm();

  });


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="FrmID" id="FrmID">
  <input type="hidden" value="<?php echo $grp_id; ?>" name="grp_id" />
  <button type="submit" name="done" class="btn btn-sm btn-success" id="submit">Done !</button>
</form>

---

And if you want to submit form automatically without press any key to submit you can try this. You should move your code inside the setTimeout function:

$(document).ready(function() {

  setTimeout(function() {

    $('#FrmID').submit(function() {
      var grp_id = $("#grp_id").val();
      var datastr = 'grp_id=' + grp_id;

      $.ajax({
        type: 'POST',
        url: 'start_calculate.php',
        data: datastr,
        success: function() {
          //$("#msg").html("Student Successfully Added");
          //$("#msg").html("response");
        }

      });
    });

  }, 10000);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="FrmID" id="FrmID">
  <input type="hidden" value="<?php echo $grp_id; ?>" name="grp_id" />
  <button type="submit" name="done" class="btn btn-sm btn-success" id="submit">Done !</button>
</form>

Or you can try delay()

$(document).ready(function() {

    $('#FrmID').delay(10000).submit(function() {
      var grp_id = $("#grp_id").val();
      var datastr = 'grp_id=' + grp_id;

      $.ajax({
        type: 'POST',
        url: 'start_calculate.php',
        data: datastr,
        success: function() {
          //$("#msg").html("Student Successfully Added");
          //$("#msg").html("response");
        }

      });
    });

});

</div>