Post History

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

```js
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

<div dir="rtl">
<b>שם: </b><br>
<b>אימייל: </b><br>
<b>טלפון: </b><br>
<b>נושא הפנייה: </b><br>
<b>דומיין אתר (אם יש): </b><br>
<b>הערות (אם יש):</b>
</div>


## Desired output pattern

<div dir="rtl">
<b>שם: </b><span>NAME</span><br>
<b>אימייל: </b><span>EMAIL</span><br>
<b>טלפון: </b><span>PHONE</span><br>
<b>נושא הפנייה: </b><span>TOPIC</span><br>
<b>דומיין אתר (אם יש): </b><span>URL</span><br>
<b>הערות (אם יש): </b><span>NOTES</span>
</div>

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