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.

Post History

66%

+2 −0

Q&A Submitting a form via XHR/AJAX causes partial data arrival to email inbox (only HTML without input)

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 rememb...

posted 3y ago by Alexei‭ · edited 3y ago by Alexei‭

Answer

#2: Post edited by

Alexei‭ · 2021-03-29T15:22:24Z (over 3 years ago)
added the jQuery way

Copy Link

Raw

Markdown

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](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/send).
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](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)) is provided in [this answer](https://stackoverflow.com/a/45529553/2780791):
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)
);

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](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/send).
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](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)) is provided in [this answer](https://stackoverflow.com/a/45529553/2780791):
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](https://stackoverflow.com/a/5772905/2780791):
$(document).ready(function(){
$("#frm").submit( function () {
$.post(
'script.php',
$(this).serialize(),
function(data){
// do something with data
}
);
return false;
});
});

#1: Initial revision by

Alexei‭ · 2021-03-29T15:07:49Z (over 3 years ago)

Copy Link

Raw

Markdown

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](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/send).

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](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)) is provided in [this answer](https://stackoverflow.com/a/45529553/2780791):

	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)
	);

Communities

Post History