1

Дано

Есть форма с дублирующимися именами чекбоксов

<form>
    <fieldset id="set1">
        <input type="checkbox", name="check1" value="1">    
        <input type="checkbox", name="check1" value="2">    
        <input type="checkbox", name="check1" value="3">    
        <input type="checkbox", name="check1" value="4">    
        <input type="checkbox", name="check1" value="5">    
    </fieldset> 


    <fieldset id="set2">
        <input type="checkbox", name="check2" value="1">    
        <input type="checkbox", name="check2" value="2">    
        <input type="checkbox", name="check2" value="3">    
        <input type="checkbox", name="check2" value="4">    
        <input type="checkbox", name="check2" value="5">    
    </fieldset> 

    <button type="submit"></button>
</form>

Задача - при отправке вместо стандартного набора параметров собирать адрес, в котором один параметр будет иметь множественное значение. И на стороне сервера уже эти значения разбирать.

Что я делаю

При каждом изменении сета записываю все чекнутые значения в массив:

$('fieldset#set1').on('change', function() {

    check1_arr = [];
    $("input[name='check1']:checked").each(function() {
        check1_arr.push($(this).val());
    });
})


$('fieldset#set2').on('change', function() {

    check2_arr = [];
    $("input[name='check2']:checked").each(function() {
        check2_arr.push($(this).val());
    });
})

Затем пытаюсь переопределить параметры при отправке формы:

$('form').submit(function(){
    $("input[name='check1']").val(check1_arr.join(';'));
    $("input[name='check1']").val(check1_arr.join(';'));
    return true;
})

Проблема в том, что в адрес подставляется столько параметров, сколько чекнуто чекбоксов. Значения этих параметров правильные, но они дублируют друг друга. Что нужно сделать, чтобы от этого избавиться?

0

1 ответ 1

1

Предлагаю собирать состояние чекбоксов в момент перед отправкой fetch:

function send() {

  let d = [...document.querySelector('form').querySelectorAll('fieldset')].map(e => {
    
      return e.id + '=' + [...e.querySelectorAll('input')]
        .filter(e => e.checked).map(e => e.getAttribute('value')).join(';')
        
    }).join('&');
    
  console.log(d);
  
  fetch('server.url?' + d);
}
<form>
    <fieldset id="set1">
        <input type="checkbox", name="check1" value="1">    
        <input type="checkbox", name="check1" value="2">    
        <input type="checkbox", name="check1" value="3">    
        <input type="checkbox", name="check1" value="4">    
        <input type="checkbox", name="check1" value="5">    
    </fieldset> 
    <fieldset id="set2">
        <input type="checkbox", name="check2" value="1">    
        <input type="checkbox", name="check2" value="2">    
        <input type="checkbox", name="check2" value="3">    
        <input type="checkbox", name="check2" value="4">    
        <input type="checkbox", name="check2" value="5">    
    </fieldset> 
    <button type="button" onclick=send()>send</button>
</form>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.