用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="..."或onclick="..."屬性）被認為是不好的做法，因為這會使您的功能與布局/顯示層混淆。 您還會失去編輯器可能提供的語法高亮顯示和/或錯誤檢查功能，並且通常會使開發和維護應用程序更加困難，因為代碼沒有邏輯順序。

Answer 2

非常簡單的javascript only方法

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

Answer 3

我留下一個代碼：

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

<!-- form elements here -->

</form>

Answer 4

對於禁用這樣的寫操作，單擊后將被禁用。

<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 5

嘗試這個。 您可能希望將每個答案的值傳遞給通過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 6

如今，通常的做法是使用AJAX，但這不能解決問題，沒有后​​端的任何幫助也不能解決任何Ja​​vascript解決方案。 假設您有一個表格，例如：

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

提交到PHP文件進行處理時，您將通過$_GET或$_POST訪問表單數據，並進行任何處理。 在這一點上，您將能夠推斷出表單是否已提交或成功-基於此，您可以簡單地用disabled屬性標記input或button元素，這是一個基本示例：

<?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 7

只需嘗試以下代碼。 希望對您有幫助...

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

Answer 8

帶有用戶消息的示例注冊按鈕：

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