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

score 1 · Answer 1 · answered Mar 18 '15 at 21:24

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>

phixr · Accepted Answer · 2015-03-18T21:49:57.710

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.

Looks like `$.serialize()` doesn't include the submit button value. You might want to add a hidden input field: ``. — phixr, Mar 18 '15 at 21:41

score 0 · Answer 3 · edited May 23 '17 at 10:24

0

Not an answer, just a long comment:

Here are some good posts for getting the basics of AJAX:

A simple example

More complicated example

Populate dropdown 2 based on selection in dropdown 1

edited May 23 '17 at 10:24

Community

1
1

answered Mar 18 '15 at 21:38

cssyphus

37,875
18
96
111

Will give these a read through. Thank you for taking the time to list them. – Cory A Mar 18 '15 at 21:44

Delay Form Input With jQuery And Display Results On Same Page After Delay

3 Answers3