Поможете с текстом на сайте?

Question

[Иван]

В корзине есть карточки. С помощью querySelectorAll обращаюсь к ним и с помощью цикла for of и insertAdjacentText добавляю их текст в скрытый input для отправки его вместе с формой в тг. Но названия неудобно читать, так как они слипшиеся. Вот пример - "Набор СеверНабор Весенний". Нужно чтобы следующие название переносилось на новую строку - "Набор Север
Набор Весенний" , либо между ними ставилась запятая - "Набор Север, Набор Весенний". Помогите пожалуйста.

let orderProductsNames = document.querySelectorAll('.card-title')
let inputOrderNamesText = document.querySelector('#order-names-text')
const inputOrderNames = document.querySelector('#order-names')

for (const item of orderProductsNames) {
  inputOrderNames.insertAdjacentText('beforeend', item.textContent)
  inputOrderNamesText.value = inputOrderNames.textContent
}

<form class="inputs-order-box" action="/telegram.php" method="POST"> 

          <input class="order-input" type="text" placeholder="ФИО" name="name" id="name" maxlength="49">

          <input class="order-input" type="tel" placeholder="Номер телефона" name="phone" id="phone" maxlength="11">

          <input class="order-input" type="text" placeholder="Адрес" name="addres" id="address" maxlength="49">

          <div class="delivery-pay-box">
            <label>Доставка
              <select class="order-select delivery" name="Доставка">
                <option value="Самовывоз">Самовывоз</option>
                <option value="Курьер">Курьер</option>
              </select>
            </label>

            <label>Оплата
              <select class="order-select" name="Оплата">
                <option value="Переводом">Переводом</option>
                <option value="Наличными">Наличными</option>
              </select>
            </label>
          </div>

          <input id="order-names" type="hidden">

          <input type="hidden" name="order" id="order-names-text"> <!-- ВОТ В ЭТОТ ИНПУТ ЗАПИСЫВАЮТСЯ НАЗВАНИЯ -->

          <div class="order-price-box">
            <div class="prices-box"><p class="total-desc">Итого</p> <p class="full-order-price-2 total-desc"></p></div>
            <div class="prices-box"><p class="all-price-desc">Доставка</p> <p class="order-delivery-price all-price-desc"></p></div>
            <div class="prices-box"><p class="all-price-desc">Товары</p> <p class="full-order-price-3 all-price-desc"></p></div>
          </div>

          <div class="checkbox-box">
            <input class="order-check" type="checkbox" onclick="orderBtnActivate()">
            <p class="check-desc">Согласен на <a class="personal-info-desc" href="personal-info.html">обработку персональных данных</a></p>
          </div>

          <button class="do-order-btn" type="submit">Заказать :<p class="full-order-price"></p>₽</button>
        </form>

Comments

[Сергей Сергей]

inputOrderNames.value = [ ...document.querySelectorAll('.card-title') ].map( c => c.textContent ).join('\n')

[Ankhena]

По-простецки

inputOrderNames.insertAdjacentText('beforeend', `${item.textContent}, `)

Получше, собрать массив, потом выводить как угодно.

[Иван]

Ankhena, Спасибо

[Иван]

Сергей Сергей, спасибо

Answer 1

[Алексей Ярков]

Так соберите свои строки в массив и объедините как вам нравится

const strings = ["Набор Север", "Набор Весенний"];
strings.join(', '); // "Набор Север, Набор Весенний"

Comments

[Иван]

В корзине динамически расположены товары. Товаров много и их покупатели могут расположить в разных местах. Так что так не подойдет