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>
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.
Before this goes much further... WHY do you want to do this?
What is the end goal and purpose?
see this jsfiddle (https://jsfiddle.net/yxbjnee1/), it disables the submit button for 15 sec, change the code as desired to your example.
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
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>';
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>';
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(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>';
?>
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.
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"
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.
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.
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 !!
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(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>';
?>
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.
here is the entire php file
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).
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.
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:..
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>';