jQuery / JS / PHP - 仅在提交后禁用表单和提交按钮

时间:2016-03-17 22:33:46

标签: javascript php jquery html forms

我有一个表单,我想在提交后禁用提交按钮和表单。该表单目前已提交给自己,并且我到目前为止尝试的所有解决方案都禁用了表单并提交了按钮,但表单从未提交或表单已提交,但按钮/表单未被禁用。

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);

}
?>

修剪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>

我尝试过不同的功能,例如:

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

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

到目前为止,似乎没有任何工作。有人有想法吗?

1 个答案:

答案 0 :(得分:1)

我可以看到您的代码存在两个基本问题。首先是你的jQuery选择器。

在第一个函数中:.选择器(如$(".send")中所示,适用于class属性,而不是name属性。我建议您将输入更改为class = send或您将选择器更改为$("[name=send]")

在第二个功能中。我非常确定$('input:submit')不是一个有效的选择器,而且我不确定它的含义。

退房:http://www.w3schools.com/jquery/jquery_ref_selectors.asp

第二个问题是您正在提交表单,从而触发页面重新加载。我认为如果要禁用表单按钮,这不是所需的行为吗?在这种情况下,您应该禁用按钮的默认行为(有很多方法可以执行此操作:Stop form refreshing page on submit)并自行将数据发送到服务器。

这会给你留下如下内容:

      $(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();
          });  
      });

我自己也无法对此进行测试,因为我没有太多时间也没有方便的网络服务器,但这应该会给你一个良好的开端。