jQuery to prevent multiple click on button is not working

Question

I have a form and when user click button for multiple times than the data is also going to save multiple time in database. I am doing it to restrict multiple clicks to prevent this and This is my code but it is still not working.

<head>
   <link href="~/Contents/css/style1.css" rel="stylesheet" />

    <script>
        $('form').submit(function () {
            $(this).find(':submit').attr('disabled', 'disabled');
        });
    </script>

</head>

<div class="w3layouts_main wrap">
    <h1 class="agile_head text-center" style="color: #e60053 ;font-family :'Comic Sans MS'">Share Your Experience</h1>
    <form action="#" method="post" class="agile_form" id="form1">
        <h1 style="color: white; font-size: large">1. Quality of Service. </h1>
        <h2 style="color : #0086ce" >How satisfied were you with our Service?</h2>
        <!--Star Raiting-->
        <span class="SmileyRating" data-name="QualityOfService">


        </span>
        <br />
        <!--Star Raiting End-->


       <h1 style="color: white; font-size: large">2. Quality of Food. </h1>
        <h2 style="color : #0086ce">How satisfied were you with our Food?</h2>
        <span class="SmileyRating" data-name="QualityOfFood">

        </span>
        <br />
        <!--Star Raiting End-->


        <h1 style="color: white; font-size: large">3. Cleanliness of Lounge. </h1>
            <h2 style="color : #0086ce">How satisfied were you with Marhaba Lounge Cleaning?</h2>
            <span class="SmileyRating" data-name="CleanlinessOfLounge">

            </span>
            <br />
            <!--Star Raiting End-->


        <h1 style="color: white; font-size: large">4. Friendliness of Staff. </h1>
            <h2 style="color : #0086ce">How satisfied were you with our Staff?</h2>
            <span class="SmileyRating" data-name="FriendlinessOfStaff">

            </span>
            <br />
            <!--Star Raiting End-->


        <h1 style="color: white; font-size: large">5. Overall experience. </h1>
            <h2 style="color : #0086ce">How satisfied were you with Marhaba Lounge?</h2>
            <span class="SmileyRating" data-name="OverAllExperience">

            </span>
            <br />
            <!--Star Raiting End-->


            <h3 style="color: white; font-size: large">Valuable Suggestions.</h3>
            <textarea placeholder="Additional comments" class="w3l_summary" name="Comments"></textarea>

            <input id="formSubmit" type="submit" value="Submit" class="agileinfo" style= "background-color: white; color: #e60053 " onmouseover="this.style.backgroundColor = '#e60053', this.style.color = 'white' " onmouseout="this.style.backgroundColor = 'white',   this.style.color = '#e60053'" />

</form>
</div>

script to achieve what i want is this

 <script>
        $('form').submit(function () {
            $(this).find(':submit').attr('disabled', 'disabled');
        });
    </script>

What am I doing wrong here? how to debug the jQuery in visual studio?

Why not improve the architecture of project to prevent multiple clicks and also restrict duplicate inserts in database? — Sahil Sharma
– Sahil Sharma, Commented Jun 19, 2018 at 5:22

Shiladitya · Accepted Answer · 2018-06-19 04:56:51Z

1

Here you go with a solution if you are using jQuery v1.6 lesser version

$('form').submit(function() {
  $(this).find("input[type='submit']").attr('disabled','disabled');
});

For jQuery v1.6 +

$('form').submit(function() {
  $(this).find("input[type='submit']").prop('disabled',true);
});

Hope this will help you.

answered Jun 19, 2018 at 4:56

Shiladitya

12.2k17 gold badges29 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Arham Khan Over a year ago

how to debug it , to confirm that it is working , bcoz network is fast right now , and i can't check this

Shiladitya Over a year ago

@ArhamKhan Put a debugger in browser console & check it.

tomasz Over a year ago

@ArhamKhan: You can use Chrome DevTools, in the Network tab you can slow down the network as much as you like

Collectives™ on Stack Overflow

jQuery to prevent multiple click on button is not working

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related