Ajax 调用后提交按钮不起作用答案

【问题标题】：Submit Button Not working After an Ajax CallAjax 调用后提交按钮不起作用
【发布时间】：2020-01-20 18:40:36
【问题描述】：

在 ajax 调用后提交按钮不起作用；但是，如果我加载页面它工作正常。这就是正在发生的事情：我确实有一个模式，显示有关电子邮件更改确认的对话框。如果用户点击确认，则表单提交正常；但是，如果用户单击“否”并继续并使用最初保存的电子邮件地址提交表单，但更新了不同的表单，则该按钮不会提交任何内容。我将不得不再次重新加载页面以使其正常工作。这是上述行为的JS代码。

==> 简而言之，我想要做的事情如下：如果客户来并尝试更改他们的电子邮件地址，模式会弹出一条确认消息（是或否）。如果他们单击是，则表单提交正常；但是，如果他们单击“否”并重新输入原始电子邮件，则提交按钮不会提交表单。

$(document).ready(function() {

  window.onload = function() {

    document.getElementById('confirmEmailChange').onclick = function() {
      document.getElementById('updateCustomerInfoFormId').submit();
      return false;
    };
    $('#updateInfoBut').click(function() {

      let currentCustomerEmail = $('#currentCustomerEmail').val();
      let customerEmail = $('#customerEmail').val();

      if (currentCustomerEmail !== customerEmail) {

        $('form[name=update_customer]').submit(function(e) {
          e.preventDefault();
        });

        $.ajax({
          url: "This is our API URL" + customerEmail,
          dataType: 'text',
          success: function(json) {

          },
          statusCode: {
            404: function() {
              $('#customerInfoModal').modal({
                show: true
              });

            },
            200: function() {
              $('#emailAlreadyUsedModal').modal({
                show: true
              });
            }
          }
        });
      }
    });
  }
});

【问题讨论】：

您检查控制台日志是否有错误？可能遇到了错误，导致按钮无法正常工作。
@devlincarnate 我在控制台中没有收到任何错误！

标签： javascript jquery

【解决方案1】：

看起来像

$('form[name=update_customer]').submit(function(e) {
    e.preventDefault();
});

阻止表单通过preventDefault() 调用自行提交。

表单提交的默认操作是提交表单本身，通过阻止默认操作，您基本上告诉表单提交然后停止提交。

如果您查看here，您会发现将回调传递给 submit() 本质上是为其提供了一个处理程序，而不是提交表单。并且每次您尝试以其他方式提交表单时都会调用该处理程序。

【讨论】：

是的，我需要这种行为来检查其他验证。我稍后通过其他按钮点击提交表单...
@Zeusox 因为当你拦截提交函数时，你不仅触发了这个，还给表单提交添加了回调。如果您在preventDefault() 调用之前添加一行日志，您应该会在每次尝试提交表单时看到它被触发，无论是通过按钮单击还是其他方法。
@Zeusox - 将e.preventDefault() 放在那里会使这部分代码毫无意义。正如@Chen 所说，您的表单永远不会发送。
这取决于你想要做什么。如果您尝试通过 ajax 发送表单，请保留 preventDefault 并将您的 ajax 调用移动到提交事件中。
@Zeusox 你可以手动验证表单而不是调用提交吗？

【解决方案2】：

我通过在 if 语句函数中移动 e.preventDefault(); 并在确认模态时在 ajax 调用之外手动提交按钮来解决这个问题。以下效果很好：

   $(document).ready(function(){

  document.getElementById('confirmEmailChange').onclick = function() {
      document.getElementById('updateCustomerInfoFormId').submit();
      return false;
  };

  $('#updateInfoBut').on('click', function(e) {
    let currentCustomerEmail = $('#currentCustomerEmail').val();
    let customerEmail = $('#customerEmail').val();
        if(currentCustomerEmail !== customerEmail){
          e.preventDefault();
          $.ajax({
               url:"API LINK GOES HERE" + customerEmail,
               dataType: 'text',
               success:function(json){
               },
               statusCode: {
               404: function() {
                 $('#customerInfoModal').modal({show: true});

               },
               200: function() {
                 $('#emailAlreadyUsedModal').modal({show: true});

               }
                }
          });

        } 
  });

});

【讨论】：