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.
Uncaught TypeError: Failed to construct 'FormData' [closed]
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
});
1 answer
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.
0 comment threads
2 comment threads