jQuery保持表单提交直到按下“继续”按钮

Posted 2023-05-09

【中文标题】jQuery保持表单提交直到按下“继续”按钮

【英文标题】：jQuery hold form submit until "continue" button pressed

【发布时间】：2013-11-25 05:10:10

【问题描述】：

我正在尝试提交一个我已经工作过的表单，但现在已经对其进行了修改以包含一个模态 jQuery UI 框，以便在用户按下“继续”之前它不会提交。我遇到了各种各样的问题，包括让表单保持直到按下该按钮，但我想我已经找到了解决方案，但是实施它，我得到了一个 SyntaxError ，我找不到它的来源.

在 kevin B 的帮助下，设法找到了表单正在提交的答案，但返回的 JSON 响应的格式不完全正确。响应是没有提交表单，所以问题仍然存在。

所以用提供的反馈更新了代码，现在需要找出表单没有提交的原因。我知道它与第二个功能有关，即无法识别已按下提交按钮，因此需要知道如何提交该表单数据而无需再次提交表单。

下面是新代码：

function submitData() 
$("#submitProvData").submit(function(event)  
    event.preventDefault();
    var gTotal, sTotal, dfd;
    var dfd = new $.Deferred();
    $('html,body').animate( scrollTop: 0 , 'fast');
    $("#submitProvData input").css("border", "1px solid #aaaaaa");
    $("#submitProvData input[readonly='readonly']").css("border", "none");
    sTotal = $('#summaryTotal').val();
    gTotal = $('#gptotal').val();
    if(gTotal !== 'sTotal')
        $("#newsupinvbox").append('<div id="newsupinvdiagbox" title="Warning - Totals do not match" class="hidden"><p>Press "Continue", to submit the invoice flagged for attention.</p> <br /><p class="italic">or</p><br /> <p>Press "Correct" to correct the discrepancy.</p></div>') //CREATE DIV
        //SET
        $("#newsupinvdiagbox").dialog(
            resizable: false,
            autoOpen:false,
            modal: true,
            draggable: false,
            width:380,
            height:240,
            closeOnEscape: false,
            position: ['center',20],
            buttons: 
                'Continue': function() 
                    $(this).dialog('close');
                    reData();
                , // end continue button
                'Correct': function() 
                    $(this).dialog('close');
                        return false;
                     //end cancel button
                //end buttons
            );//end dialog
            $('#newsupinvdiagbox').dialog('open');
        
        return false;
    );


function reData() 
    console.log('submitted');
    $("#submitProvData").submit(function(resubmit)
        console.log('form submit');
        var formData;
        formData = new FormData($(this)[0]);
        $.ajax(
            type: "POST",
            url: "functions/invoicing_upload_provider.php",
            data: formData,
            async: false,
            success: function(result) 
                $.each($.parseJSON(result), function(item, value)
                    if(item == 'Success')    
                        $('#newsupinv_window_message_success_mes').html('The provider invoice was uploaded successfully.');
                        $('#newsupinv_window_message_success').fadeIn(300, function ()
                            reset();
                        ).delay(2500).fadeOut(700);
                     else if(item == 'Error')      
                        $('#newsupinv_window_message_error_mes').html(value);
                        $('#newsupinv_window_message_error').fadeIn(300).delay(3000).fadeOut(700);
                     else if(item == 'Warning')      
                        $('#newsupinv_window_message_warning_mes').html(value);
                        $('#newsupinv_window_message_warning').fadeIn(300, function ()
                            reset();
                        ).delay(2500).fadeOut(700);
                     
                );
            ,
            error: function() 
                $('#newsupinv_window_message_error_mes').html("An error occured, the form was not submitted");
                $('#newsupinv_window_message_error').fadeIn(300);
                $('#newsupinv_window_message_error').delay(3000).fadeOut(700);
            ,
            cache: false,
            contentType: false,
            processData: false
        );
    );

【问题讨论】：

我严重怀疑您是否需要取消绑定/绑定事件。您可能只需要绑定一次事件而不是重新绑定它。

您能给我们提供一个 JSFiddle 吗？

基本上，绑定到提交事件，立即阻止默认，做任何需要的验证，然后打开对话框。单击对话框中的继续按钮时，使用$(theform)[0].submit() 强制表单提交，从而绕过jquery 绑定事件。

或者，更好的是，因为您使用 ajax 提交，所以完全删除延迟对象，只需将 ajax 移动到继续按钮的单击处理程序。似乎您正在使这种方式更复杂比它需要的。

“我收到一个 SyntaxError，我找不到它的来源。” 你是什么意思，你找不到它的来源？您必须能够看到行号。

【参考方案1】：

在 Kevin B 的大力帮助下，我设法让表单按我的意愿工作。表单现在提交，答案在于使用 .serialise() 而不是 FormData 来让表单最终正确提交。

下面贴的是完整的代码：

function submitData() 
$("#submitProvData").submit(function(event)  
    event.preventDefault();
    var gTotal, sTotal, dfd;
    var dfd = new $.Deferred();
    $('html,body').animate( scrollTop: 0 , 'fast');
    $("#submitProvData input").css("border", "1px solid #aaaaaa");
    $("#submitProvData input[readonly='readonly']").css("border", "none");
    sTotal = $('#summaryTotal').val();
    gTotal = $('#gptotal').val();
    if(gTotal !== 'sTotal')
        $("#newsupinvbox").append('<div id="newsupinvdiagbox" title="Warning - Totals do not match" class="hidden"><p>Press "Continue", to submit the invoice flagged for attention.</p> <br /><p class="italic">or</p><br /> <p>Press "Correct" to correct the discrepancy.</p></div>') //CREATE DIV
            //SET
            $("#newsupinvdiagbox").dialog(
                resizable: false,
                autoOpen:false,
                modal: true,
                draggable: false,
                width:380,
                height:240,
                closeOnEscape: false,
                position: ['center',20],
                buttons: 
                    'Continue': function() 
                        $(this).dialog('close');
                        reData();
                    , // end continue button
                    'Correct': function() 
                        $(this).dialog('close');
                        return false;
                     //end cancel button
                //end buttons
            );//end dialog
            $('#newsupinvdiagbox').dialog('open');
         else 
            reData(); //CONTINUE WITH FORM SUBMIT
        
        return false;
    );


function reData() 
    var formData;
    formData = $("#submitProvData").serialize();
    $.ajax(
        type: "POST",
        url: "functions/invoicing_upload_provider.php",
        data: formData,
        async: false,
        success: function(result) 
            $.each($.parseJSON(result), function(item, value)
                if(item == 'Success')    
                    $('#newsupinv_window_message_success_mes').html('The provider invoice was uploaded successfully.');
                    $('#newsupinv_window_message_success').fadeIn(300, function ()
                        reset();
                    ).delay(2500).fadeOut(700);
                 else if(item == 'Error')      
                    $('#newsupinv_window_message_error_mes').html(value);
                    $('#newsupinv_window_message_error').fadeIn(300).delay(3000).fadeOut(700);
                 else if(item == 'Warning')      
                    $('#newsupinv_window_message_warning_mes').html(value);
                    $('#newsupinv_window_message_warning').fadeIn(300, function ()
                        reset();
                    ).delay(2500).fadeOut(700);
                 
            );
        ,
        error: function() 
            $('#newsupinv_window_message_error_mes').html("An error occured, the form was not submitted");
            $('#newsupinv_window_message_error').fadeIn(300);
            $('#newsupinv_window_message_error').delay(3000).fadeOut(700);
        
    );

【参考方案2】：

使用 jquery/ajax 打破表单和发布的完整系统

$(document).ready(function(e) 
$('#form_sendemail').submit(function(e) 
$.ajax(
  url: 'sendmail.php',
  type: 'POST',
  data: $(this).serialize(),
  dataType: 'json',
  beforeSend: function (XMLHttpRequest) 
    //
    $('#form_sendemail .has-error').removeClass('has-error');
    $('#form_sendemail .help-block').html('').hide();
    $('#form_message').removeClass('alert-success').html('');
  ,
  success: function( json, textStatus ) 
    if( json.error ) 
      // Error messages
      if( json.error.name ) 
        $('#form_sendemail input[name="name"]').parent().addClass('has-error');
        $('#form_sendemail input[name="name"]').next('.help-block').html( json.error.name ).slideDown();
      
      if( json.error.email ) 
        $('#form_sendemail input[name="email"]').parent().addClass('has-error');
        $('#form_sendemail input[name="email"]').next('.help-block').html( json.error.email ).slideDown();
      
      if( json.error.message ) 
        $('#form_sendemail textarea[name="message"]').parent().addClass('has-error');
        $('#form_sendemail textarea[name="message"]').next('.help-block').html( json.error.message ).slideDown();
      
    
    //
    if( json.success ) 
      $('#form_message').addClass('alert-success').html( json.success ).slideDown();

      setTimeout(function() 
        $('#form_message').slideUp("fast", function() 
          $(this).removeClass('alert-success').html('');
         );
      ,4000);
      $('#form_sendemail')[0].reset();
    

  ,
  complete: function( XMLHttpRequest, textStatus ) 
    //
  
);

return false;
);
);