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 about 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)

hkotsubo‭ wrote about 3 years ago

copy link

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.

deleted user wrote about 3 years ago

copy link

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));
?>

deleted user wrote about 3 years ago

copy link

"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).

Communities

Comments on How to submit form data with Ajax?

How to submit form data with Ajax?

3 comment threads