I have a form, I send data from it to the mail, using PHPMailer. Also, I have a list of products that I retrieve from localStorage. How can I transfer an array of data from the localStorage to PHPMailer to send to the mail?

       if (ajax) { 
            e.preventDefault();
            const formAction = form.getAttribute('action') ? form.getAttribute('action').trim() : '#';
            const formMethod = form.getAttribute('method') ? form.getAttribute('method').trim() : 'GET';
            const formData = new FormData(form);
            
            form.classList.add('_sending');
            const response = await fetch(formAction, {
                method: formMethod,
                body: {
                    'formData': formData
                }
            });
            if (response.ok) {
                let responseResult = await response.json();
                form.classList.remove('_sending');
                formSent(form);
            } else {
                alert("Error");
                form.classList.remove('_sending');
            }
        }

Example of a product in localStorage

<div data-id="1" >
    <div >Name</div>
    <div >320</div>
    <div >100</div>
</div>

<?php

$body = '<h1>Новий заказ!</h1>';

$name = '<strong>' . $_POST['name'] . '</strong>'; 
$surname = '<strong>' . $_POST['surname'] . '</strong>';  
$phone = '<strong>' . $_POST['phone'] . '</strong>'; 


$body .= 
'Name: ' . $name . '<br>' .
'Surname: ' . $surname . '<br>' .
'Phone: ' . $phone . '<br>' .


$mail->Body = $body;

if (!$mail->send()) {
    $message = 'Error';
} else {
    $message = 'Success!';
}

$response = ['message' => $message];

header('Content-type: application/json');
echo json_encode($response);

CodePudding user response：

Concepts

localStorage is your browser's local storage. By its nature, it is defined only in your browser.

PHPMailer (and, as a matter of fact anything PHP-related) runs on your server.

Your browser and your server are at least two separate applications, but in prod environments they are also separate, remote machines that cannot trivially refer to each-other.

So, your PHP code cannot reach your localStorage. Instead, it can only communicate with it.

localStorage

This is a key-value pair resource mapped to a certain webplace, in this case, your website. If you do not know the keys, then you can retrieve them via

Object.keys(localStorage)

You can also map your products into key-value pairs like this:

Object.keys(localStorage).map((key) => ({key, value: localStorage.getItem(key)}))

You may have other items in the localStorage that you might not want to send, in which case you may need to add some further filtering, but the above is the bulk of the logic that you need.

Appending your products to FormData

You can use the .append() function for that purpose:

formData.append(someKey, someValue)

or, to apply your mapping:

formData.append("products", Object.keys(localStorage).map((key) => ({key, value: localStorage.getItem(key)})));

Sending the FormData

Since you already successfully submitting your data, I do not delve into this aspect too deeply, but it's worth mentioning that if you have a custom FormData, then you will need to submit it programmatically, via Javascript, by a call to fetch in your case.

Receiving your data

You will need to look into $_POST for the products key and you will see what the values are and process them into your mail.