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?

−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.

javascript contact-form

posted almost 3 years ago

CC BY-SA 4.0

3y ago

deleted user

Raw

Markdown

History

is a duplicate

This question has been asked before and has already been answered. It should be marked as a duplicate.

Please enter the URL of the proposed duplicate in the details field below.

not constructive

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.

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)

elgonzo‭ wrote almost 3 years ago · edited almost 3 years ago

copy link

fetch() is chiefly about making requests, and is not about "actions" or "php". So why would you expect fetch()'s documentation to say something about random things that are not about requests themselves?

And how you should realize your fetch() or submit() depends entirely on how you have defined your backend endpoint with respect to request method and the data expected/required to be in the request.

It doesn't matter in what programming language you have implemented your backend endpoint. It only matters what request method that endpoint responds to (per your question, it seems to be POST), and what information in whatever data structure it expects/requires. You saying that your backend is written in PHP is not helpful, because it doesn't convey any information about which request mehthod your endpoint responds to, nor does it convey anything about what data in whichever shape and form it requires to be in the request...

elgonzo‭ wrote almost 3 years ago · edited almost 3 years ago

copy link

deleted user, the endpoint of a request is given by a URL, not a file. If the URL itself specifies some file name, then it's just part of that URL. The correct URL for a request (and what data and in what shape that data has to be included in the request) depends on how you have the backend implemented and configured, which you have said nothing about aside from "php!"

Look at the examples of fetch requests i linked to in my former comment. Note how a call to fetch() has to include the URL of the endpoint that will receive the request.

action is describing an aspect of a form. A form is not the same as a request. Submitting a form might initiate a request (or it might not). But that doesn't change the fact that action describes something about a form, it is not a property/attribute/whatever of a request. Hence why you would not find anything about action in the doc for fetch(). Because fetch() is about dealing with requests. fetch() is not about dealing with forms.

elgonzo‭ wrote almost 3 years ago · edited almost 3 years ago

copy link

deleted user

(perhaps you meant to say that they should be the same?).

No, i did not say this, and i did not mean to say this either. I just said that you have to use the correct URL, whatever the actual correct URL is. (I am not going to wildly speculate about what the correct URL might be. You are in the position to know the correct URL for the request, as you are the one writing and running the backend.)

Communities

Comments on How to submit form data with Ajax?

How to submit form data with Ajax?

3 comment threads