Hihow to check the single click and double click function in serverside using aspnetthis clientside script in working but i want to check the condition of single click and double click function seperatelyltscript type 34textjavascript34gtfunction DisableButtons var inputs documentgetElementsByTagName34INPUT34 for var i in inputs if inputsitype 34button34 inputsitype 34submit34 inputsidisabled true

Detect Button single and double click using jQuery in ASP.Net

riyaz

SOLVED CLOSED ACTIVE ANSWERED
User: riyaz
Posted: on Sep 13, 2017 09:23 PM
Forum: jQuery and jQuery Plugins
Answer: 1
Views: 5010

Hi,

how to check the single click and double click function in serverside using asp.net,this clientside script in working but ,i want to check the condition of single click and double click function seperately.

<script type = "text/javascript">
function DisableButtons() {
    var inputs = document.getElementsByTagName("INPUT");
    for (var i in inputs) {
        if (inputs[i].type == "button" || inputs[i].type == "submit") {
            inputs[i].disabled = true;
        }
    }
}
window.onbeforeunload = DisableButtons;
</script>

Andrea

0 1

Reply
User: Andrea
Replied: on Sep 13, 2017 09:23 PM
Report

Hi @riyaz, Please try the following Disable button after click to prevent double clicking using JavaScript in ASP.Net It might help you. Cheers Andrea.

riyaz

0 2

Reply
User: riyaz
Replied: on Sep 13, 2017 09:49 PM
Report

Hi Andrea,

This script will block all the button click event,even if i click single or more than once.

function DisableButtons() {

var inputs = document.getElementsByTagName("INPUT");

for (var i in inputs) {

if (inputs[i].type == "button" || inputs[i].type == "submit") {

inputs[i].disabled = true;

}

window.onbeforeunload = DisableButtons;

</script>

i need to seperate the condition. i want to check the condition for single click and double click.for example ,if single click is clicked i have validated the function in client side and if double click is clicked i want to hide that button function.this script is also work, but i want to seperate the condition

function DisableButton() {

document.getElementById("<%=Button1.ClientID %>").disabled = true;

}

window.onbeforeunload = DisableButton;

</script>

AnandM

0 3

Reply
ANSWER
User: AnandM
Replied: on Sep 14, 2017 05:25 AM
Report

Hi riyaz,

I have created a sample where you can detect whether the button is single clicked or double and replace the HTML Button with ASP.Net Button.

Refer below sample code and modify it according to your need.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>   
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input type="button" name="Click" value="Click" class="btn btn-primary" id="btnClick" />
        <br />
        <script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
        <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
        <script type="text/javascript">
            var DELAY = 700, clicks = 0, timer = null;
            $(document).ready(function () {
                $("[id*=btnClick]").on("click", function (e) {
                    clicks++;
                    if (clicks === 1) {
                        timer = setTimeout(function () {
                            alert('Single Click');
                            clicks = 0;
                        }, DELAY);
                        return false;
                    } else {
                        clearTimeout(timer);
                        clicks = 0;
                    }

                }).on("dblclick", function (e) {
                    //e.preventDefault();
                    alert('Double Click');
                });
            });
        </script>
    </div>
    </form>
</body>
</html>

Demo

Detect Button single and double click using jQuery in ASP.Net

Company

Explore

Follow us

Contact Us