Как создать массив значений chekbox и отправить его по ajax?

Question

[Узаир Ижа]

У меня есть chekbox , мне нужно передать их значения создав массив через ajax.
Мой пример кода внизу он не работает.

<input type="checkbox" id="svois" value="3"> Цвет    </label>
       <input type="checkbox" id="svois" value="4"> Масса    </label>
       <input type="checkbox" id="svois" value="5"> Длина    </label>
       <input type="checkbox" id="svois" value="6"> Ширина    </label>


       <input type="checkbox" id="svois" value="7"> Высота    </label>
       <input type="checkbox" id="svois" value="8"> Количество    </label>
       <input type="checkbox" id="svois" value="9"> Назначение    </label>
       <input type="checkbox" id="svois" value="10"> Способ изготовления, метод производства    </label>
       <input type="checkbox" id="svois" value="11"> Диаметр    </label>
       <input type="checkbox" id="svois" value="12"> Вид обработки    </label>
       <input type="checkbox" id="svois" value="13"> Тип покрытия    </label>
       <input type="checkbox" id="svois" value="14"> Форма    </label>

<script>
function svios(){

              var tagsArray = new Array();
$("input:checked", svois).each(function(id) {
    message = $("input:checked", svois).get(id);
    tagsArray.push(message.id);







    })
               $.ajax({

       type: "POST",
      url: "ajax1.php",
      data: "svois[]="+tagsArray ,
      success: function(onecat5){
          $('#onecat5').html(onecat5);
}
    });



};
</script>

Answer 1

[Артём]

Всё не так страшно, как вам кажется.
В данном примере всё корректно отправится на сервер по нажатию на "Отправить".
Так же для примера прикладываю как я бы отправлял форму на сервер через AJAX.

<form method="POST" action="/" id="form">
    <label><input type="checkbox" name="svois[]" class="svois" value="7"> Высота</label><br/>
    <label><input type="checkbox" name="svois[]" class="svois" value="8"> Количество</label><br/>
    <label><input type="checkbox" name="svois[]" class="svois" value="9"> Назначение</label><br/>
    <label><input type="checkbox" name="svois[]" class="svois" value="10"> Способ изготовления, метод производства</label><br/>
    <label><input type="checkbox" name="svois[]" class="svois" value="11"> Диаметр</label><br/>
    <label><input type="checkbox" name="svois[]" class="svois" value="12"> Вид обработки</label><br/>
    <label><input type="checkbox" name="svois[]" class="svois" value="13"> Тип покрытия</label><br/>
    <label><input type="checkbox" name="svois[]" class="svois" value="14"> Форма</label><br/>
    <input type="submit" value="Отправить">
</form>

<script>
$(function(){
    var form = $('#form');
    form.on('submit', function(e){        
        e.preventDefault();
        
        $.ajax({
            type: form.attr('method'),
            url: form.attr('action'),
            data: form.serialize(),
            success: function(result)
            {
                console.log( result );
            }
        });
    });
});
</script>

Answer 2

[Dark Hole]

Люди! Вы когда поймете, что не может быть двух элементов с одним id?
К тому же вы не закрываете input'ы(<input></label>) и еще кучу других багов наделали... Мой вариант, будут вопросы - спрашивайте

Comments

[Евгений Самойленко]

prntscr.com/aen57w
Вот это просто 5.

[Dark Hole]

Евгений Самойленко: а мне нужно все скопировать?

[Dark Hole]

Евгений Самойленко: это только пример, смотрите JS

Answer 3

[Ernest Faizullin]

<input type="checkbox" class="svois" value="7"><label> Высота</label>
<input type="checkbox" class="svois" value="8"><label> Количество</label>
<input type="checkbox" class="svois" value="9"><label> Назначение</label>
<input type="checkbox" class="svois" value="10"><label> Способ изготовления, метод производства</label>
<input type="checkbox" class="svois" value="11"><label> Диаметр</label>
<input type="checkbox" class="svois" value="12"><label> Вид обработки</label>
<input type="checkbox" class="svois" value="13"><label> Тип покрытия</label>
<input type="checkbox" class="svois" value="14"><label> Форма</label>

<script>
    var tagsArray = [];
    $(".svois:checked").each(function(index) {
        tagsArray.push($(this).val());
    });

    $.ajax({
        type: "POST",
        url: "ajax1.php",
        data: {"svois": tagsArray},
        success: function(onecat5){
            $('#onecat5').html(onecat5);
        }
    });
</script>

это не решение, а примерные поправки, которые нужно учесть