OK, so a user searches the db via a textbox and after an ajax Db lookup, it may show a list of values. If there’s no results, a form is generated. All working so far.
Then when the form is submitted, an evt listener runs, captures the evt.target.id, splits to array and uses array[0] to run a condition. That also works OK.
However, I can’t seem to grab the data of the form that was submitted.
I’ve made numerous attempts but the Obj is always empty.
I’d really appreciate any pointers/advice.
For info:
The evt.target.id is split on ‘_’ because in other instances, the value may be ‘value1_value2_value3’
So, I am receiving the ‘id’ of the form submit button - assignPurchaserToListing. What am I getting wrong, that I’m not getting the form data?
Here’s what I have tried:
attempt #1 - no idea why it fails
document.form.addEventListener("click", evt =>
{
var newPurchasersDetailsObj = $("#new_purchasers_details").serializeArray();
console.log('the obj newPurchasersDetailsObj is empty ');
console.log(newPurchasersDetailsObj);
}
attempt #2 - failed because the form isn’t loaded until later?
document.querySelector("#new_purchasers_details").addEventListener('click', function(event) {
console.log('event target value = ');
console.log(event.target.value);
//if (event.target.tagName.toLowerCase() === 'li') {
// // do your action on your 'li' or whatever it is you're listening for
//}
});
attempt #3
document.addEventListener("click", evt =>
{
var evtArray = evt.target.id.split('_', 6);
if( evtArray[0] == 'assignPurchaserToListing' )
{ // this condition runs
evt.preventDefault();
var newPurchasersDetailsObj = $("#new_purchasers_details").serialize();
// the following appears to be empty
console.log('newPurchaserDetailsObj=');
console.log( newPurchaserDetailsObj);
}
}
extra info:
The form that’s generated is as follows.
var detailsType = 'purchasers_details';
var detailsTypeHeading = "Purchaser's Details";
var formId = "new_" + detailsType;
outputPersonsDataEntryForm( detailsType, detailsTypeHeading, formId );
function outputPersonsDataEntryForm( detailsType, detailsTypeHeading, formId )
{
str = "<form id='"
str += formId
str += "' name='new_"
str += detailsType
str += "'>"
str += "<h2>"
str += detailsTypeHeading
str +="</h2>"
str += "<input type='hidden' id='"
str += detailsType
str += "' name='"
str += detailsType
str += "' value='"
str += detailsType
str += "' />"
str += "<input type='text' id='title' "
str += "name='title' class=\"party-details-textbox form-control\" placeholder='Title' />"
str += "<input type='text' id='addressName' name='addressName' class=\"party-details-textbox form-control\" placeholder='Property Name (if any)' />"
str += "<input type='text' id='address1' name='address1' class=\"party-details-textbox form-control\" placeholder='Address Line 1' />"
str += "<input type='text' id='address2' name='address2' class=\"party-details-textbox form-control\" placeholder='Address Line 2' />"
str += "<input type='text' id='addressTown' name='addressTown' class=\"party-details-textbox form-control\" placeholder='Town/City'/>"
str += "<input type='text' id='addressCounty' name='addressCounty' class=\"party-details-textbox form-control\" placeholder='County' />"
str += "<input type='text' id='addressPostCode' name='addressPostCode' class=\"party-details-textbox form-control\" placeholder='Post Code' />"
str += "<input type='text' id='contactNumber1' name='contactNumber1' class=\"party-details-textbox form-control\" placeholder='Main Phone Number' />"
str += "<input type='text' id='contactNumber2' name='contactNumber2' class=\"party-details-textbox form-control\" placeholder='Second Phone Number (Optional)' />"
str += "<input type='text' id='contactNumber3' name='contactNumber3' class=\"party-details-textbox form-control\" placeholder='Third Phone Number (Optional)' />"
str += "<input type='text' id='contactEmail' name='contactEmail' class=\"party-details-textbox form-control\" placeholder='Email Address' />"
str += "<input type='submit' id='assignPurchaserToListing' class='reList' style='float:right' value='Save' />"
//str += "<button class='reList' style='float:right'>Save</button>"
str += "</form>";
console.log( 'str = ' + str);
$('#purchaser_details').html(str);
}