Передача массива флажков для электронной почты PHP с использованием проверки Javascript

Question

У меня есть форма с двумя массивами флажков, которые мне нужно передать в скрипт электронной почты PHP. Данные формы проходят проверку с помощью функции javascript перед отправкой в ​​сценарий PHP ... Я изо всех сил пытаюсь получить массив в мои данные формы, вот один из моих массивов флажков

                 <div class="choice-group">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="choice">
                                    <input type="checkbox" id="low" name="budgetvar[]" value="low">
                                    <label for="low">Low Cost</label>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="choice">
                                    <input type="checkbox" id="medium" name="budgetvar[]" value="medium">
                                    <label for="medium">Medium Range</label>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="choice">
                                    <input type="checkbox" id="premuim" name="budgetvar[]" value="premuim">
                                    <label for="premuim">Premium Range</label>
                                </div>
                            </div>

                        </div>
                    </div>

И здесьмой Javascript formData

formData = {
            'firstname': $('input[name=firstname]').val(),
            'lastname': $('input[name=lastname]').val(),
            'phone': $('input[name=phone]').val(),
            'email': $('input[name=email]').val(),
            'consent': $('input:checkbox[name=consent]').is(':checked'),
            'budgetvar': $('input:checkbox[name=budgetvar]').val(),
            'optionsvar': $('input:checkbox[name=optionsvar]').val(),
            'message': $('textarea[name=message]').val()

        };

Вот мой .ajax код

$.ajax({
            url: "includes/mail/mail.php",
            type: "POST",
            data: formData,
            success: function(data, textStatus, jqXHR) {

                $('#status').text(data.message);
                if (data.code) //If mail was sent successfully, reset the form.
                    $('#contact-form').closest('form').find("input[type=text], textarea").val("");
            },
            error: function(jqXHR, textStatus, errorThrown) {
                $('#status').text(jqXHR);
            }
        });

Затем я смотрю, чтобы получить переменные в моем PHP-скрипте следующим образом

$budget = implode(', ', $_POST['budgetvar']);

Любая помощь в том, как получить эти значения в массив, который я могу затем использовать по электронной почте php, будет огромной помощью! Я смотрел здесь, но я не могу найти что-то, что я могу попробовать и манипулировать, чтобы решить мою проблему .. Относительно плохо знакомые с этим, такие сложные решения, кажется, немного поразило меня

Спасибо взаранее!

Answer 1

Просто используйте встроенный объект FormData для сбора всех данных:

formData = new FormData( document.querySelector("form") );

Браузер может сделать всю коллекцию за вас. Вам не нужно выбирать каждый элемент управления формы один за другим.

Если вы установили отправку, используя .ajax, убедитесь, что вы установили processData: false; contentType: false, чтобы jQuery не пытался быть умным (что сломаетэто естественный ум XMLHttpRequest).

---

Если вы действительно хотите сделать это вручную, вам потребуется:

1. Найти все проверенные входы(используя их настоящее имя, которое имеет [] в конце)
2. Получите их значения
3. Поместите их в массив

например

'budgetvar': $('input[name="budgetvar[]"]:checked').map(
    (index, element) => element.value
 ).get()