Thread: Click counter

    #1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2017
    Posts
    8
    Rep Power
    0

    Click counter


    Scenario :: registration form; user clicks on register button, counter (behind-the-scenes = not visible) adds 1 iteration.
    My question is how to make a bond between button and counter in JS? ActionListener?
  2. #2
  3. Lazy Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,335
    Rep Power
    9645
    Are you asking how to do this in Java or Javascript? They aren't nearly the same thing.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2017
    Posts
    8
    Rep Power
    0
    Originally Posted by requinix
    Are you asking how to do this in Java or Javascript? They aren't nearly the same thing.
    Ideally would be to have this done in JavaScript, if this is not possible then in Java.
  6. #4
  7. Lazy Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,335
    Rep Power
    9645
    Then what is this one "iteration" thing? Is it also Javascript?

    As long as the server is not involved then this can be done with Javascript. But if you need to do something on the server, like store something in a database, then you will need Java.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2017
    Posts
    8
    Rep Power
    0
    Iteration = adding 1 to counter;

    Ive looked at Google and nothing useful.

    I will code it in JavaScript as no server is needed here.
  10. #6
  11. Lazy Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,335
    Rep Power
    9645
    Originally Posted by developer11
    Iteration = adding 1 to counter;
    Oookay, then what is this "counter" thing? I'm not asking what the concept of a counter is. I know what a counter is. What I don't know is what counter you're talking about. Is it a variable? Form field?
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2017
    Posts
    8
    Rep Power
    0
    Counter is variable and. Its value is stored in memory and sent to an Admin Panel (AP) to specific (read-only) field via php.
  14. #8
  15. Wiser? Not exactly.
    Devshed God 2nd Plane (6000 - 6499 posts)

    Join Date
    May 2001
    Location
    Bonita Springs, FL
    Posts
    6,080
    Rep Power
    4101
    Just Add a click event handler to your button and add one to your counter variable.

    If you're submitting a form for your registration though then adding one to a JS variable won't do much good because the page would reload and the value would be lost.

    What exactly are you tying to accomplish? A Total registered users: X counter? If so then this is the wrong approach.
    Last edited by kicken; July 2nd, 2017 at 03:27 PM.
    Recycle your old CD's



    If I helped you out, show some love with some reputation, or tip with Bitcoins to 1N645HfYf63UbcvxajLKiSKpYHAq2Zxud
  16. #9
  17. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2017
    Posts
    8
    Rep Power
    0
    Originally Posted by kicken
    Just Add a click event handler to your button and add one to your counter variable.

    If you're submitting a form for your registration though then adding one to a JS variable won't do much good because the page would reload and the value would be lost.

    What exactly are you tying to accomplish? A Total registered users: X counter? If so then this is the wrong approach.
    If so, whats correct approach than? php?
  18. #10
  19. Wiser? Not exactly.
    Devshed God 2nd Plane (6000 - 6499 posts)

    Join Date
    May 2001
    Location
    Bonita Springs, FL
    Posts
    6,080
    Rep Power
    4101
    You just look into your database and get a count of the total registered users then print that to the page. If you were storing all your users in a users table then you'd query for
    Code:
    SELECT COUNT(*) as totalRegistered FROM users
    Recycle your old CD's



    If I helped you out, show some love with some reputation, or tip with Bitcoins to 1N645HfYf63UbcvxajLKiSKpYHAq2Zxud
  20. #11
  21. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2016
    Location
    Lakewood, WA
    Posts
    205
    Rep Power
    17
    Originally Posted by developer11
    If so, whats correct approach than? php?
    The correct approach to what? What is it that you are doing, which is to say why are you counting click events? Are you trying to prevent something from happening after the first click (for example someone going "clicky-clicky-clicky" when exactly one click is all that is needed / desired / required)? There are many possibilities, but deciding which one suits your needs, we (well, at least *I*) need to know what you're doing with it in the larger sense of the context of your specific application.

    Please don't think I'm being snarky, it's just hard to suggest a solution without knowing what the problem is... And having said that, though I'm not a JS expert by any means, various types of JS events like the Click Event do not seem to me to be that hard to work with, so if you tell us what you're doing, the solution has a good chance of being fairly easy. As to searching for an answer, maybe you are Googling wrong? Because that's one of my primary problem solving tools since I assume (generally correctly) that I'm not the first to do something or the first to have a problem with something. Expand your search criteria, and be descriptive not cagey, no one is listening in except the NSA.

    You certainly can use JS Click Events to count button clicks and then use JS to effect the value of a hidden (or not, your choice) form input field which can then be passed to the PHP form processing script as a POST variable... Or, you could write a little AJAX that passes the Clicky-Clicky count to a PHP script totally separate from the form processing. These are just the two possibilities off the top of my head knowing absolutely nothing about what you hope to accomplish.

    Actually, you could use the above methods to pass the data to any (most) scripting or server-side language, but PHP is what I mostly use in the context of web-based applications, with some other stuff for specific types of heavy lifting. Perl, Python, and C# are all good solutions for web-based applications, although I have ZERO experience with any of them except Perl many years ago when PHP was crap. But I wouldn't choose FORTRAN, unless you are writing a text-based Star Trek game or an application with heavy-duty mathematical number crunchers (Please note that DevShed does not have a FORTRAN forum, and that's just a shame).

    Many "real" programmers claim that PHP still is crap. What they really mean is because of the fairly low bar to entry, a lot of crap is written in PHP (though they will nit-pick on some obscure technical aspect that is meaningless in the larger scheme of things). I've been around programming and "real" programmers all my life (my father was a mathematician who did most of his work on computers - he says Perl is all anyone needs, except FORTRAN and sometimes C but not C++ because "real" programmers don't need "objects"), and I think "real" programmers miss out by not looking at PHP for serious web-based applications (there actually are many written in PHP). Certainly I myself have written extremely complex apps with it that are fast, error free, efficient, "resilient", and scalable, and that's "all" I need. But use whatever works for you, many tools for the same job.

    Come on now, share with us!

    - Arty
    Last edited by Arty Zifferelli; July 3rd, 2017 at 03:37 AM.
  22. #12
  23. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2017
    Posts
    8
    Rep Power
    0
    I have webapp with registration ability. But, due to some bastards registering and targeting our infrastructure,
    we have to find way to map them. We thought that click counter would be enough.

    There is JS, its very easy to target code written in JS, and thats why many browsers block it. But there is AJS
    (which simply is php-fork). Code template is pretty much the same, but its much safer.
  24. #13
  25. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2016
    Location
    Lakewood, WA
    Posts
    205
    Rep Power
    17
    OK, I get a general sense about what you want, but you have left a whole lot of details out.

    So, expanding on the suggestions I made above based on the idea that you are working with some <form>, here's some code to illustrate what I was talking about. Please check out the JavaScript HTML DOM for more precise information.

    ***Disclaimer***

    This was all written pretty much off the top of my head, so it's not exactly optimized or error-free, but it "works" and serves to illustrate some ideas that may or may not address your problem. Apologies if I'm out in left field.

    WARNING: THIS CODE MAY CONTAIN HIDEOUS ERRORS!

    So there are THREE things going on here:

    1) Counting the clicks with PHP
    2) Counting the clicks with JavaScript
    3) Sending the click count to an external script via AJAX, and getting some value back.
    PHP Code:
    <?php
    // Debugging code
    ini_set('display_errors'1);
    ini_set('display_startup_errors'1);
    error_reporting(E_ALL);

    echo 
    "POST array:<p>";
    print_r($_POST);
    echo 
    "<p>";

    if (!isset(
    $_POST['hidden_click_value'])) { 
        
    $hidden_click_value 0
    } else {
        
    $hidden_click_value $_POST['hidden_click_value'];
        
    $hidden_click_value++;
    }
    echo 
    "This is the current Click Counter value: " $hidden_click_value "<br><br>";

    ?>
    <!DOCTYPE html>
    <html>
    <head>
        <style type="text/css">
            .button {
                display:inline-block;
                min-width: 50px;
                width: 125px;
                padding:5px 10px;
            }
        </style>
        <script type="text/javascript" >
            function test_function(inputvalue) {
                var newvalue = inputvalue;
                newvalue++;
                alert('The PHP Click Counter will not execute until you click OK on this pop-up. But I predict the Counter will equal = '+newvalue);            
                // When we click the button, we may also want to send the value to some other 
                // script at the same time. This calls the AJAX function.
                getSomeValue(newvalue);
            }
            function getSomeValue(newvalue) {
                if (newvalue.length == 0) { 
                    // What if the hidden input has no value?
                    document.getElementById("AJAX_return_value").innerHTML = "";
                    return;
                } else {
                    // If the hidden input does have a value, do this...
                    var xmlhttp = new XMLHttpRequest();
                    xmlhttp.onreadystatechange = function() {
                        if (this.readyState == 4 && this.status == 200) {
                            // If we want the other script to return a value, here's how we get it...
                            document.getElementById("AJAX_return_value").innerHTML = this.responseText;
                        }
                    };
                    // Sent a value to the other script
                    xmlhttp.open("GET", "./some_other_script.php?v=" + newvalue, true);
                    xmlhttp.send();
                }
            }
        </script>
    </head>
    <body>
        <form action="./test.php" method="POST">
        <span id="AJAX_return_value">If the script / application / whatever that we send the click count to
        returns a value, it would be inside this SPAN tag.</span>
        <br><br>
        <button id="test_button" name="test_button" value="submit" class="button" onclick="test_function('<?php echo $hidden_click_value?>')">Test Button</button>
        <input type"text" id="hidden_click_value" name="hidden_click_value" value="<?php echo $hidden_click_value?>" hidden>
        <script type="text/javascript" >
            document.getElementById("test_button").innerHTML = "Click Count = <?php echo $hidden_click_value?>"
        </script>
        </form>
    </body>
    </html>
    Here's another way of doing things:

    In this example, the counting is all done with JavaScript, and you don't need to submit the <form> unless you want to.

    WARNING: THIS CODE MAY CONTAIN HIDEOUS ERRORS!

    So there are THREE things going on here:

    1) Counting the clicks with JavaScript
    2) Sending the click count to an external script via AJAX, and getting some value back.
    3) Submitting the <form> if you want to, using the JavaScript 'onsubmit' event to call an 'onsubmit' handler.
    PHP Code:
    <?php
    // Debugging code
    ini_set('display_errors'1);
    ini_set('display_startup_errors'1);
    error_reporting(E_ALL);

    echo 
    "POST array:<p>";
    print_r($_POST);
    echo 
    "<p>";

    if (isset(
    $_POST['something']) && ($_POST['something'] == "something")) {
        echo 
    "The JS has executed the form submit."
    }

    ?>
    <!DOCTYPE html>
    <html>
    <head>
        <style type="text/css">
            .button {
                display:inline-block;
                min-width: 50px;
                width: 125px;
                padding:5px 10px;
            }
        </style>
        <script type="text/javascript" >
            function onsubmitHandler () {
                return false;
            }        
            function test_function(value) {
                value++;
                document.getElementById('test_button').innerHTML = "Click Count = "+value;
                document.getElementById('test_button').value = value;

                // When we click the button, we may also want to send the value to some other 
                // script at the same time...
                
                getSomeValue(value);
                
                // Note that I put this conditional AFTER the call to the AJAX
                // function 'getSomeValue' otherwise it wouldn't get executed if the
                // conditional was met.
                if (value == 5) {
                    alert('The click counter has reached 5 clicks. Time to submit the form!');
                    document.getElementById("test_form").submit();
                }
                return false;
            }
            function getSomeValue(value) {
                if (value.length == 0) { 
                    // What if the hidden input has no value?
                    document.getElementById("AJAX_return_value").innerHTML = "";
                    return;
                } else {
                    // If the hidden input does have a value, do this...
                    var xmlhttp = new XMLHttpRequest();
                    xmlhttp.onreadystatechange = function() {
                        if (this.readyState == 4 && this.status == 200) {
                            // If we want the other script to return a value, here's how we get it...
                            document.getElementById("AJAX_return_value").innerHTML = this.responseText;
                        }
                    };
                    // Sent a value to the other script
                    xmlhttp.open("GET", "./some_other_script.php?v=" + value, true);
                    xmlhttp.send();
                }
            }
        </script>
    </head>
    <body>
        <form id="test_form" name="test_form" action"./testB.php" method="POST" onsubmit="return onsubmitHandler()">
        <span id="AJAX_return_value">If the script / application / whatever that we send the click count to
        returns a value, it would be inside this SPAN tag.</span>
        <br><br>
        <button id="test_button" name="test_button" value="0" class="button" onclick="return test_function(this.value)">Test Button</button>
        <input id="secret" name="secret" value="secret" hidden>    
        </form>
    </body>
    </html>
    And this is the script that the AJAX calls...
    PHP Code:
    <?php

    $value 
    $_GET['v'];
    echo 
    "This is the value that the AJAX function passed to 'some_other_script.php' and the script passed back: " $value;

    ?>
    HAVE FUN!

    Comments on this post

    • developer11 agrees : Thats exactly what I was looking for. Thanks :)
    Last edited by Arty Zifferelli; July 4th, 2017 at 07:44 PM.
  26. #14
  27. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2017
    Posts
    8
    Rep Power
    0
    Originally Posted by Arty Zifferelli
    (...)
    Thanks a ton man. Saved my life
  28. #15
  29. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2016
    Location
    Lakewood, WA
    Posts
    205
    Rep Power
    17
    Originally Posted by developer11
    Thanks a ton man. Saved my life
    The thing to grasp from the second example is that to acquire <form> data you *do not* have to submit the <form>, the AJAX is doing that. Also note that although I *did* allow the <form> to be submitted, I used JS code, not a submit button form action.

    [EDIT]

    You could also store the click count in sessions or a cookie.
    Last edited by Arty Zifferelli; July 4th, 2017 at 07:41 PM.

IMN logo majestic logo threadwatch logo seochat tools logo