Communities

Writing
Writing
Codidact Meta
Codidact Meta
The Great Outdoors
The Great Outdoors
Photography & Video
Photography & Video
Scientific Speculation
Scientific Speculation
Cooking
Cooking
Electrical Engineering
Electrical Engineering
Judaism
Judaism
Languages & Linguistics
Languages & Linguistics
Software Development
Software Development
Mathematics
Mathematics
Christianity
Christianity
Code Golf
Code Golf
Music
Music
Physics
Physics
Linux Systems
Linux Systems
Power Users
Power Users
Tabletop RPGs
Tabletop RPGs
Community Proposals
Community Proposals
tag:snake search within a tag
answers:0 unanswered questions
user:xxxx search by author id
score:0.5 posts with 0.5+ score
"snake oil" exact phrase
votes:4 posts with 4+ votes
created:<1w created < 1 week ago
post_type:xxxx type of post
Search help
Notifications
Mark all as read See all your notifications »
Q&A

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.

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

Post

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

+0
−0

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.
History
Why does this post require moderator attention?
You might want to add some details to your flag.
Why should this post be closed?

1 comment thread

General comments (2 comments)
General comments
Alexei‭ wrote about 3 years ago

What is contactForm.method containing? If it is 'POST', I do not see the request body to be sent to the server: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/send

deleted user wrote about 3 years ago

Hello, it's a code I found on the web and slightly modified; I don't know why it was written contactForm.method. I should carefully read your answer to try to figure out how to send my data correctly (which I assume, should indeed be sent by POST method).