Question

我遇到通过Ajax提交表单的问题。我首先使用ajax（GET）将html表单拉成div，然后使用ajax（POST）将表单提交到PHP处理器页面。但是，如果我使用ajax将html表单注入div然后通过单独的ajax（POST）提交，则表单填写后表单不会提交数据！（两个Ajax调用彼此独立工作正常）任何人都知道这两个函数不能一起工作吗？

以下代码：

$.ajax( { 
            url: "/microsub.php",
            method: 'GET',
            success: function (data) {
                if (data == 1) {$('#rdm-below-header').append('<div id=\"modal\" class=\"modalStyle\">' +

    '<div>' +

    '<button type=\"button\" id=\"close\" class=\"close\" data-dismiss=\"modal\" aria-label=\"close\"><span aria-hidden=\"true\">&times;</span></button><br>' +

      '<div id=\"titleText\" style=\" text-align:center; font-size: 24px; margin-top: 15px;\">Fill in your details for 24hr access to Risk.net</div><br>' +


     '<form id=\"microsubs_form\"  style=\"text-align:center; clear:both\">' +   

        '<input type=\"text\" id=\"ms_firstName\" name=\"ms_firstName\" required placeholder=\"First Name\" style=\"float:left;\" >'  +

        '<input type=\"text\" id=\"ms_lastName\" name=\"ms_lastName\" required style=\"float:left; margin-left:20px;\" placeholder=\"Last Name\">' +

        '<input type=\"email\" id=\"ms_email\" name=\"ms_email\" required placeholder=\"Corporate Email address\" pattern=\"^.*(\*barclays|\*barcap.com).*$\" oninvalid=\"this.setCustomValidity(\'Please enter your corporate email\')\" style=\"float:left; margin-top: 10px;\">' +

        '<input type=\"password\" id=\"ms_password\" name=\"ms_password\" required style=\"clear:right; margin-top: 10px; margin-left: 20px;\" placeholder=\"Password\" pattern=\".{6,}\">' +

        '<input type=\"text\" id=\"microsub_flag\" name=\"microsub_flag\" hidden=\"true\">' +



        '<input type=\"submit\"  name=\"submit\" style=\"alignment-adjust:central; margin-top:30px; clear:right;\" ><br>' +

    '</form>' +



     '<div style=\"text-align:center; clear: both; font-size: 16px; margin-top: 5px; \"><br>'  +

      'If you already have a subscription, <a href=\"login\">sign in here.</a>' +



     '</div>' + 

 '</div>' +  

'</div>');
};
                 // console.log(data);
             },
             error: function(error) {
                 console.log(error);
             }

        })




//AJAX POST DATA TO API \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
    // Variable to hold request
var request;

// Bind to the submit event of our form
$("#microsubs_form").submit(function(event){

    // Abort any pending request
    if (request) {
        request.abort();
    }
    // setup local variables
    var $form = $(this);

    // cache all the fields
    var $inputs = $form.find("input, select, button, textarea");

    // Serialize the data in the form
    var serializedData = $form.serialize();

    // Let's disable the inputs for the duration of the Ajax request.
    // Note: we disable elements AFTER the form data has been serialized.
    // Disabled form elements will not be serialized.
    $inputs.prop("disabled", true);


    // Prevent default posting of form
    event.preventDefault();

    // Fire off the request to.php
    request = $.ajax({
        url: "/ms_form_handler.php",
        type: "POST",
        data: serializedData,
        success: function (data){
            console.log(data);
        },
        error: function(error) {
                 console.log(error);
             }
    });

});

Answer 1

您正在尝试绑定到在调用代码时不存在的表单的submit事件。

相反，绑定到存在的元素并使用jquerys .on

使用委托

//#microsubs_form does not exist in the dom at this point
//$("#microsubs_form").submit(function(event){
$("#rdm-below-header").on('form','submit', function(event){
    //your ajax submit code
});

两个Ajax调用一个调用表单，一个提交不工作？

1 个答案: