jQuery/Bootstrap3：提交後禁用/隱藏按鈕

我是JavaScript新手，但我已經搜索了很多關於這個，並嘗試了幾十個不同的選擇。他們大多數什麼都沒做，其他人阻止表單提交！jQuery/Bootstrap3：提交後禁用/隱藏按鈕

我有以下形式：

<form name="buy" action="process_order.php" method="post"> 
    <input type="hidden" name="itemid" value="{$itemid}"> 
    <button type="submit" id="submit" name="submit" class="btn btn-sm btn-success">Buy</button> 
</form>

我想要麼禁用submit按鈕後提交，或只是讓它消失，以避免重複提交，哪個效果最好。

我試過多個JS方法，我甚至不知道哪一個最好，所以我不會在這裏提供一個以避免混淆。

我會很感激，如果你能提供給我一個完整的javascript <script>片段和我最終需要的任何東西。我寧願不要在這裏使用Ajax，但讓我知道這是否會有所幫助。

非常感謝！

來源

2014-03-06 Sharp

爲了防止第一後第二次提交，你必須使用AJAX，就我個人而言，因爲每次提交表單時，頁面會刷新，如果形式是不會有任何跡象已經提交或不提交。我的方法在這裏將使用jQuery，這是你如何做到的。

首先，從您的<form>中刪除屬性action和method，我們將用AJAX調用替換它。就像這樣簡單;其次，包含必要的jQuery庫;其次，包含必要的jQuery庫。

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

然後腳本;

<script> 
    $(function(){ 
     $('form').on('submit', function(){ 
      var data = $(this).serializeArray() 
      $.post('process_order.php', data, function(r,s){ 
       console.log(r) 
      }); 
      // Updated answer (change submit button's ID to class instead); 
      $(this).find('.submit').prop('disabled', true); 
      return false; 
     }) 
    }) 
</script>

而就是這樣。這與@ Styphon的答案相同，但我相信這是更完整的，我希望這有助於。

乾杯！

來源

2014-03-06 17:03:24 rolodex

尼斯和詳細。似乎很好。這正是我所期待的！謝謝 – Sharp

也許我的問題太簡單了。事實上，我有幾種形式，每種產品都有一種形式。這似乎只對第一種形式有影響。有沒有快速解決？ – Sharp

@Sharp首先，不要給提交按鈕一個「提交」的「ID」。其次，不要給所有的按鈕設置相同的「ID」 - 它們必須是唯一的。所以要麼給他們獨特的，要麼除非你真的需要，否則不要給他們一個「id」。第三，你可以使用'$（this）.find（'input [type =「submit」]'）。prop（「disabled」，true）;'在提交的表單中禁用提交按鈕 – Ian

您可以使用jQuery。

$('form[name="buy"]').on('submit', function() { 
    $('#submit').prop('disabled', true); 
});

只要提交表單，就會禁用提交按鈕。

由於@rolodex指出提交表單將刷新頁面，因此禁用的按鈕將再次啓用。這就是我如果不使用Ajax（如@名片盒的答案一樣）做：

<form name="buy" action="process_order.php" method="post"> 
    <input type="hidden" name="itemid" value="{$itemid}"> 
    <button type="submit" id="submit" name="submit" class="btn btn-sm btn-success"<?php if(isset($_POST['itemid'])) echo ' disabled'; ?>>Buy</button> 
</form>

因此一旦有人提交表單，該按鈕將被禁用。這不會阻止某人在沒有表單數據的情況下再次刷新頁面，但也不會使用Ajax。解決這個問題的唯一方法就是使用cookie。

來源

2014-03-06 16:52:14 Styphon

爲什麼-1？這正是OP要求的。 – Styphon

默認表單提交將觸發頁面刷新，這將使按鈕禁用無用。 – rolodex

好點。我會更新您的答案的替代方案。 – Styphon

我用這個（需要的jQuery）：

<script> 
    var submiting = false; 

    $(function() { 
     $('form').submit(function() { 
      if (!submiting) { 
       submiting = true; 
       $('button[type=submit]').prop('disabled', true); //cosmetic 
      } else { 
       return false; 
      } 
     }); 
    }); 
</script>

有了這個代碼，當表單提交，布爾將阻止任何進一步的提交（即。用戶點擊提交按鈕的速度非常快）並且將禁用該按鈕以防止進一步的點擊。

但是此處描述一個更好的形式給出：

Prevent double submission of forms in jQuery

來源

2014-03-06 17:37:04

這是一個巧妙的解決辦法

$('form').submit(function(){ //prevent multiple submit 
      $(':submit', this).click(function() { 
       console.log("submit prevented"); // Debug purpose. 
       return false; 
      }); 
     });

如果您提交例如4倍的形式，你會看到3 "submit prevented"輸出。

$("#btn").trigger("click"); 
$("#btn").trigger("click"); 
$("#btn").trigger("click"); 
$("#btn").trigger("click");

來源

2015-03-02 14:52:34 yuceel

jQuery/Bootstrap3：提交後禁用/隱藏按鈕

回答

相關問題