0

I have created a simple HTML form for submitting php code that updates my mysql table.

The problem im having is that the timer Can start by simply refreshing (providing its not already counting down) the page which i do not want. I only want it to start upon submitting the form.

Requirements needed for this timer: First execute the php code upon clicking submit button. Then disable the form submit button for 30 seconds and then re-enable after the timer has finished. This timer is saved to localstorage i believe so it is not interrupted(doesnt start over)by page refresh once it is already counting down which is good.

Here is a image of the feature im using the timer on: (https://i.stack.imgur.com/eWALf.jpg)

Here is the js timer code:

<script>
var time = 30;
var saved_countdown = localStorage.getItem('saved_countdown');

if(saved_countdown == null) {
   
    var new_countdown = new Date().getTime() + (time + 2) * 1000;

    time = new_countdown;
    localStorage.setItem('saved_countdown', new_countdown);
} else {
    time = saved_countdown;
}
    var x = setInterval(() => {
    var now = new Date().getTime();
    var distance = time - now;
    var counter = Math.floor((distance % (1000 * 60)) / 1000);
    document.getElementById("demo").innerHTML = counter + " s"; 
    if (counter <= 0) {
        clearInterval(x);
        localStorage.removeItem('saved_countdown');
        document.getElementById("demo").innerHTML = "Available";
    }
}, 1000);
</script>

Here is how i have my html form setup:

<form action="" method="post">
            <label for="players">Select your weapon:</label>
                <select name="xWeapon">
                    <option value="" disabled selected>Choose option</option>
                    <option value="xKnife">Knife [FREE]</option>
                    <option value="xMachete">Machete [$15]</option>
                    <option value="xPistol">Pistol [$65]</option>
                    <option value="xMachine_gun">Machine Gun [$155]</option>
                </select><br><br>
            <input type="submit" name="link_to_php" value="Attempt">
        </form><br>
Phil Gibson
  • 1
  • 9
  • Disable the button in html code and only enable when the timer is 0. – Felippe Duarte Feb 05 '21 at 20:25
  • sorry can you adivse on how i could acheive this and also maybe you can point out as to why the timer starts counting down by a simple page refresh. assuming its not already counting down at point of page refresh – Phil Gibson Feb 05 '21 at 20:27
  • Check this https://stackoverflow.com/questions/36072896/jquery-js-php-disable-form-and-submit-button-only-after-submit – Labradorcode Feb 05 '21 at 20:32

1 Answers1

0

Set the button as disable by default. If you need to make it available the first time, then check if you have the button submit using $_POST values:

<?php $disable = isset($_POST['link_to_php']) ? '':'disabled'; ?>

<input type="submit" name="link_to_php" value="Attempt" id="myButton" <?=$disabled?>>

Enable when counter is 0:

if (counter <= 0) {
    ....
    document.getElementById('myButton').disabled = false;
Felippe Duarte
  • 14,901
  • 2
  • 25
  • 29
  • ty. so i didnt add disabled to the input line as i need the buttons 1st state to be enabled. and then once clicked to be disabled. which i achieved by editing your above example to: ``` if (counter <= 0) { clearInterval(x); localStorage.removeItem('saved_countdown'); document.getElementById("demo").innerHTML = "Available"; document.getElementById('myButton').disabled = false; } else if(counter >= 1) { document.getElementById('myButton').disabled = true; } ``` – Phil Gibson Feb 05 '21 at 20:41
  • problem im left with still is that when its not counting down. if i refresh the page. that alone activates the timer. how can i stop this?. – Phil Gibson Feb 05 '21 at 20:43
  • When you click "submit" the page will refresh and everything will restart from ground. What are you trying to do here? – Felippe Duarte Feb 05 '21 at 20:47
  • yes and when the submit button is clicked, therefore refreshing the page. the timer starts counting down. as it should. But.. if the timer is available (so not counting down). and the submit button is enabled for players use. at this point, i can activate the timer by simply refreshing the page. i Only want the timer to activate upon clicking the forms submit button – Phil Gibson Feb 05 '21 at 20:51
  • imagine you're playing Slots and theres a 30 second timer between each attempt. and the timer is up so you can then try your luck But.. you accidentally hit F5 and then the timer starts counting down again so you basically lost your go. and now you have to wait again. This is whats happening – Phil Gibson Feb 05 '21 at 20:53
  • Edited, take a look if this works for you – Felippe Duarte Feb 05 '21 at 20:58
  • ` >` & `$disable = isset($_POST['link_to_php']) ? '':'disabled'; //if(isset($_POST['link_to_php']))` commented out is my original code. uncommented is your code. and i receive * Undefined variable: disabled* on line 40 which is the input line. – Phil Gibson Feb 05 '21 at 21:18
  • not to worry im going to store the time in mysql db. ty for ur help :) – Phil Gibson Feb 05 '21 at 23:54