Yondaime14 Yondaime14 - 3 months ago 9
Ajax Question

Two Ajax calls one to call form and one to submit not working?

I am having a problem with a form submitting via Ajax.
I first use ajax(GET) to pull html form into a div, then use ajax(POST) to submit form to PHP processor page. However if i use ajax to inject the html form into a div then submit via a separate ajax(POST), the form does not submit data once form filled in! (Both Ajax calls work fine independently of each other) Anyone got an idea both functions will not work together?

code below:

$.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

You are attempting to bind to the submit event of a form that does not exisit at the time the code is called.

Instead, bind to an element that is present and use delegation via use of 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
});