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

下面是显示和处理表单的代码。脚本工作正常，但现在我需要禁用submit按钮，直到表单上的字段完成。哪种方法是正确的

我的剧本

$( 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" );
});
});

---

非常感谢您的时间。

您可以添加事件处理程序，只需为所有文本字段提供一个公共类，并检查这些字段是否都已填充

$('.input-fields').on('change',function(){
    var disable = false
   $('.input-fields').each(function(){
      if($(this).val() == ''){
         disable = true
      }

    }

    $('#button-id').prop('disabled',disable)

})

第二种方法

在

标签中添加

data toggle=“validator”novalidate=“true”

并将

必填项添加到必填字段，它将自动禁用提交按钮

如果您需要更多帮助，请告诉我
您可以添加事件处理程序，只需为所有文本字段提供一个公共类，并检查这些字段是否都已填充

$('.input-fields').on('change',function(){
    var disable = false
   $('.input-fields').each(function(){
      if($(this).val() == ''){
         disable = true
      }

    }

    $('#button-id').prop('disabled',disable)

})

第二种方法

在
标签中添加
data toggle=“validator”novalidate=“true”
并将
必填项添加到必填字段，它将自动禁用提交按钮

如果您需要更多帮助，请告诉我
您可以在Ajax调用之前或在发送
回调之前禁用该按钮。有关详细信息，请参阅文档。是什么让你得到点击按钮

$("#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");
      }
    }
  ]
})

您可以在Ajax调用之前禁用该按钮，也可以在发送回调之前禁用该按钮。有关详细信息，请参阅文档。是什么让你得到点击按钮

$("#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");
      }
    }
  ]
})

只需在Ajax
POST
之前禁用该按钮，然后在
success
处理程序上重新启用它即可。@jom hi，感谢您的回复，禁用并重新启用，方法和位置？有几种方法，请看一看。您应该能够在发送之前禁用
上的按钮，并在需要时重新启用它。只需在Ajax
POST
之前禁用按钮，然后在
success
处理程序上重新启用它。@jom hi，谢谢您的回复，禁用和重新启用，如何和在哪里？有几种方法，请看一看。您应该能够在发送前禁用
上的按钮，并在需要时重新启用它。您好，我认为我遇到的问题是，提交按钮没有作为“表单按钮”直接嵌入表单中，它；它是由我的脚本生成的，这就是为什么我认为我有问题，有什么想法。你仍然可以通过在创建时动态设置按钮的ID来实现这一点。您在运行时创建了多少按钮？您好，我认为我遇到的问题是，提交按钮没有作为“表单按钮”直接嵌入表单中，它；它是由我的脚本生成的，这就是为什么我认为我有问题，有什么想法。你仍然可以通过在创建时动态设置按钮的ID来实现这一点。您在运行时创建了多少按钮？