I have this fiddle where when the user clicks a button the counter works: /
This is the code:
<button type="button" onClick="clickME()">Click me</button>
<p>Clicks: <a id="clicks">0</a></p>
var clicks = 0;
function clickME() {
clicks += 1;
document.getElementById("clicks").innerHTML = clicks;
}
The problem is that I want the number to be saved, so for example:
- user #1 clicks on the button 10 times
- user #2 opens the site and the count is at 10, he clicks and now the counter starts 11
- and so on with new users.
I'm trying to do this to keep track of how many times a file has been downloaded.
Any idea how can I do that?
I have this fiddle where when the user clicks a button the counter works: http://jsfiddle/z66WF/
This is the code:
<button type="button" onClick="clickME()">Click me</button>
<p>Clicks: <a id="clicks">0</a></p>
var clicks = 0;
function clickME() {
clicks += 1;
document.getElementById("clicks").innerHTML = clicks;
}
The problem is that I want the number to be saved, so for example:
- user #1 clicks on the button 10 times
- user #2 opens the site and the count is at 10, he clicks and now the counter starts 11
- and so on with new users.
I'm trying to do this to keep track of how many times a file has been downloaded.
Any idea how can I do that?
Share Improve this question asked Nov 12, 2014 at 16:19 codekcodek 3435 gold badges20 silver badges49 bronze badges 9- 2 Yeah, store the value on the server after each click. Also, why the jQuery tag, I see none. – j08691 Commented Nov 12, 2014 at 16:20
- 1 Send an ajax request to a script that adds each count to a database. – timgavin Commented Nov 12, 2014 at 16:20
- You would have to save the clicks number on your server, and add validation/timout to make sure someone doesn't increment it 1000000 times – Andrew Koroluk Commented Nov 12, 2014 at 16:20
- as long as js is "client size" you can't save the number just un JS. You need to save it on the serveur, via ajax for exemple. On click, client start an ajax request to a php file on your server, and this php file "write" the number increased : in a text file of in a SQL database for exemple – Pierre Granger Commented Nov 12, 2014 at 16:22
- Can you give me an example of that @PierreGranger? thank you! – codek Commented Nov 12, 2014 at 16:22
2 Answers
Reset to default 4Here you have a working simple exemple, wich write the counter in a simple txt file (no sql db needed)
<?php
$counterFile = 'counter.txt' ;
// jQuery ajax request is sent here
if ( isset($_GET['increase']) )
{
if ( ( $counter = @file_get_contents($counterFile) ) === false ) die('Error : file counter does not exist') ;
file_put_contents($counterFile,++$counter) ;
echo $counter ;
return false ;
}
if ( ! $counter = @file_get_contents($counterFile) )
{
if ( ! $myfile = fopen($counterFile,'w') )
die('Unable to create counter file !!') ;
chmod($counterFile,0644);
file_put_contents($counterFile,0) ;
}
?>
<html>
<head>
<script type="text/javascript" src="https://code.jquery./jquery-2.1.1.min.js"></script>
<script type="text/javascript">
jQuery(document).on('click','a#download',function(){
jQuery('div#counter').html('Loading...') ;
var ajax = jQuery.ajax({
method : 'get',
url : '/test.php', // Link to this page
data : { 'increase' : '1' }
}) ;
ajax.done(function(data){
jQuery('div#counter').html(data) ;
}) ;
ajax.fail(function(data){
alert('ajax fail : url of ajax request is not reachable') ;
}) ;
}) ;
</script>
</head>
<div id="counter"><?php echo $counter ; ?></div>
<a href="" id="download" onclick="window.open(this.href);return false;">Download btn</a>
You need a DB connection to do this.
When the button is clicked, by any user, the value from let's say: "downloaded_times" will be increased with 1.
so you will need a query like:
UPDATE table SET downloaded_times = downloaded_times + 1
this query will be called each time someone presses the button.
If you want to display it, before a certain user wants to start a download, you simply fetch the result from DB and the echo it. You can do more, if you want that field to be constantly refreshed, the fetching and echoing part should be in a ajax called PHP function, that will refresh the div (for instance) every 30 second or so :D
Hope this helps! :D