how to Make a button disabled for 10 minutes even after refresh?

Started by msab, August 20, 2018, 03:58:22 AM

Previous topic - Next topic

msab

I want to disable button for 10 minutes after clicking on it and even on refresh it will remain disabled. How can i make it in javascript or jquery ? here is my code which works fine without refreshing but after refresh the page it breaks the 10 mins,hide the message and enable the button again !!

<html>
<input type='button' id='<?php echo $row['pid']; ?>' onclick="testMyAnswer(jQuery(this).attr('id'))" name='sub' value='SUBMIT'/>
  <script type="text/javascript"  src="https://code.jquery.com/jquery-3.3.1.min.js">
function testMyAnswer(pid) {
   var btn =jQuery('#'+pid);
btn.attr("disabled", true);
                btn.css('cursor','not-allowed');
                message.text('wrong answer, please wait 10 minutes before trying again');
                setTimeout(function() {
                    btn.removeAttr("disabled");
                    message.text('');
                }, 600000);


        }
</script>
</html>

Looking

Suppose the user has javascript disabled or placed certain limits on your site? If I were doing this I would do it in PHP with some custom code using a timestamp and check against their last try.

Kindred

Before this goes much further...   WHY do you want to do this?
What is the end goal and purpose?
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

Pipke

see this jsfiddle, it disables the submit button for 15 sec, change the code as desired to your example.
"If something is wrong, fix it if you can. But train yourself not to worry: Worry never fixes anything."

Click here to view my mods for SMF

Hey 👋 Did i helped... you like what i do. You can now buy me a coffee! ☕

Chen Zhen

For javascript/jQuery you can use a cookie or the newer window.sessionStorage method.

Here is an example using a cookie:

echo '
<input type="button" id="', $row['pid'], '" onclick="testMyAnswer(\'#', $row['pid'] ,'\', \'\')" name="sub" value="SUBMIT" />
<div id="message"></div>
<script type="text/javascript"  src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
if (getCookie("testMyAnswer") != "")
testMyAnswer("#', $row['pid'], '", "waiting");

function testMyAnswer(pid, waiting) {
$(pid).attr("disabled", true);
$(pid).css("cursor","not-allowed");
$("#message").text("wrong answer, please wait 10 minutes before trying again");
var newDate = new Date();
newDate.setTime(newDate.getTime() + (10 * 60 * 1000));
if (waiting == "")
{
setCookie("testMyAnswer", "waiting", 10);

setTimeout(function() {
$(pid).removeAttr("disabled");
$(pid).css("cursor", "pointer");
$("#message").text("");
setCookie("testMyAnswer", "", 60*24);
}, 600000);
}
}
function setCookie(cname, cvalue, exmins) {
    var d = new Date();
    d.setTime(d.getTime() + (exmins * 60 * 1000));
    var expires = "expires="+d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(";");
    for(var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == " ") {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}
</script>';


If you would prefer to use the more recent HTML5 web storage method then take a look at this link:
https://www.w3schools.com/html/html5_webstorage.asp


My SMF Mods & Plug-Ins

WebDev

"Either you repeat the same conventional doctrines everybody is saying, or else you say something true, and it will sound like it's from Neptune." - Noam Chomsky

Chen Zhen

Actually that did not delete the cookie properly.
However, this does:

echo '
<input type="button" id="', $row['pid'], '" onclick="testMyAnswer(\'#', $row['pid'] ,'\', \'\')" name="sub" value="SUBMIT" />
<div id="message"></div>
<script type="text/javascript"  src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
if (getCookie("testMyAnswer") != "")
testMyAnswer("#', $row['pid'], '", "waiting");
else
{
$("#', $row['pid'] ,'").removeAttr("disabled");
$("#', $row['pid'] ,'").css("cursor", "pointer");
$("#message").text("");
}

function testMyAnswer(pid, waiting) {
$(pid).attr("disabled", true);
$(pid).css("cursor","not-allowed");
$("#message").text("wrong answer, please wait 10 minutes before trying again");
if (waiting == "")
{
setCookie("testMyAnswer", "waiting", 10);

setTimeout(function() {
$(pid).removeAttr("disabled");
$(pid).css("cursor", "pointer");
$("#message").text("");
setCookie("testMyAnswer", "", 60*24);
}, 600000);
}
}
function setCookie(cname, cvalue, exmins) {
var d = new Date();
d.setTime(d.getTime() + (exmins * 60 * 1000));
var expires = "expires="+d.toUTCString();
if (cvalue == "")
document.cookie = cname + "=;expires=Thu, 01 Jan 1970 00:00:01 GMT;path=/";
else
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(";");
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == " ") {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
</script>';

My SMF Mods & Plug-Ins

WebDev

"Either you repeat the same conventional doctrines everybody is saying, or else you say something true, and it will sound like it's from Neptune." - Noam Chomsky

Chen Zhen


Just for kicks I wrote another example script that will use sessionStorage if it is available and falls back to cookies if it is not.
If you do not want to use cookies then this is a good solution for you.


echo '
<input type="button" id="', $row['pid'], '" onclick="testMyAnswer(\'#', $row['pid'] ,'\', \'\')" name="sub" value="SUBMIT" />
<div id="message"></div>
<script type="text/javascript"  src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
if (!Date.now)
Date.now = function() { return new Date().getTime(); }
if (getMyCookie("testMyAnswer") != "")
testMyAnswer("#', $row['pid'], '", "waiting");
else
{
$("#', $row['pid'] ,'").removeAttr("disabled");
$("#', $row['pid'] ,'").css("cursor", "pointer");
$("#message").text("");
}

function testMyAnswer(pid, waiting) {
$(pid).attr("disabled", true);
$(pid).css("cursor","not-allowed");
$("#message").text("wrong answer, please wait 10 minutes before trying again");
if (waiting == "")
{
setMyCookie("testMyAnswer", "waiting", 10);

setTimeout(function() {
$(pid).removeAttr("disabled");
$(pid).css("cursor", "pointer");
$("#message").text("");
setMyCookie("testMyAnswer", "", 60*24);
}, 600000);
}
}
function setMyCookie(cname, cvalue, exmins) {
if (typeof(Storage) !== "undefined")
{
var myTime = Math.floor(Date.now() / 1000);
if (cvalue == "")
{
sessionStorage[cname] = "";
}
else
sessionStorage[cname] = myTime;
}
else
{
var d = new Date();
d.setTime(d.getTime() + (exmins * 60 * 1000));
var expires = "expires="+d.toUTCString();
if (cvalue == "")
document.cookie = cname + "=;expires=Thu, 01 Jan 1970 00:00:01 GMT;";
else
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
}

function getMyCookie(cname) {
if (typeof(Storage) !== "undefined")
{
var myTime = Math.floor(Date.now() / 1000);
if (sessionStorage[cname])
{
if (myTime - Number(sessionStorage[cname]) < (10 * 60 * 1000))
return "waiting";
else
{
sessionStorage[cname] = "";
return "";
}
}
else
{
sessionStorage[cname] = "";
return "";
}
}
else
{
var name = cname + "=";
var ca = document.cookie.split(";");
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == " ") {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
}
</script>';

My SMF Mods & Plug-Ins

WebDev

"Either you repeat the same conventional doctrines everybody is saying, or else you say something true, and it will sound like it's from Neptune." - Noam Chomsky

msab

thank you soooo soooo much @Chen Zhen the second code using cookies works fine with me :D but when i add the rest of my code it gives me an error
here is the the whole code

                        <label for="answer" id="label<?php echo $row['pid']; ?>"><b>Enter Your Answer</b></label>
                        <input type="text" placeholder="Enter your answer" name="answer_<?php echo $row['pid'?>" ><br />
<?php
echo '
<input type="button" id="'
$row['pid'], '" onclick="testMyAnswer(\'#'$row['pid'] ,'\', \'\')" name="sub" value="SUBMIT" />
<div id="message"></div>
<script type="text/javascript"  src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
if (getCookie("testMyAnswer") != "")
testMyAnswer("#'
$row['pid'], '", "waiting");
else
{
$("#'
$row['pid'] ,'").removeAttr("disabled");
$("#'
$row['pid'] ,'").css("cursor", "pointer");
$("#message").text("");
}

function testMyAnswer(pid, waiting) {
var btn =jQuery('
#'+pid);
            
var label jQuery('#label'+pid);
            var 
message jQuery('#message'+pid);
            var 
textF jQuery('input[name=answer_'+parseInt(pid)+']');
            var 
user_ans textF.val();
            
user_ans=(user_ans.trim());
            var 
correct_ans jQuery('input[name=ans_'+pid+']').val();
            var 
rem_points jQuery('input[name=rem_'+pid+']').val();
            if (
user_ans === correct_ans) {
                
btn.css('display','none');
                
label.css('display','none');
                
message.text('answer correct- one point added to your Profile');
                
textF.css('display','none');
                
jQuery.ajax({
                    
type'POST',
                    
//dataType: 'html',
                    
url'ajax.php',
                    
data: {'puz_id':pid},
                }).
done(function (data) {
                    
console.log('sus = '+data);
                })
                    .
fail(function (data) {
                        
console.log('fail = '+data);
                    });
            }else{
$(pid).attr("disabled"true);
$(pid).css("cursor","not-allowed");
$("#message").text("wrong answer, please wait 10 minutes before trying again");
if (waiting == "")
{
setCookie("testMyAnswer""waiting"10);

setTimeout(function() {
$(pid).removeAttr("disabled");
$(pid).css("cursor""pointer");
$("#message").text("");
setCookie("testMyAnswer"""60*24);
}, 600000);
}
}
}
function 
setCookie(cnamecvalueexmins) {
var = new Date();
d.setTime(d.getTime() + (exmins 60 1000));
var expires "expires="+d.toUTCString();
if (cvalue == "")
document.cookie cname "=;expires=Thu, 01 Jan 1970 00:00:01 GMT;path=/";
else
document.cookie cname "=" cvalue ";" expires ";path=/";
}

function 
getCookie(cname) {
var name cname "=";
var ca document.cookie.split(";");
for(var 0ca.lengthi++) {
var ca[i];
while (c.charAt(0) == " ") {
c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.lengthc.length);
}
}
return "";
}
</
script>';
?>


Kindred

are you using that inside an SMF template file?


If so, your problem is the opening and closing <?php tags.

SMF does not use that notation.   an SMF template is ALL php and anything like html or javascript needs to be within an echo.
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

msab

you are absolutely right but i don't think it is the problem because the error says "Parse error: syntax error, unexpected 'var' (T_VAR), expecting ',' or ';'  on line 154"

Kindred

that certainly looks like a badly parsed code error which would be the result if you put that code that you listed into an SMF php template file.


Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

Shambles

Quote from: msab
the error says "Parse error: syntax error, unexpected 'var' (T_VAR), expecting ',' or ';'  on line 154"

Don't forget to escape all your single quotes within that echo statement.

var btn =jQuery('#'+pid);

should be

var btn =jQuery(\'#\'+pid);


Rinse and repeat for all those single quote marks below that too.

msab

okay i did exactly what you told me and i have no errors now but unfortunately the function doesn't work properly ...when i click on the button nothing happens !! 

msab

i have added the first line to the code
Quote from: msab on August 23, 2018, 01:32:54 PM
thank you soooo soooo much @Chen Zhen the second code using cookies works fine with me :D but when i add the rest of my code it gives me an error
here is the the whole code

                        <input type='hidden' name='ans_<?php echo $row['pid'?>' value='<?php echo htmlspecialchars($three?>' />

<label for="answer" id="label<?php echo $row['pid']; ?>"><b>Enter Your Answer</b></label>
                        <input type="text" placeholder="Enter your answer" name="answer_<?php echo $row['pid'?>" ><br />
<?php
echo '
<input type="button" id="'
$row['pid'], '" onclick="testMyAnswer(\'#'$row['pid'] ,'\', \'\')" name="sub" value="SUBMIT" />
<div id="message"></div>
<script type="text/javascript"  src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
if (getCookie("testMyAnswer") != "")
testMyAnswer("#'
$row['pid'], '", "waiting");
else
{
$("#'
$row['pid'] ,'").removeAttr("disabled");
$("#'
$row['pid'] ,'").css("cursor", "pointer");
$("#message").text("");
}

function testMyAnswer(pid, waiting) {
var btn =jQuery('
#'+pid);
            
var label jQuery('#label'+pid);
            var 
message jQuery('#message'+pid);
            var 
textF jQuery('input[name=answer_'+parseInt(pid)+']');
            var 
user_ans textF.val();
            
user_ans=(user_ans.trim());
            var 
correct_ans jQuery('input[name=ans_'+pid+']').val();
            var 
rem_points jQuery('input[name=rem_'+pid+']').val();
            if (
user_ans === correct_ans) {
                
btn.css('display','none');
                
label.css('display','none');
                
message.text('answer correct- one point added to your Profile');
                
textF.css('display','none');
                
jQuery.ajax({
                    
type'POST',
                    
//dataType: 'html',
                    
url'ajax.php',
                    
data: {'puz_id':pid},
                }).
done(function (data) {
                    
console.log('sus = '+data);
                })
                    .
fail(function (data) {
                        
console.log('fail = '+data);
                    });
            }else{
$(pid).attr("disabled"true);
$(pid).css("cursor","not-allowed");
$("#message").text("wrong answer, please wait 10 minutes before trying again");
if (waiting == "")
{
setCookie("testMyAnswer""waiting"10);

setTimeout(function() {
$(pid).removeAttr("disabled");
$(pid).css("cursor""pointer");
$("#message").text("");
setCookie("testMyAnswer"""60*24);
}, 600000);
}
}
}
function 
setCookie(cnamecvalueexmins) {
var = new Date();
d.setTime(d.getTime() + (exmins 60 1000));
var expires "expires="+d.toUTCString();
if (cvalue == "")
document.cookie cname "=;expires=Thu, 01 Jan 1970 00:00:01 GMT;path=/";
else
document.cookie cname "=" cvalue ";" expires ";path=/";
}

function 
getCookie(cname) {
var name cname "=";
var ca document.cookie.split(";");
for(var 0ca.lengthi++) {
var ca[i];
while (c.charAt(0) == " ") {
c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.lengthc.length);
}
}
return "";
}
</
script>';
?>


Chen Zhen


When using PHP files you do not need to switch back & forth between HTML & PHP using PHP tags.
HTML is echoed from the PHP file with the intended output surrounded by single or double quotes.
Depending on whether you use single quotes (apostrophes) or double quotes (quotations) to surround the output depicts which of those has to be escaped within the intended output.

basic reference to give you an understanding:
http://www.tizag.com/phpT/echo.php




Attach the entire PHP file you are attempting to edit.

My SMF Mods & Plug-Ins

WebDev

"Either you repeat the same conventional doctrines everybody is saying, or else you say something true, and it will sound like it's from Neptune." - Noam Chomsky


Chen Zhen


I cleaned it up a bit for you but can't test it because I do not have some of the other files that belong to it.
Plus it looks like you are loading an external css file via php after the HTML body tag which is not the correct way to do that.
You need to learn a lot more to accomplish little projects like this but it should come in time.

If you are attempting to use 3rd party scripts within your forum perhaps you should use a portal that has page or block output (ie. Simple Portal :) ).
That way you do not have to worry about the template aspect of things (such as css).



My SMF Mods & Plug-Ins

WebDev

"Either you repeat the same conventional doctrines everybody is saying, or else you say something true, and it will sound like it's from Neptune." - Noam Chomsky

Chen Zhen

I neglected to close the form from the HTML in that file as it was missing from your original but added it in this attachment.
Also in the future in will be prudent for you to learn to use $smcFunc instead of direct db queries and globals for directory paths.
Although I didn't change any of that in your file.




My SMF Mods & Plug-Ins

WebDev

"Either you repeat the same conventional doctrines everybody is saying, or else you say something true, and it will sound like it's from Neptune." - Noam Chomsky

msab

everything works fine now but i found something weird -> if you entered a wrong answer and waited for 10 minutes with/without refreshing the page then tried to enter the correct answer, the wrong answer message appear instead of the right answer message
here is the entire project:..

msab

thank you sooo sooo much for your help @Chen Zhen everything works fine now with no problems :laugh:

            function testMyAnswer(pid, waiting)
{
alert(getMyCookie("Waiting_"+pid));
if(getMyCookie("Waiting_"+pid)=="true"){
    alert("10 Minutes Not Finished Yet");
$("#"+pid).attr("disabled", true);
$("#"+pid).css("cursor","not-allowed");
$("#message" + pid).text("please wait 10 minutes before trying again");
}
else {
var btn = $("#" + pid);
var label = $("#label" + pid);
var message = $("#message" + pid);
var textF = $("input[name=answer_" + parseInt(pid) + "]");
var user_ans = textF.val();
user_ans=(user_ans.trim());
var correct_ans = $("input[name=ans_" + pid + "]").val();
var rem_points = $("input[name=rem_" + pid + "]").val();
if (user_ans === correct_ans)
{
btn.css("display", "none");
label.css("display","none");
message.text("answer correct- one point added to your Profile");
textF.css("display","none");
var data = {"puz_id":pid};
$.post("ajax.php", data, function(data) {
console.log("sus = " + data);
}).fail(function(err) {
console.log("fail = "+data);
});
}
else
{
$("#"+pid).attr("disabled", true);
$("#"+pid).css("cursor","not-allowed");
$("#message" + pid).text("wrong answer, please wait 10 minutes before trying again");


    alert("Setting Cookies");
setMyCookie("Waiting_"+pid, "true", 1);

setTimeout(function() {
$("#"+pid).removeAttr("disabled");
$("#"+pid).css("cursor", "pointer");
$("#message" + pid).text("");

alert("Testing ..122");
}, 600000);


}
}
}
function setMyCookie(cname, cvalue, exmins)
{

alert("testing 002");
var d = new Date();
d.setTime(d.getTime() + (exmins * 60 * 1000));
var expires = "expires="+d.toUTCString();
if (cvalue == "")
{
alert("testing 003 - Not Expected!");
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
//document.cookie = cname + "=;expires=Thu, 01 Jan 1970 00:00:01 GMT;";
}else{
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
alert("testing 004 ");
}

}
function getMyCookie(cname)
{

var name = cname + "=";
var ca = document.cookie.split(";");
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == " ") {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";

}
</script>';

Advertisement: