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.

Comments on How to submit form data with Ajax?

Post

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.

History
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)
Not sure if that's what you need, but if I understood correctly, it'd be something like this: ```j...
hkotsubo‭ wrote over 2 years ago

Not sure if that's what you need, but if I understood correctly, it'd be something like this:

let form = // get the form somehow (for example, with querySelector)
form.addEventListener('submit', function(e) {
  e.preventDefault(); // don't submit the form
  fetch('backend.url')
   .then(function(response) {
      // do whatever you need with the response
   });
});

For the backend URL, you can also use form.getAttribute("action"), if you want to use the same URL that is in the action attribute.

hkotsubo‭ wrote over 2 years ago · edited over 2 years ago

After the last edit it's still unclear what you mean by "apply backend behavior".

Do you have a form action="URL A" and want to send all its data to URL B using JavaScript?

deleted user wrote over 2 years ago

hkotsubo‭

I don't think that's what I want to do.

I want to send all form data to an email address according to the directives in a backend file ("behavior.php"), with:

<?php
	$topic = $_POST['topic']; # Required;
	$name = $_POST['name'];   # Required;
	$email = $_POST['email']; # Required;
	$url = $_POST['url']; 
	# Name attribute is "url" but input type is "text" because "url" obligates http:// or https:// which users normally don't input;
	$phone = $_POST['phone'];
	$notes = $_POST['notes']; # Normally turned off to prevent spam;

	$to = 'example@example.com';
	$subject = 'הודעה חדשה מאת: ' . $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));
?>
hkotsubo‭ wrote over 2 years ago · edited over 2 years ago

deleted user Then I suggest you to edit the question and add this information there.

But anyway, if you want to execute behavior.php, you'll have to send data to it (which is basically what I described above)

deleted user wrote over 2 years ago

hkotsubo‭ I don't know what you meant by "you'll have to send data to it".

By the way, given the heavy down voting and the edits, I invite you to backup your code as I might just delete this thread.

hkotsubo‭ wrote over 2 years ago · edited over 2 years ago

deleted user "send data" means making a http request, using fetch with POST method (there's an example in the docs). And you can use FormData to send the form fields (if I understood correctly what you need)

deleted user wrote over 2 years ago

"send data" means making a http request

I knew that.

using fetch with POST method (there's an example in the docs) And you can use FormData to send the form fields (if I understood correctly what you need)

But I want to keep the email address in a backend file (behavior.php) so it won't be detectable by the browser (as far as I know any JavaScript file affecting a webpage is available via the developer tools).

hkotsubo‭ wrote over 2 years ago

In the PHP file you're getting $_POST['email'], which means that it's getting the email sent by the client (if the backend will get another email that the client side can't know, then where/how it will be done?). Well, it seems that there is a lot of missing information, please edit the question and add all this context to it

deleted user wrote over 2 years ago

hkotsubo‭ I swear that I have no idea what is the "a lot" of missing information.

No sarcasm (and not anything like it), I just really don't know how to further improve this question...

Skipping 1 deleted comment.

hkotsubo‭ wrote over 2 years ago

The answer below is basically doing what I suggested (using fetch and FormData to send the data via POST).

As you didn't say if it worked, I assumed it didn't work and therefore there might be some missing details (because based on what I could understand, that code should work)

Skipping 1 deleted comment.