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
Notifications
Mark all as read
Q&A

Uncaught TypeError: Failed to construct 'FormData' [closed]

+3
−2

Closed as not constructive by Alexei‭ on Dec 10, 2021 at 16:03

This question cannot be answered in a way that is helpful to anyone. It's not possible to learn something from possible answers, except for the solution for the specific problem of the asker.

This question was closed; new answers can no longer be added. Users with the reopen privilege may vote to reopen this question if it has been improved or closed incorrectly.

I am trying to submit a form with Ajax from a well-configured shared hosting environment. Emails don't arrive to my email client although I have already sent emails without Ajax from this environment without a problem so the problem shouldn't be in the email server. I assume that emails aren't sent in relation to the following error in browser console:

Uncaught TypeError: Failed to construct 'FormData': parameter 1 is not of type 'HTMLFormElement'. at behavior.js:2 What may cause that problem?


index.php

<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" href="./style.css"></link>
	</head>
	<body>
		<form id="#prcf_form">
			<div class="form">
				<span><label for="prcf_input_name" id="prcf_label_name" class="prcf_label">Name</label></span><span class="prcf_required">*</span>
				<input type="text" name="name" id="prcf_input_name" class="prcf_item" required>
				</input> <!-- required property-->
			</div>
			<div class="prcf_footers">
				<input type="submit" value="Send" id="prcf_submit" class="prcf_finalization_buttons"></input>
			</div>
		</form>
	</body>
	<script src="./behavior.js"></script>
</html>

behavior.php

<?php
	$name = $_POST['name']; # Required;
	$to = 'EMAIL_ADDRESS_NAME@DOMAIN';
	$subject = 'New message from: ' . $name;
	include 'message.php';
	$headers[] = 'MIME-Version: 1.0';
	$headers[] = 'Content-type: text/html; charset=utf-8';
	mail($to, $subject, $message, implode("\r\n", $headers));
?>

message.php

<?php
	$message = <<<LABEL
		<html>
			<head>
			</head>
			<body>
				<div><span class="form_output_col_1">Name: </span><span class="form_output_col_2">$name</span></div>
			</body>
		</html>
	LABEL;
?>

behavior.js

let formToWorkOn = document.querySelector('#prcf_form');
let formData = new FormData(formToWorkOn);
fetch('./behavior.php', {
  method: 'POST',
  body: formToWorkOn
});
Why does this post require moderator attention?
You might want to add some details to your flag.
Why should this post be closed?

2 comment threads

Question closure (1 comment)
Form Data documentation (7 comments)

1 answer

+2
−0

Your Javascript code uses the following selector for the document.querySelector(...) invocation:

#prcf_form

The selector string starting with an # indicates an ID selector, with the actual ID following the #. Note that in a selector string, the leading # is not part of the ID to be searched.

So, your Javascript code is trying to get an element with the ID "prcf_form".

But, where in your HTML do you have an element with the ID "prcf_form"? There is none...

Therefore, it should be reasonably expected that the FormData constructor will fail, because document.querySelector("#prcf_form") won't find any element, and a FormData cannot be constructed based on a non-existing form element.

(Tangent: You would relatively easily and quickly notice the issue with querySelector(...) if you were to take advantage of the diagnostics and debugging tools modern web browsers offer and inspect the variable values and the values returned by the functions your Javascript code calls.)

Note that the ID of your form element is "#prcf_form", but your querySelector() invocation looks for an element with the ID "prcf_form".

As a possible solution, i suggest to change the form element ID from "#prcf_form" to "prcf_form":

<form id="#prcf_form"> --> <form id="prcf_form">,

allowing document.querySelector("#prcf_form") to find the form element, and hopefully at least the FormData object will be constructed successfully.

Why does this post require moderator attention?
You might want to add some details to your flag.

0 comment threads