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

Dashboard
Notifications
Mark all as read
Q&A

How to submit form data with Ajax?

+1
−3

I need to apply backend behavior (PHP directives in my case) to an HTML <form>.

The backend behavior I wish to apply to the form is in this pattern (behavior.php):

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

The way I know to do this is with this HTML pattern:

<form action="/behavior.php" method="POST">

Now I have a form that the default behavior of which is prevented with preventDefault() so clicking the submit button will not cause form submission.
Therefore the HTML action and method became ineffective and I need to send the form's data with Ajax but according to the backend behavior (under behavior.php) where the relevant email address is stored.

In MDN "Using Fetch" I didn't find any code example with such a file reference.

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

3 comment threads

Not sure if that's what you need, but if I understood correctly, it'd be something like this: ```j... (10 comments)
Why do you have prevented the "default behavior" of the form? (3 comments)
Of course there is no "action" or "php" in the fetch() documentation... (7 comments)

1 answer

+1
−0

See the first example in this section:

const form = new FormData(document.getElementById('login-form'));
fetch('/login', {
  method: 'POST',
  body: form
});

To adapt this example to your code, you'll need to change the URL being provided to fetch from '/login' to the URL of your PHP behavior page—looks like that might be just '/behavior.php' from your example. And of course you'll need to get the correct form DOM object to use in the FormData constructor. This example uses an id attribute on the form and the document.getElementById function to do this, which is a nice way to do it but not the only way.

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

1 comment thread

I am having a problem with that pattern, sadly, please kindly review a new question I have asked here... (1 comment)

Sign up to answer this question »