Question

我想在用户单击HTML表单中的提交按钮后禁用提交按钮。但是表单可以直接重定向到下一页而不禁用按钮。

理想的顺序是：

用户单击“提交”按钮
进行验证
提交按钮被禁用
表单数据已提交到数据库/电子表格
用户被重定向到谢谢页面

使用以下代码，唯一的问题是提交按钮没有被禁用，其他所有功能都正常运行。请提出解决此问题的替代方法。我正在使用在jquery 1.4.1上运行的WordPress。因此，$ input.prop（'disabled'，true）也不起作用

HTML：

    <form id="test-form" method="post" name="test-form" action="">
<div>
<input class="input-field" name="Name" required type="text" placeholder="Enter name" />
</div>

<div>
<input class="input-field" name="Phone" required type="number" placeholder="Enter number" />
</div>

<div><button id="submit-form" class="btn" type="submit" name="submit-form">Submit</button></div>
</form>

JQUERY

var $form = $('form#test-form');
url = 'https://abcd';


 $form.submit(function(e) {
  $('submit-form').attr('disabled', 'disabled');
  var jqxhr = $.ajax({
    url: url,
    method: "GET",
    dataType: "json",
    data: $form.serializeObject()
  }).success(function() {
            location.replace("/thank-you/");
        });
e.preventDefault();
      });
    });

Answer 1

您获得的ID错误。试试这个

$(function(){
var $form = $('#test-form');
url = 'https://abcd';
 $form.submit(function(e) {
    e.preventDefault();    
  $('#submit-form').attr('disabled', 'disabled');
  var jqxhr = $.ajax({
    url: url,
    method: "GET",
    dataType: "json",
    data: $form.serializeObject()
  }).success(function() {
            location.replace("/thank-you/");
        });
      });
      });

禁用按钮在jquery和ajax中不起作用

1 个答案: