I'm trying to send dynamic two input field to backend via ajax, and i have main form, the main form works fine, dont know how to send two extra dynamic inputs to backend, here is my code
var extra_inputs = 2
var removed_extra_inputs = []
var formData = new FormData();
for(var i=0; i<extra_inputs; i++){
try{
formData.append("guestinfo-"+i, document.getElementById("guestinfo-"+i).value);
formData.append("reason-"+i, document.getElementById("reason-"+i).value);
}
catch(err){
console.log(err);
}
}
const form = document.getElementById('post-form-add-booking')
const url = window.location.href
const room = parseInt(room_number)
form.addEventListener("submit",submitHanler);
function submitHanler(e){
e.preventDefault();
$.ajax({
type:'POST',
url:url,
data:$("#post-form-add-booking").serialize() + "&extra_inputs="+extra_inputs + '&removed_extra_inputs='+removed_extra_inputs,
dataType:'json',
success:successFunction,
error:errorFunction,
})
}but not sure is there a way to combine formData with form.serilaizer please , thank you for you your help ..
Here is what I believe you mean
$('#post-form-add-booking').on("submit",function(e) {
e.preventDefault();
const formData = new FormData(this); // adding the DOM form
$("[id^=guestinfo], [id^=reason]").each(function() {
formData.append(this.id, this.value)
})
$.ajax({
type:'POST',
url:url,
data:formData,
dataType:'json',
success:successFunction,
error:errorFunction,
})
})