form submission with delay - php

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>

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");
}
});
});
});

Answer 2

The problem with your code is that you've not bound the submit handler to the form. Instead, you're binding it to the click event of the submit button.
You need to bind the handler code to the submit event of the form instead:
setTimeout(function() {
$('#FrmID').submit();
}, 10000);
$(document).ready(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");
}
});
});
});
<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>

Answer 3

You can use following code.
$(document).ready(function() {
$("#submit").click(function() {
setTimeout(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);
});
});
On click of submit just execute your code after delay.