Question

我正在尝试提交一个我已经工作过的表单，但现在已将其修改为包含一个模态jQuery UI框，以便在用户按下“continue”之前不会提交。我遇到了各种各样的问题，包括在按下按钮之前让表单保持不变，但我认为我找到了解决方案，但实现它，我得到一个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
        });
    });
}

Original console errors

Answer 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);
        }
    });
}

Answer 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;
});
});

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

2 个答案: