jQuery/JS/PHP - 仅在提交后禁用表单和提交按钮 [英] jQuery/JS/PHP - Disable Form and Submit button only after submit

查看:36
本文介绍了jQuery/JS/PHP - 仅在提交后禁用表单和提交按钮的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个表单,我想在提交后禁用提交按钮和表单本身.表单当前提交给自身,到目前为止我尝试过的所有解决方案要么禁用表单并提交按钮,但从未提交表单,或者提交表单但未禁用按钮/表单.

PHP:

精简的 HTML:

 
<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" 需要自动对焦>

<!-- ######################################################################################### --><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>

<p><input type="submit" name="send" value="Submit">&nbsp;<输入类型=重置"值=重置"></p></表单>

<!-- ######################################################################################### --><div class="clear"></div>

<!-- 页脚--><?php include('../footer.php');?></html>

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

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

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

到目前为止似乎没有任何效果.有人有想法吗?

解决方案

我发现您的代码存在两个基本问题.首先是你的 jQuery 选择器.

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

在第二个函数中.我很确定 $('input:submit') 不是一个有效的选择器,我不确定它是什么意思.

查看:http://www.w3schools.com/jquery/jquery_ref_selectors.asp

第二个问题是您正在提交表单并因此触发页面重新加载.如果您想禁用表单按钮,我认为这不是所需的行为?在这种情况下,您应该禁用按钮的默认行为(有很多方法可以做到这一点:在提交时停止表单刷新页面)并自己将数据POST到服务器.

这会给您留下类似以下内容:

 $(function () {$("[name='send']").click(function () {$(this).attr("disabled", true);$("#frm").提交();});$("#frm").on("提交",function() {$.post("http://example.com/your_php_file.php",$(this).serialize());$(this).preventDefault();});});

我无法自己测试这个,因为我没有太多时间也没有方便的网络服务器,但这应该给你一个好的开始.

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?

解决方案

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.

这篇关于jQuery/JS/PHP - 仅在提交后禁用表单和提交按钮的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
PHP最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆