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.

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)

1 answer

+2
−0

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

1 comment thread

General comments (4 comments)

Sign up to answer this question »