ajax on click disable the submit button and enable again

Question

Hello all i have this function which works awesome but i get small issue

 $(document).ready(function(){
$("input[type='submit']").attr("disabled", false);
$("form").submit(function(){
  $("input[type='submit']").attr("disabled", true).val("Please wait.");
    setTimeout(function(){
    $("input[type='submit']").attr("disabled", false).val("Submit");    
}, 3*1000);
  return true;
})
})

The issue is when i have 2 forms in a page it changes value of all the submit buttons i just want the function to get activate for only the button clicked not for all the submit buttons .

i hope you get my point . i know that i need to modify some things in the function but i am getting some issues doing that ...

score 1 · Accepted Answer · answered Nov 29 '18 at 07:30

1

Use this to refer to the currently submitted form, and then you can use .find to get that form's descendant submit input:

$("form").submit(function(){
  const input = $(this)
    .find("input[type='submit']")
    .attr("disabled", true)
    .val("Please wait.");
  setTimeout(function(){
    input
      .attr("disabled", false)
      .val("Submit");    
  }, 3*1000);
  return true;
});

Also note that you should probably prefer .prop over .attr, unless you're using an ancient version of jQuery.

answered Nov 29 '18 at 07:30

CertainPerformance

356,069
52
309
320

But your question asks how to select only the submit button inside the current form? – CertainPerformance Nov 29 '18 at 07:42
i mean the function should affect only the form whose submit button is clicked . – Amani Nov 29 '18 at 08:12
That's what the `$(this).find` should take care of - it'll find the `input` that is a descendant of the submitted form, and not any `input`s of any other `form`s on the page – CertainPerformance Nov 29 '18 at 08:13

ajax on click disable the submit button and enable again

1 Answers1