JQuery/JS/PHP - Disable Form And Submit Button Only After Submit

I have a form that I would like to disable the submit button and form itself after it has submitted. The form currently submits to itself and all the solutions I've tried so far e

Solution 1:

I can see two fundamental problems with your code. Firstly your jQuery selectors.

In the first function: The . selector (as in $(".send") works on the class attribute, not the name attribute. I would suggest you either change your Inputs to have class = send or you change the selector to $("[name=send]").

In the second function. I'm pretty sure $('input:submit') isn't a valid selector, and I'm not sure what is meant by it.

Check out: http://www.w3schools.com/jquery/jquery_ref_selectors.asp

The second problem is that you are submitting the form and thus triggering a page reload. I take it that this isn't the desired behaviour if you want to disable the form buttons? In which case you should disable the default behaviour of the button (There are many ways of doing that: Stop form refreshing page on submit ) and POST the data to the server yourself.

This would leave you with something like the following:

      $(function () {
          $("[name='send']").click(function () {
              $(this).attr("disabled", true);
              $("#frm").submit();
          });

          $("#frm").on("submit",function() {
             $.post("http://example.com/your_php_file.php",$(this).serialize());
             $(this).preventDefault();
          });  
      });

I haven't been able to test this myself because I don't have much time nor a handy web server, but this should give you a good start.