I have a button with numeric values of 100. A total number will be displayed on the page. When I click on the "Add 100", it will update and display on the page. I want the button to click only once per day. For example you can't click the button for a second time again. Here's my html code. How can I only make the button clickable once per day? (24 hours)?
<div>Total : <span id="total">0</span></div>
<input class="add" data-amount="100" type="button" value="Add 100" />
$(document).ready(function() {
$('.add').click(function() {
$('#total').text(parseInt($('#total').text()) +
parseInt($(this).data('amount')));
});
})
You'll need to use server-side JavaScript to make it work when you close the page, but if the page doesn't close or reload, ever, you do this:
var dayClicked = true;
$("#button").click(function() {
if (dayClicked) {
alert("Error!");
}
else {
variable += 1;
dayClicked = false;
}
setTimeout(function() {
dayClicked = true;
}, 86400000);
});
This'll add one to variable, then make the #button element show an error message for the next day (86400000 seconds).
Related
I have a function that triggers an alert at a given time:
function breakTime() { // <<< do not edit or remove this line!
/* Set Break Hour in 24hr Notation */
var breakHour = 11
/* Set Break Minute */
var breakMinute = 47
/* Set Break Message */
var breakMessage = "Reports! Take Your Break!"
///////////////////No Need to Edit//////////////
var theDate = new Date()
if (Math.abs(theDate.getHours()) == breakHour && Math.abs(theDate.getMinutes()) == breakMinute) {
this.focus();
clearInterval(breakInt)
alert(breakMessage)
}
}
var breakInt = setInterval("breakTime()", 1000)
I want to assign this function to a button, so when the button is pressed, at an interval of 10 seconds after button press, the alert shows up to everyone that has access to the page. Is there any way to do it?
Note: the pop up alert is triggered without the button, but every one of my attempts to make a button that triggers the function doesn't trigger the pop up on every one's PC.
using just javascript:
<button id='buttonID'>Click Me</button>
function test() {
alert('break time!');
}
document.getElementById('buttonID').onclick = test;
// no () on test, otherwise it runs immediately.
https://jsfiddle.net/axq0ks6b/
HOWEVER this will only work locally on your page. If you want to press a button and send a prompt to everyone who has the page open, then you will need to set up server side scripts.
You can assign function on button click like
<input id='btn' type='button' onclick='breakTime();' >Click</input>
OR You can fire event on click
<input id='btn' type='button' >Click</input>
<script>
$(document).ready(function(){
$('#btn').onclick(funcion(){
breakTime();
});
})
</script>
I have a submit button, which sends the value with POST method to the same page.
<button id="log" class="btn bg-purple" formmethod=post value="2" name="start" formaction=start_server.php>Get Log</button>
When I press that button, I get the log from the file in a list using PHP.
What I want to do now is to make a script with javascript to automatically press the "Get Log" button to reload the log file every 2 seconds so I can have an interactive log, without pressing the button myself.
I have tried this script, but only the alert is working I guess, since it doesn't reload the log file at all.
<script type="text/javascript">
window.onload=function(){
var auto = setTimeout(function(){ autoRefresh(); }, 100);
function submitform(){
alert('test');
document.button["log"].submit();
}
function autoRefresh(){
clearTimeout(auto);
auto = setTimeout(function(){ submitform(); autoRefresh(); }, 2000);
}
}
</script>
Replace your script with this:
$(document).ready(function(){
// this handles the click on yout "Get log" button
$("#log").click(function(){
//alert('test');
console.log("Click function");
$("#log").submit();
});
// This sets an interval to simulate a click every 2 seconds.
auto = setInterval(function(){
console.log("Interval iteration");
$("#log").click();
}, 2000);
});
Give an ID to your form and replace this line -
document.button["log"].submit();
With this -
document.getElementById('formID').submit();
I have a print button which I want to hide after 5 clicks in MVC application.
For now, I am hiding it on click.
How can I modify the following code to hide after 5th click?
<input type="submit" name="command" value="Print" onclick="hidesubmit();"/>
function hidesubmit() {
$("input[type='submit']").each(function() {
$(this).hide();
});
};
#RGS,
Its not working for me. I am using Jquery 1.10.2. The button is enabled all the time even after trying your code. I am trying to hide it but not disable it. So, I modified it to following but still it not firing.
<script src="../../Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
<script>
var count=0;
$("input[type='submit']").click(function() {
count=count+1;
if(count==5)
{
$(this).hide();
}
});
</script>
Update: I believe count is not working in my case when I try to debug. Its always 0.
Your just need to add a var with count of click on button.
Only when you have the 5th click, you can loop on submit button and hide
var count = 0;
function hidesubmit() {
count++;
if(count >= 5){
$("input[type='submit']").each(function() {
$(this).hide();
});
}
};
And you don't need to loop for hide items :
$("input[type='submit']").each(function() {
$(this).hide();
});
Is the same think like :
$("input[type='submit']").hide();
var count=0;
$("input[type='submit']").click(function() {
count=count+1;
if(count==5){
$(this).attr("disabled", true);
}
else
{
$(this).attr("disabled", false);
}
});
Count the no.of clicks by using variable 'count'.
Demo:
http://jsfiddle.net/ny2ME/
What about being able to have an image display, then after every five clicks it would show another image, but only on the five clicks, and after the fifth click it would go back to showing the orig. image?
Hey so I have a div that I want to replaceWith some text after clicking on the button and then re-show the same hidden text after 5 seconds. I am stuck on the part where I need to re-show it. I hid the div with the onclick function and appended some text but after a couple seconds I would like to re-show the original text.
here is the link that I need to change text onclick and then after 5 seconds show the ORIGINAL text...
originally the text says "add to calendar", upon clicking it, it should change to "calendar updated" and then after 5 seconds change back to "add to calendar".
<div class="resSubmitAction download resDetailsButton">
<a href="javascript:void(0);">
</div>
<div class="calText"><p>add to calendar</p></div></a>
</div>
Jquery:
$(document).ready(function () {
$(".resSubmitAction").click(function () {
$(".calText > p").replaceWith("Calendar Updated");
});
});
Make use of the setTimeout function. Fiddle
$("#clickme").click(function(){
var elem = $(this);
setTimeout(function(){
elem.hide();
}, 5000);
});
In the code that you provided, the click event is not attached correctly, if you click 'add to calendar' it doesn't trigger the event.
You can use the setTimeout function to call any function after certain time delay, this is your code with the setTimeout implemented.
Fiddle
$(".calText").click(function () {
var originalText = $(".calText > p").text();
$(".calText > p").text("Calendar Updated");
setTimeout(function(){
$(".calText > p").text(originalText)
}, delayTime);
//Just a little timer I added
triggerTimer();
});
I'm trying to have a button click cause a variable to increment by one, then update a page counter showing the variable. For some reason, upon page load, the button will apparently click once, and any actual clicks do nothing.
I've tried $("#click").click(click(1)); and putting onClick="click(1)" on the actual HTML of the button, but both seem to output the same result.
Here's the relevant HTML:
<div class="column_middle">
<div style="font-size:115%;display:inline;">Money: <span id="money">0</span></div>
<button id="click" class="mainbutton" style="margin:10px;margin-right:5px;" title="">Click</button>
And the relevant javascript:
// Activated on DOM load
function onLoad( jQuery ) {
// Set up button functions
$("#click").click(click(1));
}
function click(amount) { // Player clicking
money += amount; // Add the amount of clicks to the total money
html_money.text(money); // Update page money value
console.log("Clicked "+amount+" times.");
}
// Variable declaration
var money = 0; // Total money
var stock = 0; // Total stock
var html_money = $("#money"); // Money variable on the actual page
var html_stock = $("#stock"); // Stock variable on the actual page
At least this line will not work: $("#click").click(click(1)); because on the click event, you will "execute" the returned value of the click function (void), not the function itself.
Try this:
<div class="column_middle">
<div style="font-size:115%;display:inline;">Money: <span id="money">0</span></div>
<button id="incrementButton" class="mainbutton" style="margin:10px;margin-right:5px;" title="">Click</button>
</div>
JS:
$(document).ready(function () {
var increment = function (amount) {
$('#money').text(
parseInt($('#money').text(), 10) + amount
);
}
$('#incrementButton').click(function () {
increment(1);
});
increment(1);
});
I also created a fiddle: http://jsfiddle.net/cP6Lq/
change your code to:
function incrementMoney(amount) { // Player clicking
$("#money").html( parseInt($("#money").html()) + amount);
}
$(document).ready(function () {
$("#click").click(function(){
incrementMoney(1));
});
}
it is very important to avoid using qualified names specially if you have element ids named just like functions..