javascript - 如何在 PHP 中提交后禁用提交按钮？

Question

我浏览了有关此问题的其他问题，但找不到令人满意的答案。我有一个测验网站，用户从四个选项中选择一个选项，然后单击提交。我想在单击一次后禁用提交按钮。

有没有办法用 PHP 做到这一点？如果没有，有没有办法用最少的 JS 做到这一点。

Answer 1

可用的解决方案

由于您标记了问题 jQuery，因此您可以使用以下一些简单的 jQuery 解决方案：
要在单击时禁用它，您可以简单地：

$('input[type="submit"]').click(function() {
    this.disabled = true;
};

您可以做得更好，并且仅在提交表单后禁用它：

$("form").submit(function() {
    $(this).find('input[type="submit"]').prop("disabled", true);
});

解决方案演示

这是上述逻辑的简单演示，在 jsFiddle 中：http: //jsfiddle.net/zb8CZ/
（请注意，在该实现中，我没有使用 jQuery，而是使用纯 JS；但是，为了跨浏览器的可移植性，以及作为对 jQuery 提供的许多其他方法的访问（加上语法糖！）我推荐 jQuery 方法。

很好注意...

请注意，尝试在 HTML 中实现 JS 事件处理内联（使用onsubmit="..."oronclick="..."属性）被认为是不好的做法，因为它会使您的功能与布局/显示层混淆。您还会丢失编辑器可能提供的任何语法突出显示和/或错误检查，并且通常会使开发和维护应用程序变得更加困难，因为您的代码没有逻辑顺序。

Answer 2

这些天的常见做法是使用 AJAX，但这并不能回答问题，也没有任何 Javascript 解决方案没有后端的任何帮助。假设您有一个表格，例如：

<form action="foo.php" method="post">
    <input type="text" name="myVariable"/>
    <button type="submit">Submit</button>
</form>

当提交到您的 PHP 文件进行处理时，您将通过$_GET或访问您的表单数据，$_POST并执行您需要对其执行的任何操作。此时，您将能够推断表单是否已提交或是否成功 - 基于此，您可以简单地标记带有属性input的button元素disabled，这是一个基本示例：

<?php # foo.php 
    $myVariable = isset($_POST['myVariable']) ? $_POST['myVariable'] : '';
    echo "You submitted: {$myVariable}\n"; // do something useful...

    // if variable is not an empty string, ie. it has been submitted,
    // set $disabled which can then be output in-line with your HTML
    $disabled   = ($myVariable != '') ? 'disabled' : '';
?>
<form action="foo.php" method="post">
    <input type="text" name="myVariable"/>
    <button type="submit" <?php echo $disabled; ?>>Submit</button>
</form>

然后，这将输出您的新表单，并根据您的条件禁用按钮。我还应该注意，根据您的不同，您doctype可能需要为属性赋予一个值才能将其视为有效标记，但一般来说：

<!-- valid HTML5 -->
<button disabled>button</button>

<!-- valid XHTML -->
<button disabled="disabled">button</button>

---

一些相关的 StackOverflow 阅读：

什么是文档类型？
是什么?:意思？（三元运算符）
PHP：我如何通过 AJAX 提交表单（jQuery 版本）

Answer 3

对于这样的禁用写入，单击后将被禁用。

<input type="submit" id="but_sub" name="submit" \>


    $("#but_sub").click(function() {
        $(this).attr("disabled",true);
    }

或者

    $('#but_sub').click(function() {
        $(this).attr("disabled","disabled");
    }

Answer 4

尝试这个。您可能希望将每个答案的值传递给通过 AJAX 执行后端工作的 PHP 文件。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
<script>
    $('#question').submit(function(){
       //Get the value of the answer that was checked
       var answer = $('input:radio[name=question_one]:checked').val();

       //Use jQuery's AJAX function to send the data to a PHP file that does backend work 
       $.ajax({  
          type:'POST',  
          url:'quiz_backend.php',  
          data:'answer='+ answer,
          success: function() {
              //Hide the submit button upon successful submission
              $('#submit').attr("disabled", true);
              event.preventDefault();
          }
       });
    });
</script>

<form id="question">
   <input type="radio" name="question_one" value="answer_one">A<br />
   <input type="radio" name="question_one" value="answer_two">B<br />
   <input type="radio" name="question_one" value="answer_three">C<br />
   <input type="radio" name="question_one" value="answer_four">D<br />

   <input type="submit" value="submit" id="submit"/>
</form>

更多关于 jQuery 的 AJAX 调用的信息在这里。

Answer 5

非常简单的仅javascript方法

<form action="" method="post" >
<input type="submit" name="SUBMIT" value="Submit Form"
   onclick="this.disabled='disabled';this.form.submit();" />
</form>

Answer 6

我留下一个代码：

    <form name="myform" action="/" method="post" onsubmit="document.getElementById('submit_button').disabled = 1;">

<!-- form elements here -->

</form>

Answer 7

带有用户消息的示例注册按钮：

<input type="submit" onclick="this.disabled=true;this.value='ADD USER MESSAGE...';this.form.submit();" class="ADD BUTTON CLASS HERE" value="Register!">

.sub-btn:hover {
  color: #FFFFFF;
  background-color: #406800;
  border-color: #82B33C;
  transition: all .25s linear;
  -o-transition: all .25s linear;
  -moz-transition: all .25s linear;
  -webkit-transition: all .25s linear;
  -webkit-appearance: none;
  border-radius: 4px;
}

.sub-btn {
  border-width: 1px;
  border-style: solid;
  font-family: 'Bitter', serif;
  font-weight: 700;
  font-size: 20px;
  margin-left: 0;
  padding: 10px;
  width: 100%;
  color: #f8f8f8;
  background-color: #82B33C;
  border-color: #406800;
  transition: all .25s linear;
  -o-transition: all .25s linear;
  -moz-transition: all .25s linear;
  -webkit-transition: all .25s linear;
  -webkit-appearance: none;
  border-radius: 4px;
}

.tx-shadow {
  text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.45);
}

<input type="submit" onclick="this.disabled=true;this.value='Creating Account, please wait...';this.form.submit();" class="sub-btn tx-shadow" value="Register!">

Answer 8

只需尝试以下代码。我希望它会帮助你...

    $('#contact-form').submit(function () {
        if ($(this).valid()) {
            $('.submit').attr("disabled", true);
        }
    });