Jquery ajax禁用提交按钮，直到表单完成

debugcn 发表于 Dev

DC琼斯

下面我有用于显示和处理表单的代码。该脚本工作正常，但现在我需要禁用提交按钮，直到完成表单上的字段。这样做的正确方法是什么？

我的剧本

$( function() {
$(".input").val("");
var dialog1, form,
dialog1 = $( "#dialog-form1" ).dialog({
dialogClass: 'ui-dialog-content1',
autoOpen: false,
maxHeight: 500,
height: 500,
width: 800,
modal: true,
buttons: [
{
 text: "Reset",
 click: function() {
   $('#Form1').trigger("reset");
   $("#imageviewdiv").hide();
   $("#pcicon").hide();
   $('#Preview4').html("");
   $('#previewtext').html("");
   $('#imageis').hide();
   $('#image_position_portrait').hide();
 }},
 {
 text: "Cancel",
 click: function() {
   $('#Form1').trigger("reset");
   $("#imageviewdiv").hide();
   $("#pcicon").hide();
   $('#Preview4').hide();
   $(this).dialog("close");
}},
{
text: "Submit",
click: function() {
var form = document.getElementById("Form1");
   var fd = new FormData(form );
   $.ajax({
     url: "insert_new_promotion.php",
     data: fd,
     cache: false,
     processData: false,
     contentType: false,
     type: 'POST',
     success: function (dataofconfirm) {
      window.location.reload();
    }
  });
  $(this).dialog("close");
 }}
]
});
$( "#new-record" ).button().on( "click", function() {
  dialog1.dialog( "open" );
});
});

非常感谢您抽出宝贵时间。

哟 T。

您可以在 Ajax 调用之前或beforeSend回调时禁用该按钮。请参阅回调函数队列的文档。这Event.target就是让您获得点击按钮的原因。

$("#dialog-form1").dialog({
  dialogClass: 'ui-dialog-content1',
  autoOpen: false,
  maxHeight: 500,
  height: 500,
  width: 800,
  modal: true,
  buttons: [
    {
      // Other buttons
    }, 
    {
      text: "Submit",
      click: function (e) {
        var button = e.target;
        var form = document.getElementById("Form1");
        var fd = new FormData(form );

        // Either disable it here or on `beforeSend` callback.
        button.disabled = true;

        $.ajax({
          url: "insert_new_promotion.php",
          data: fd,
          cache: false,
          processData: false,
          contentType: false,
          //beforeSend: function() {
          //  button.disabled = true;
          //},
          type: 'POST',
          success: function (dataofconfirm) {
            // You may not need to re-enable the button since you are reloading the page anyway
            button.disabled = false;

            window.location.reload();
          }
        });

        $(this).dialog("close");
      }
    }
  ]
})

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。