Скачать или смотреть How to Send FormData Using Fetch and Retrieve It in PHP

Learn how to efficiently send `FormData` using Fetch API and handle it in PHP for seamless database interactions.
---
This video is based on the question https://stackoverflow.com/q/67291326/ asked by the user 'Shakur' ( https://stackoverflow.com/u/13119310/ ) and on the answer https://stackoverflow.com/a/67291467/ provided by the user 'Tangentially Perpendicular' ( https://stackoverflow.com/u/14853083/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: fetch send formdata and recieve it from php

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Mastering Form Submission with Fetch and PHP

Sending data from a web form to a backend using JavaScript can sometimes be challenging. One common issue developers face is ensuring that the data sent through a fetch request properly populates the relevant database fields in PHP. In this post, we'll dive into a practical problem and its solution, allowing you to effectively insert data into your SQL database with minimal hassle.

The Problem

You’ve created a form that collects several pieces of information, such as names and dates, and you wish to store this data in a MySQL database using PHP. However, while your database is able to create a new entry with an increasing ID, the additional fields remain empty. The core of your question is how to handle the FormData correctly and retrieve it on the PHP side so it populates the database as intended.

Here’s a quick overview of the code you currently have in your JavaScript function and PHP file:

JavaScript Function

[[See Video to Reveal this Text or Code Snippet]]

PHP Code (agregar.php)

[[See Video to Reveal this Text or Code Snippet]]

The Solution

Step 1: Correctly Sending FormData

The good news is that you don't need to convert FormData to JSON format! The fetch method can directly accept FormData objects. This means you can simplify your code significantly. Simply replace the JSON conversion line in your JavaScript function:

[[See Video to Reveal this Text or Code Snippet]]

with

[[See Video to Reveal this Text or Code Snippet]]

Step 2: Adjusting the PHP Code

On the PHP side, you won't need to decode any JSON data. Instead, you can access the form data easily from the $_POST superglobal. Here's how your modified PHP code should look:

[[See Video to Reveal this Text or Code Snippet]]

Important Considerations

Security: The provided code is vulnerable to SQL injection attacks. To protect your database, consider using prepared statements to sanitize user inputs.

Using FormData Efficiently: FormData can extract all the input data from your form automatically. For example, you can replace the manual data extraction with the following line:

[[See Video to Reveal this Text or Code Snippet]]

This way, you don't need to retrieve each field individually — FormData handles it for you.

Conclusion

By making these adjustments, you should be able to successfully send your form data using the Fetch API and retrieve it correctly within your PHP application. This not only enhances efficiency but also streamlines the process of data input into your SQL database. Remember to stay vigilant about security practices, and happy coding!