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

Dashboard
Notifications
Mark all as read
Q&A

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

2 comments

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 Alexei‭ 12 days 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). JohnDoea‭ 12 days ago

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

4 comments

Thanks; I don't use jQuery at all (perhaps I should update the question to indicate). JohnDoea‭ 12 days ago

I already use the code in the same webpage I send data from (i.e. const url = window.location.href). In MediaWiki can be done with raw HTML mode enabled so people can paste their HTML and JS directly in the same page they work on, which is my case, the same webpage from which I do a previous AJAX call to my contact form HTML. JohnDoea‭ 12 days ago

I admit I tried to read the answer several times, yet still didn't figure out what I should do. JohnDoea‭ 12 days ago

@JohnDoea The first example (using fetch API) should replace your code using xhr. The example hardcodes the method (POST), but you can replace it if your own. Alexei‭ 11 days ago

Sign up to answer this question »