JQuery get the event started with a Button click

Question

I am working on disabeling Buttons after the user clicked them, to prevent double submissions or actions. I have 2 types of buttons. A php button(or form button) that does a submit and reloads the page. I got no prblem with that. Cause i just disable the button for ever, and after the reload is pushable again. Here an example:

$(document).on('click', 'button', function() {
    var $this = $(this);
        htmls =  $(this).html();
       $(this).prop("disabled", true);
       setTimeout(function(){
           $this.prop("disabled", false);
       }, 2000);
});

this is now for 2 seconds but i will remove the setTimeout part. The bigger problems are the Javascript buttons, this buttons wont reload the page. When the user pushes the button it should be disabled until the process ends that was started with the button, and the enable it again. I can check if the button does a submit, or it just lets say clears all fields in the form. I was thinking maybe i can get the process that was started with the button push and then when it ends i can work on. Is this even possible? Or is there some other workaround?

migontech · Accepted Answer · 2013-03-26 07:29:34Z

You can use jQuery.ajax to make a request to server and when response returns from the server then continue working on same form or something else. What you do have to have in mind that you will have to collect all data from your form and send it as json object to server.

Small example based on your code:

$(document).on('click', 'button', function() {
    var $this = $(this);
        htmls =  $(this).html();
       $(this).prop("disabled", true);
       $.ajax({
          type: "POST",
          url: "some.php", //url to make post to
          data: JSON.stringify(formdata), //data collected from your form
          contentType: "application/json; charset=utf-8",
          dataType: "json",
          }).done(function( result) {
              //put here the code to process the result from server
          }).fail(function() { 
              alert("error"); // if something went wrong on server
          })
           .always(function() { 
              $(this).prop("disabled", false); //back enabling your button and maybe some other logic
          });;
});

read more about jQuery.ajax here http://api.jquery.com/jQuery.ajax/

if any other questions just let me know ;) I hope this would help a bit

yogi · Accepted Answer · 2013-03-26 07:24:01Z

1

You can do it like this

<input type='button' value='Javascript button' id="btn" />
    <script>
        $(document).ready(function () {

            $("#btn").click(function () {
                $(this).prop("disabled", true);
                // long processing
                $(this).prop("disabled", false);
            });

            //OR with a jquery request 

            $("#btn").click(function () {
                $(this).prop("disabled", true);

                $.ajax({
                    type: "POST",
                    url: "some url",
                    data: JSON.stringify(data),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    sucess: function (data) { alert(data); }
                }).always(function () {
                    $(this).prop("disabled", false);
                });

            });


        });
    </script>

answered Mar 26, 2013 at 7:24

yogi

19.6k13 gold badges67 silver badges93 bronze badges

2 Comments

Barta Tamás Over a year ago

the first one is the way i wanted to do it, the problem, is i want to make a global function, this should work on every button, and i have a lot buttons already, this is why i asked if there is a way to get the end of an event that was started with a button.

yogi Over a year ago

global function doesn't matter, if you are working with a synchronous scenario, if it's asynchronous than you will need to do extra work.

Collectives™ on Stack Overflow

JQuery get the event started with a Button click

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related