connectseekers.com

Wednesday, 23 August 2017

Disable Button Or Submit Button After Click JavaScript Or jQuery| Preventing Double Form Submission Using JavaScript Or jQuery

8/23/2017 - By Pranav Singh 0

This article will show you how you can  Disable Button Or Submit Button After Click javascript Or jQuery| Preventing Double Form Submission Using javascript Or jQuery. This article will cover below mention article also : disable button after click php,  disable button after click html,  disable submit button onclick,  how to disable submit button after form submission in javascript, Disable Button and Submit button after one click using JavaScript, How to disable "Submit" button and multiple submissions?, Preventing Double Form Submission, jquery - Disabling a submit button after one click, javascript - Disable submit button ONLY after submit.

So for this article first we will add the jQuery library reference into the header of the page.

 
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>


After this I have created two ways to disable the button on click. First I have shown how to disable button using jquery and other how to disable button using javascript.

JQUERY:

$(document).ready(function () {
            $("#btnSubmit").click(function () {
                $("#btnSubmit").prop('disabled', true);
            });
        });


JAVASCRIPT:

document.getElementById("btnSubmit").onclick = function () {
            this.disabled = true;
        }


Now will add the html code.

 
<h3>Disable Button</h3><br /><br />
    <input type="button" value="Submit" id="btnSubmit" />


In above code I have taken the button click which will disable when user click on it. Now have a look of the complete code.

JQUERY:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>
        Disable Button Or Submit Button After Click javascript Or jQuery| Preventing Double Form Submission Using javascript Or jQuery

    </title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#btnSubmit").click(function () {
                $("#btnSubmit").prop('disabled', true);
            });
        });
    </script>
</head>
<body>
    <h3>Disable Button</h3><br /><br />
    <input type="button" value="Submit" id="btnSubmit" />
    <br /><br /><br /><br /><br /><br />
</body>
</html>

JAVASCRIPT:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>
        Disable Button Or Submit Button After Click javascript Or jQuery| Preventing Double Form Submission Using javascript Or jQuery

    </title>
    <script>
        function DisableButton() {
            document.getElementById("btnSubmit").disabled = true;
        }
    </script>
</head>
<body>
    <h3>Click to Disable Button</h3><br /><br />
    <input type="button" value="Submit" id="btnSubmit" onclick="javascript: DisableButton();" />
    <br /><br /><br /><br /><br /><br />
</body>
</html>


Now we have done run the application to check the output.


About the Author

We are the group of people who are expertise in different Microsoft technology like Asp.Net,MVC,C#.Net,VB.Net,Windows Application,WPF,jQuery,Javascript,HTML. This blog is designed to share the knowledge.

Get Updates

Subscribe to our e-mail newsletter to receive updates.

Share This Post

0 comments:

Please let me know your view

Free Ebooks


About Us

We are the group of people who are expertise in different Microsoft technology like Asp.Net,MVC,C#.Net,VB.Net,Windows Application,WPF,jQuery,Javascript,HTML. This blog is designed to share the knowledge.

Contact Us

For writing article in this website please send request by your

GMAIL ID: dotnetpools@gmail.com
Email Id : contact@aspdotnet-pools.com

Bugs and Suggestions

As we all know that this website is for sharing knowledge and providing proper solution. So while reading the article is you find any bug or if you have any suggestion please mail us at contact@aspdotnet-pools.com.

Partners


Top jQuery Plugins

Global Classified : Connectseekers.com
© 2014 aspdotnet-pools.com Designed by Bloggertheme9.
back to top