Delay Form Input With jQuery And Display Results On Same Page After Delay
Question
I am totally new to AJAX so I don't even know where to start. I've tried delaying the submission of the form with jQuery but then the script doesn't even recieve the POST request.
My index.php
<?php
include 'includes.php';
$user_mining_level = 16;
$user_id = 1;
if(isset($_POST['mine'])) {
if($user_mining_level == 1) {
$random_ore = rand(1, 2);
}
if($user_mining_level > 15) {
$random_ore = rand(1, 3);
}
$random = rand(1, 5);
$xp_gained = $random * $ore_xp["$random_ore"];
$random_ore_name = $ore["$random_ore"];
$stmt = $conn->prepare('UPDATE invy_ores SET `' . $random_ore_name . '` = `' . $random_ore_name. '` + ' . $random . ' WHERE user_id = :user_id');
$stmt->bindValue(":user_id", $user_id, PDO::PARAM_INT);
$stmt->execute();
$result = 'You\'ve managed to mine ' . $random . ' ' . $ore["$random_ore"] . ' and gained ' . $xp_gained . ' EXP!';
}
?>
<!DOCTYPE html>
<html>
<head>
<title>RuneScape Click Game</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<div id="result"><?php echo $result; ?></div>
<form action="index.php" method="POST" class="gather">
<input type="submit" name="mine" value="Mine" id="ajax_bt"/>
</form>
</body>
For this to work ideally I'd need the form submission to be delayed by about 3 seconds, and the data from the $result variable viewable within the <div id="result"></div> element. I've been searching for hours on how I could do this and I just cannot seem to find an answer. Could someone show me an example or steer me in the right direction?
EDIT:
This seems to inch towards what I want to do but the form is not functioning after the delay.
$(document).ready(function() {
$(".gather").submit(function (e) {
e.preventDefault();
var form = this;
$("<img src='loader.gif' alt='Loading...' />").appendTo("#result");
$("result").hide();
setInterval(function () {
form.submit();
}, 1000); // in milliseconds
});
});
3 answers
solution1
1 2015-03-18 21:24:21
Put an id on your form
<form action="index.php" id="myForm" method="POST" class="gather">
<input type="submit" name="mine" value="Mine" id="ajax_bt"/>
</form>
And in your javascript use set timeout
<script>
$('#myform').submit(function(ev){
ev.preventDefault();
setTimeout(function(){
$('#myform').submit();
},3000);
});
</script>
solution2
0 ACCPTED 2015-03-18 21:17:31
If you want to delay the form post you can use the setTimeout() javascript function.
$('form').submit(function(e){
e.preventDefault();
var form = $(this);
setTimeout(function(){
$.post('index.php',form.serialize(),function(html){
var result = $(html).find('#result').html();
$('#result').html(result);
});
},3000);
});
This will wait 3 seconds and then preform an ajax call that submits the form to your page.
You should also add a hidden input so it get posted to your page, as the submit button won't be included in $.serialize() :
<input type="hidden" name="mine" value="1" />
UPDATE:
Looking at your additional js code, I see the issue is with your onSubmit function. If you resubmit the form within that event handler, it will get caught again in the same event handler, over and over.
Use the .one() function. This only captures the event once.
$(document).ready(function() {
$(".gather").one('submit',function (e) {
e.preventDefault();
var form = this;
$("<img src='loader.gif' alt='Loading...' />").appendTo("#result");
$("result").hide();
setTimeout(function () {
form.submit();
}, 3000); // in milliseconds
});
});
Note: This doesn't use ajax, it simply delays the submission of the form for 3 secs.
solution3
0 2015-03-18 21:38:28
Not an answer, just a long comment:
Here are some good posts for getting the basics of AJAX:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.