Hello,
I have a strange issue that I do not seem to be able to resolve.
I have a simple form that I'd like to process via an ajax POST call using vanilla Javascript, not JQuery. However, the variables do not seem to be passing to the template file (I have an ajax_handler page for which the template file is _ajax_handler.php which is where I'm sending the call). I think I have already tried everything (including changing single quotes to double quotes -- yeah, I'm desperate) but I can't get it to work.
This is my js:
let submit_form = document.getElementById('addToCart');
submit_form.addEventListener('submit', updateCart);
function updateCart(e) {
e.preventDefault();
let params = "modelId="+ document.getElementById('modelId').value + "&pieces=" + document.getElementById('pieces').value;
let xhr = new XMLHttpRequest();
xhr.onload = function() {
if(this.status == 200) {
//for testing purposes, only logging the response
console.log(this.responseText);
}
}
xhr.open("POST", "/ajax_handler", true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(params);
}
And this is all I have in the _ajax_handler.php template file, currently responding with 'Notice: Undefined index: modelId in C:\Users\livia\source\kykdesign\site\templates\_ajax_handler.php on line 17':
echo $_POST['modelId'];
Can someone advise what I am doing wrong or what is some obvious thing that I'm missing? Some PW setting or template setting maybe?
Thanks much.