Как передать несколько текстовых значений с одинаковыми идентификатором и именем в строку запроса AJAX

Question

<input type="text" name="b_destinations[]" id="title"/>
<input type="text" name="b_destinations[]" id="title"/>
<input type="text" name="b_destinations[]" id="title"/>
<input type="text" name="b_destinations[]" id="title"/>

Выше мой код, как вы можете видеть, у меня есть несколько текстовых полей с тем же именем и идентификатором.теперь я использовал php без функции ajax для отправки.Используя foreach и json_encode, так как это для плана бронирования командировок, я сохраняю эти значения в одном столбце базы данных.Ниже мой php-код для запроса, который я использую.

foreach($_POST['b_destinations'] as $p_destination) {
    $pdata[] = mysqli_real_escape_string($mysqli,$p_destination);
}
$pData[] = $pdata;
$b_destinations = json_encode($pData);

Я сохранял эту форму без ajax, но теперь я собираюсь использовать ajax для отправки формы.Как я могу передать это значение множественного текстового поля с тем же именем и идентификатором в строку данных ajax, а затем опубликовать его в мой запрос php

Answer 1

Как некоторые комментарии выше, я действительно рекомендую не иметь одинаковый идентификатор для элементов DOM, он должен быть уникальным.

Вот решение для поста выше:

const handleClick = () => {
    var b_destinations = document.getElementsByName('b_destinations[]');
    var b_destinationsArr= [];

    b_destinations.forEach(function(element) {
        console.log(element.value);
        b_destinationsArr.push(element.value);
    });

    var data = JSON.stringify(b_destinationsArr);
    
    //you have to change the url data here
    var url = "https://your.url.here";

    $.ajax({
        type: "POST",
        url: url,
        data: data,
        success: success,
        dataType: dataType
    });
    //the same above
    //$.post( url, data );

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" onSubmit="return handleClick()">
    <input type="text" name="b_destinations[]" id="title"/>
    <input type="text" name="b_destinations[]" id="title"/>
    <input type="text" name="b_destinations[]" id="title"/>
    <input type="text" name="b_destinations[]" id="title"/>
    <input type="submit" value="Submit">
</form>

Answer 2

Идентификатор не имеет значения.Вы можете использовать данное имя для передачи нескольких значений,

var b_destinations = document.getElementsByName('b_destinations[]');
var b_destinationsArr= [];
for(var i=0;i<b_destinations.length;i++)
    b_destinationsArr[] = b_destinations[i].value;
 // Ajax call with b_destinationsArr array in POST action