Welcome to Software Development on Codidact!
Will you help us build our independent community of developers helping developers? We're small and trying to grow. We welcome questions about all aspects of software development, from design to code to QA and more. Got questions? Got answers? Got code you'd like someone to review? Please join us.
Submitting a form via XHR/AJAX causes partial data arrival to email inbox (only HTML without input)
I have a simple HTML-PHP contact form with some CSS.
I desire to prevent the default behavior of the form which leads the user into a blank PHP page after submission, and, to have the form being submitted via XHR instead backendly.
With the following code, I have managed to party achieve what I desire, but I have the problem where input from input fields doesn't arrive to my inbox (only the HTML arrives).
What I have tried
let contactForm = document.querySelector("#contact_form")
contactForm.addEventListener("submit", function(event){
event.preventDefault()
var xhr = new XMLHttpRequest();
xhr.open(contactForm.method, contactForm.action, true);
xhr.setRequestHeader('Accept', 'application/json; charset=utf-8');
xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
xhr.send();
});
Current output pattern
שם:אימייל:
טלפון:
נושא הפנייה:
דומיין אתר (אם יש):
הערות (אם יש):
Desired output pattern
שם: NAMEאימייל: EMAIL
טלפון: PHONE
נושא הפנייה: TOPIC
דומיין אתר (אם יש): URL
הערות (אם יש): NOTES
Notes
- If I don't use this JavaScript than everything arrives (the output is as expected) so I believe the code I have tried has a mistake or is incomplete; I think I lack some limit on
preventDefault()so to limit it not to prevent the "input transmission" part of the behavior it prevents.
1 answer
I am guessing a little here. By not preventingdefault, the form will POST the data to the server.
If you switch to AJAX you have to provide the body as per documentation.
However, I do not remember to ever using the XMLHttpRequest directly, because there are wrappers to help you. One example using a more modern approach (fetch API) is provided in this answer:
const url = "http://example.com";
fetch(url, {
method : "POST",
body: new FormData(document.getElementById("contact_form")),
}).then(
response => response.text() // .json(), etc.
).then(
html => console.log(html)
);
A jquery way of achieving a similar HTTP call is provided by this answer:
$(document).ready(function(){
$("#frm").submit( function () {
$.post(
'script.php',
$(this).serialize(),
function(data){
// do something with data
}
);
return false;
});
});
1 comment thread