jQuery/JS/PHP - Disable Form and Submit button only after submit

Question

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 either disable the form and submit button, but the form is never submitted or the form is submitted but the button/form are not disabled.

PHP:

<?php

if(isset($_POST['send'])){

if(!isset($_SESSION)) 
    { 
        session_start();
        session_regenerate_id();
    }
if($_SESSION['user_login_status']==false)
{header('Location:../index.php');}

$Firstname = $_POST["firstname"];
$Lastname = $_POST["lastname"];
$EmpID = $_POST["employeeid"];
$Ticket = $_POST["ticket"];
$Office = $_POST["office"];
$Division = $_POST["division"];
$Device = $_POST["device"];
$Secure = $_POST["secure"];
$Zendesk = $_POST["zendesk"];
$Agent = $_SESSION['user'];

$psPath = 'c:\\Windows\\System32\WindowsPowerShell\v1.0\\powershell.exe -version 5';
$psDIR = "d:\\wamp64\\www\\includes\\";
$psScript = "NewHire.ps1";
$runCMD = $psPath. ' -ExecutionPolicy RemoteSigned '.$psDIR.$psScript.' -Firstname ' .$Firstname. ' -Lastname '.$Lastname. ' -EmpID ' .$EmpID. ' -Ticket ' .$Ticket. ' -Office ' .$Office. ' -Division ' .$Division. ' -Device ' .$Device. ' -Secure ' .$Secure. ' -Zendesk ' .$Zendesk. ' -Agent ' .$Agent;

$createuser = exec($runCMD, $out);

}
?>

Trimmed down HTML:

      <form class="rnd5" method="post" id="frm">
        <div class="form-input clear">
        <label class="one_third" for="firstname">Firstname <span class="required"><font color="red">*</font></span>
            <input type="text" name="firstname" id="firstname" autofocus required>
        </label>
        </div>

    <!-- ################################################################################################ -->   
        <div class="form-input clear">
        <label class="one_third" for="lastname">Lastname <span class="required"><font color="red">*</font></span>
            <input type="text" name="lastname" id="lastname" required>
        </label>
        </div>


        <p>
          <input type="submit" name="send" value="Submit">
          &nbsp;
          <input type="reset" value="Reset">
        </p>
      </form>
    </div>
    <!-- ################################################################################################ -->
    <div class="clear"></div>
  </div>
</div>

<!-- Footer -->
<?php include('../footer.php'); ?>
</body>
</html>

I have tried different functions such as:

          $(function () {
              $(".send").click(function () {
                  $(".send").attr("disabled", true);
                  $('#frm').submit();
              });
          });

and

$('input:submit').click(function(){
    $('input:submit').attr("disabled", true);   
});

Nothing so far appears to be working. Anyone have ideas?

Answer 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.