I am trying to integrate a webform (shown below) with a function that passes form variables. Once the user clicks submit, I want the username and password to be passed into a website login function:
$.ajax( {
url: "http://microsubs.risk.net/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\">×</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).*$\" 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 class=\"cls_redirect\" id=\"redirect_url\" name=\"redirect_url\" type=\"hidden\" value=\"http://www.risk-responsive.nginx.incbase.net/\">' +
'<input type=\"submit\" id=\"submit-form\" class=\"btn.login\" 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);
$('#submit-form').on('click', function(){
formSubmit();
})
},
error: function(error) {
console.log(error);
}
} );
// Function to handle form submission
function formSubmit(){
$("#microsubs_form").submit(function(event){
var request;
//
var userName = ms_email;
var userPwd = ms_password;
// Abort any pending request
if (request) {
request.abort();
}
// set up some local variables
var $form = $(this);
// Let's select and cache all the fields
var $inputs = $form.find("input, select, button, textarea");
// Serialize the data in the form
var serializedData = $form.serialize();
// Disabled form elements will not be serialized.
$inputs.prop("disabled", true);
// Fire off the request to /form.php
request = $.ajax({
url: "http://microsubs.risk.net/ms_form_handler.php",
type: "POST",
data: serializedData,
success: function(data){
console.log(data);
$("#rdm-below-header").hide();
siteLogin(userName, userPwd, 'http://www.risk-responsive.nginx.incbase.net/')
},
error: function(error) {
console.log(error);
},
});
// Prevent default posting of form
event.preventDefault();
});
In the Ajax call above, notice the **siteLogin(username here, password here, 'http://www.risk-responsive.nginx.incbase.net/')** syntax under success.
The goal is to pass the username and password entered by the user in the form to this function. Although my attempt with the lines below did not work:
var userName = ms_email;
var userPwd = ms_password;
If you can offer any help or suggestions, it would be greatly appreciated. Thank you!