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 »
Users Search
Help Dashboard Sign In Sign Up
Q&A Code Reviews Meta
Q&A
Posts Tags Edits
Ask Question

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.

Post History

37%
+1 −3
Q&A How to submit form data with Ajax?

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

1 answer  ·  posted 3y ago by deleted user  ·  last activity 3y ago by r~~‭

Question javascript contact-form
#18: Post edited by (deleted user) · 2021-12-08T03:10:43Z (about 3 years ago)
  • 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:
  • ```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:
  • ```html
  • <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.<br>
  • 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](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)" I didn't find any code example with such a file reference.
  • 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
  • <?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:
  • ```html
  • <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.<br>
  • 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](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)" I didn't find any code example with such a file reference.
#17: Post edited by (deleted user) · 2021-12-08T03:09:27Z (about 3 years ago)
  • I need to apply backend behavior (PHP directives in my case) to an HTML `<form>`.
  • The basic way I know to do it is this pattern:
  • ```html
  • 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.<br>
  • Therefore the HTML `action` and `method` become 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](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)" I didn't find any code example with such a file reference.
  • 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:
  • ```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:
  • ```html
  • <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.<br>
  • 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](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)" I didn't find any code example with such a file reference.
#16: Post edited by (deleted user) · 2021-12-08T01:20:37Z (about 3 years ago)
  • I need to apply backend behavior (PHP directives in my case) to an HTML `<form>`.
  • The basic way I know to do it is this pattern:
  • ```html
  • action="/behavior.php" method="POST"
  • ```
  • Now I have a form in which the default behavior is prevented with `preventDefault()` so clicking the *submit* button will not cause form submission and therefore the HTML `action` and the `method` become 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](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)" I didn't find any code example with such a file reference.
  • I need to apply backend behavior (PHP directives in my case) to an HTML `<form>`.
  • The basic way I know to do it is this pattern:
  • ```html
  • 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.<br>
  • Therefore the HTML `action` and `method` become 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](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)" I didn't find any code example with such a file reference.
#15: Post edited by (deleted user) · 2021-12-08T01:18:22Z (about 3 years ago)
  • Applying backend behavior to an HTML form with JavaScript
  • How to submit form data with Ajax?
  • A common way to apply backend behavior to an HTML `<form>` is:
  • ```html
  • action="/behavior.php" method="POST"
  • ```
  • If one applies JavaScript on a form and uses `preventDefault()` then the default behavior of that form (including `action="/behavior.php" method="POST"`) is prevented and some JavaScript way to apply backend for a form is needed.
  • How to apply backend behavior to a form with JavaScript?
  • If it matters, in MDN "[Using Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)" and [HTMLFormElement.submit()](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit) I didn't find any code example to "simulate" that attribute-value behavior.
  • I need to apply backend behavior (PHP directives in my case) to an HTML `<form>`.
  • The basic way I know to do it is this pattern:
  • ```html
  • action="/behavior.php" method="POST"
  • ```
  • Now I have a form in which the default behavior is prevented with `preventDefault()` so clicking the *submit* button will not cause form submission and therefore the HTML `action` and the `method` become 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](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)" I didn't find any code example with such a file reference.
#14: Post edited by (deleted user) · 2021-12-08T00:59:33Z (about 3 years ago)
  • Applying backend behavior to an HTML form with JavaScript?
  • Applying backend behavior to an HTML form with JavaScript
  • A common way to apply backend behavior to an HTML `<form>` is:
  • ```html
  • action="/behavior.php" method="POST"
  • ```
  • If one applies JavaScript on a form and uses `preventDefault()` then the default behavior of that form (including `action="/behavior.php" method="POST"`) is prevented and some JavaScript way to apply backend for a form is needed.
  • How to apply backend behavior to a form with JavaScript?
  • If it matters, in MDN "[Using Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)" and [HTMLFormElement.submit()](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit) I didn't find any code example to "simulate" (especially with **Ajax**) that attribute-value behavior.
  • A common way to apply backend behavior to an HTML `<form>` is:
  • ```html
  • action="/behavior.php" method="POST"
  • ```
  • If one applies JavaScript on a form and uses `preventDefault()` then the default behavior of that form (including `action="/behavior.php" method="POST"`) is prevented and some JavaScript way to apply backend for a form is needed.
  • How to apply backend behavior to a form with JavaScript?
  • If it matters, in MDN "[Using Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)" and [HTMLFormElement.submit()](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit) I didn't find any code example to "simulate" that attribute-value behavior.
#13: Post edited by user avatar CodeFarmer‭ · 2021-12-08T00:56:55Z (about 3 years ago)
Minor spelling correction 
Applying backend behavior to an HTML form with JavaScript?
  • A common way to apply backend behavior to an HTML `<form>` is:
  • ```html
  • action="/behavior.php" method="POST"
  • ```
  • If one applies JavaScript on a form and uses `preventDefault()` than the default behavior of that form (including `action="/behavior.php" method="POST"`) is prevented and some JavaScript way to apply backend for a form is needed.
  • How to apply backend behavior to a form with JavaScript?
  • If it matters, in MDN "[Using Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)" and [HTMLFormElement.submit()](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit) I didn't find any code example to "simulate" (especially with **Ajax**) that attribute-value behavior.
  • A common way to apply backend behavior to an HTML `<form>` is:
  • ```html
  • action="/behavior.php" method="POST"
  • ```
  • If one applies JavaScript on a form and uses `preventDefault()` then the default behavior of that form (including `action="/behavior.php" method="POST"`) is prevented and some JavaScript way to apply backend for a form is needed.
  • How to apply backend behavior to a form with JavaScript?
  • If it matters, in MDN "[Using Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)" and [HTMLFormElement.submit()](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit) I didn't find any code example to "simulate" (especially with **Ajax**) that attribute-value behavior.
#12: Post edited by (deleted user) · 2021-12-07T18:19:48Z (about 3 years ago)
  • Associating backend behavior with a default-prevented form
  • Applying backend behavior to an HTML form with JavaScript?
  • I have prevented the default behavior of a `<form>` so I can no longer associate backend behavior with it this way:
  • ```html
  • action="/behavior.php" method="POST"
  • ```
  • Not associating backend behavior this way is a problem for me because I find it a focal and comfortable way to associate backend behavior with a simple contact form.
  • How to solve that problem?
  • If it matters, in MDN "[Using Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)" and [HTMLFormElement.submit()](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit) I didn't find any code example to "simulate" (especially with **Ajax**) that attribute-value behavior.
  • A common way to apply backend behavior to an HTML `<form>` is:
  • ```html
  • action="/behavior.php" method="POST"
  • ```
  • If one applies JavaScript on a form and uses `preventDefault()` than the default behavior of that form (including `action="/behavior.php" method="POST"`) is prevented and some JavaScript way to apply backend for a form is needed.
  • How to apply backend behavior to a form with JavaScript?
  • If it matters, in MDN "[Using Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)" and [HTMLFormElement.submit()](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit) I didn't find any code example to "simulate" (especially with **Ajax**) that attribute-value behavior.
#11: Post edited by (deleted user) · 2021-12-07T12:15:49Z (about 3 years ago)
  • I have prevented the default behavior of a `<form>` so I can no longer associate a backend behavior with it as I would with:
  • ```html
  • action="/behavior.php" method="POST"
  • ```
  • Not associating backend behavior this way is a problem for me because I find it a very focal and comfortable way to associate backend behavior with a simple contact form.
  • How to solve that problem?
  • If it matters, in MDN "[Using Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)" and [HTMLFormElement.submit()](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit) I didn't find there any code example to "simulate" (especially with **Ajax**) that attribute-value behavior.
  • I have prevented the default behavior of a `<form>` so I can no longer associate backend behavior with it this way:
  • ```html
  • action="/behavior.php" method="POST"
  • ```
  • Not associating backend behavior this way is a problem for me because I find it a focal and comfortable way to associate backend behavior with a simple contact form.
  • How to solve that problem?
  • If it matters, in MDN "[Using Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)" and [HTMLFormElement.submit()](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit) I didn't find any code example to "simulate" (especially with **Ajax**) that attribute-value behavior.
#10: Post edited by (deleted user) · 2021-12-07T12:13:03Z (about 3 years ago)
  • Associating backend behavior with a (default-prevented) form
  • Associating backend behavior with a default-prevented form
#9: Post edited by (deleted user) · 2021-12-07T12:12:00Z (about 3 years ago)
  • How to associate backend behavior with a (default-prevented) form, via JavaScript?
  • Associating backend behavior with a (default-prevented) form
  • I have prevented the default behavior of a `<form>` so I can no longer associate a backend behavior with it as I would with:
  • ```html
  • action="/behavior.php" method="POST"
  • ```
  • Not associating backend behavior this way is a problem for me because I find it a very focal and comfortable way to associate backend behavior with a simple contact form and I wish I could perhaps exclude that part from the form's default-behavior-prevention.
  • How would you suggest me to cope with that problem?
  • If it matters, in MDN "[Using Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)" and [HTMLFormElement.submit()](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit) I didn't find any code example that would "simulate" that attribute-value behavior.
  • I have prevented the default behavior of a `<form>` so I can no longer associate a backend behavior with it as I would with:
  • ```html
  • action="/behavior.php" method="POST"
  • ```
  • Not associating backend behavior this way is a problem for me because I find it a very focal and comfortable way to associate backend behavior with a simple contact form.
  • How to solve that problem?
  • If it matters, in MDN "[Using Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)" and [HTMLFormElement.submit()](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit) I didn't find there any code example to "simulate" (especially with **Ajax**) that attribute-value behavior.
#8: Post edited by (deleted user) · 2021-12-07T12:04:44Z (about 3 years ago)
  • I have prevented the default behavior of a `<form>` so I can no longer associate a backend behavior with it as I would with:
  • ```html
  • action="/behavior.php" method="POST"
  • ```
  • Not associating backend behavior this way is a problem for me because I find it very a focal and comfortable way to associate backend behavior with a simple contact form and I wish I could perhaps exclude that part from the form's default-behavior-prevention.
  • How would you suggest me to cope with that problem?
  • If it matters, in MDN "[Using Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)" and [HTMLFormElement.submit()](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit) I didn't find any code example that would "simulate" that attribute-value behavior.
  • I have prevented the default behavior of a `<form>` so I can no longer associate a backend behavior with it as I would with:
  • ```html
  • action="/behavior.php" method="POST"
  • ```
  • Not associating backend behavior this way is a problem for me because I find it a very focal and comfortable way to associate backend behavior with a simple contact form and I wish I could perhaps exclude that part from the form's default-behavior-prevention.
  • How would you suggest me to cope with that problem?
  • If it matters, in MDN "[Using Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)" and [HTMLFormElement.submit()](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit) I didn't find any code example that would "simulate" that attribute-value behavior.
#7: Post edited by (deleted user) · 2021-12-07T09:58:21Z (about 3 years ago)
  • How to associate backend behavior with a (default-prevented) form via JavaScript?
  • How to associate backend behavior with a (default-prevented) form, via JavaScript?
#6: Post edited by (deleted user) · 2021-12-07T09:57:58Z (about 3 years ago)
  • How to initiate a form action (POST, PHP-based) from JavaScript?
  • How to associate backend behavior with a (default-prevented) form via JavaScript?
#5: Post edited by (deleted user) · 2021-12-07T09:54:14Z (about 3 years ago)
  • I have prevented the default behavior of a `<form>` but I still need to do a form `action` in the method `POST`, to send submitted form data by JavaScript.
  • * I didn't find the term `action` in the [`fetch()`](https://developer.mozilla.org/en-US/docs/Web/API/fetch) documentation
  • * I didn't find a way to utilize my backend file (backend.php) with [`submit()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit) in the method's documentation
  • I have prevented the default behavior of a `<form>` so I can no longer associate a backend behavior with it as I would with:
  • ```html
  • action="/behavior.php" method="POST"
  • ```
  • Not associating backend behavior this way is a problem for me because I find it very a focal and comfortable way to associate backend behavior with a simple contact form and I wish I could perhaps exclude that part from the form's default-behavior-prevention.
  • How would you suggest me to cope with that problem?
  • If it matters, in MDN "[Using Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)" and [HTMLFormElement.submit()](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit) I didn't find any code example that would "simulate" that attribute-value behavior.
#4: Post edited by (deleted user) · 2021-12-07T08:48:13Z (about 3 years ago)
  • I have prevented the default behavior of a `<form>` but I still need to do a form `action` in the method `POST`, to send submitted form data, by JavaScript.
  • The POST action should still rely on a PHP file (backend.php).
  • * I didn't find the terms `action` or `php` in the [`fetch()`](https://developer.mozilla.org/en-US/docs/Web/API/fetch) documentation
  • * If it's possible, it's unclear to me from the [`submit()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit) documentation how to utilize my PHP file (backend.php) with it
  • I have prevented the default behavior of a `<form>` but I still need to do a form `action` in the method `POST`, to send submitted form data by JavaScript.
  • * I didn't find the term `action` in the [`fetch()`](https://developer.mozilla.org/en-US/docs/Web/API/fetch) documentation
  • * I didn't find a way to utilize my backend file (backend.php) with [`submit()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit) in the method's documentation
#3: Post edited by (deleted user) · 2021-12-07T08:18:52Z (about 3 years ago)
  • I have prevented the default behavior of a `<form>` but I still need to do a form `action` in the method `POST`, to send data submitted in the form by JavaScript.
  • The POST action should still rely on a PHP file (backend.php).
  • * I didn't find the terms `action` or `php` in the [`fetch()`](https://developer.mozilla.org/en-US/docs/Web/API/fetch) documentation
  • * If it's possible, it's unclear to me from the [`submit()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit) documentation how to utilize my PHP file (backend.php) with it
  • I have prevented the default behavior of a `<form>` but I still need to do a form `action` in the method `POST`, to send submitted form data, by JavaScript.
  • The POST action should still rely on a PHP file (backend.php).
  • * I didn't find the terms `action` or `php` in the [`fetch()`](https://developer.mozilla.org/en-US/docs/Web/API/fetch) documentation
  • * If it's possible, it's unclear to me from the [`submit()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit) documentation how to utilize my PHP file (backend.php) with it
#2: Post edited by (deleted user) · 2021-12-07T07:50:32Z (about 3 years ago)
  • I have prevented the default behavior of a `<form>` but I still need to do a form `action` in the method `POST`, to send data submitted in the form by JavaScript.
  • The POST action should still rely on a PHP file (backend.php).
  • * I didn't find the terms `action` or `php` in the [`fetch()`](https://developer.mozilla.org/en-US/docs/Web/API/fetch) documentation
  • * If it's possible, it's unclear to me from the [`submit()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit) documentation how to refer the JavaScript to my PHP file (backend.php)
  • I have prevented the default behavior of a `<form>` but I still need to do a form `action` in the method `POST`, to send data submitted in the form by JavaScript.
  • The POST action should still rely on a PHP file (backend.php).
  • * I didn't find the terms `action` or `php` in the [`fetch()`](https://developer.mozilla.org/en-US/docs/Web/API/fetch) documentation
  • * If it's possible, it's unclear to me from the [`submit()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit) documentation how to utilize my PHP file (backend.php) with it
#1: Initial revision by (deleted user) · 2021-12-07T07:48:55Z (about 3 years ago) 
How to initiate a form action (POST, PHP-based) from JavaScript?
I have prevented the default behavior of a `<form>` but I still need to do a form `action` in the method `POST`, to send data submitted in the form by JavaScript.

The POST action should still rely on a PHP file (backend.php).

* I didn't find the terms `action` or `php` in the [`fetch()`](https://developer.mozilla.org/en-US/docs/Web/API/fetch) documentation
* If it's possible, it's unclear to me from the [`submit()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit) documentation how to refer the JavaScript to my PHP file (backend.php)
javascript contact-form