Is there a way I can tell how many times a form submit button has been clicked using jQuery ?

I have found some answers here but I don't want to use a global variable.

Is there some way to achieve this without using global variable in jQuery ?

<form id="form">
    <input type="button" id="Submit" name="Submit" value="Submit" />
</form>

JavaScript:

var count = 0;
$(document).ready(function(){
    $("form#Submit").submit(function(){
             count++;
        });
});

just for example --> I want to allow user to click the button 4 times but if he click more than 4 times I will show some alert message

Is there a way I can tell how many times a form submit button has been clicked using jQuery ?

I have found some answers here but I don't want to use a global variable.

Is there some way to achieve this without using global variable in jQuery ?

<form id="form">
    <input type="button" id="Submit" name="Submit" value="Submit" />
</form>

JavaScript:

var count = 0;
$(document).ready(function(){
    $("form#Submit").submit(function(){
             count++;
        });
});

just for example --> I want to allow user to click the button 4 times but if he click more than 4 times I will show some alert message

• javascript
• jquery
• onclick
• click

• move the var count = 0; into the anonymous function. – Pinoniq Commented Aug 27, 2014 at 13:45
• I don't think so , because In all cases you have to use a variable to save the number of times Button is clicked . – Fouad Wahabi Commented Aug 27, 2014 at 13:46
• it's all about scope ;) – Pinoniq Commented Aug 27, 2014 at 13:46

5 Answers 5

You could store the count in the button's data:

    $(document).ready(function () {
        $("form#Submit").submit(function () {
            var count = $(this).data("count") || 0;
            $(this).data("count", ++count);
        });
    });

so this is an edit on an answer to help you along

$(document).ready(function () {
    $("form#Submit").submit(function () {
        var count = $(this).data("count") || 0;
        if(count >= x)
        {
            //user clicked more than you wanted to so do something here 
        }

        $(this).data("count", ++count);
    });
});

JavaScript

function CountOnFormSubmitEvent(form_id, _callback_)
{
    var that = this, count = 0, callback = _callback_;

    var form = document.getElementById(form_id);
    if(form === null) { return null; }

    var reset = function(){
        count = 0;  
    };

    form.addEventListener("submit", function(evt){
        callback(evt, ++count, reset);
    }, false);
}

var counter = new CountOnFormSubmitEvent("myForm", function(event, count, reset_callback){
    event.preventDefault();
    if(count >= 4)
    {
        alert("Too many clicks !");
        reset_callback();
    }
});

http://jsfiddle/3snmg7bt/

I hope it will help you ;)

Initially, add a id to your button as 'clicked-0'. Now do it as below:

$(document).ready(function(){
   $("form#Submit").submit(function(){
         var clicks = $(this).attr('id').replace('clicked-','');
         clicks = clicks+1;
         alert("No. of times clicked:"+clicks);
         $(this).attr('id','clicked-'+clicks);
    });
});

$(document).ready(function(){
    var count = 0;
    $("form#Submit").submit(function(){
         count++;
         console.log(count); //for instance
    });
});

count is defined in the anonymous function that is executed on domready. It thus is only available inside that aonymous function (and ofcourse to everything inside it, e.g. the submit function)

EDIT

You can test that it is not in the global scope:

$(document).ready(function(){
    var count = 0;
    $("form#Submit").submit(function(){
         count++;
         console.log(count); //for instance
         console.log(window.count); //undefined
    });
});