Как отправить через form выбранные input?

Question

[maestro07]

Есть список, с помощью select выбираю и сохраняю выбранные элементы в массив. и этот массив надо передать через form на сервер. полученный ответ надо открыть в новым окне. при нажатии на "Распечатать" надо собрать выделенные элементы в массив и передать его в <input type="hidden" name="doc_ids[]" value="">. У меня на сервер всегда уходит пустой массив, но в консоле.лог выводит массив. Мне кажется что запрос отправляется быстрее пока массив заполнится выделенными элементами.

<form action="{% url 'documents:print_documents'%}" method="POST" target="_blank">
    <input type="hidden" name="doc_ids[]" value="">
    <input class="btn btn-sm btn-default print-all-btn" type="submit" name="send" value="Распечатать">
</form>

printAll.on("click", function(){
    var id = [];
    $('input.select-inv-check:checked').each(function() {
        id.push($(this).data('id'));
    });
    document.getElementsByName("doc_ids[]").value = id;
});

Comments

[panterr92]

попробуй убрать action в форме.

[maestro07]

matroskin92, для чего? в эту же url идет запрос

[panterr92]

maestro07, если данные собираются при клике на кнопку в форме, то срабатывает action
я в таких случаях отправляю форму на обработчик непосредственно через JS

[maestro07]

matroskin92, убрал action в форме, а url куда писать?

[maestro07]

matroskin92 не совсем понял можно подробнее

[panterr92]

maestro07, я обычно отправляю через AJAX

function fnct(data) {
   event.preventDefault();

    $.ajax({
         type: 'POST',
         url: 'URL обработчика',
         dataType: 'json',
         data: data,
                success: function(){},
                error: function (xhr, ajaxOptions, thrownError) {
                        console.log(xhr.status);
                        alert(thrownError);
                    },       
            });

    return false;
}

[maestro07]

matroskin92, я так делал, не помогло. Если так отправить данные есть на странице

<form action="url" method="POST" target="_blank">
    <input type="hidden" name="id[]" value="9173981723917293">
    <input type="hidden" name="id[]" value="9173981723917293">
    <input type="hidden" name="id[]" value="9173981723917293">
    <input type="submit" name="send" value="send">
</form>

мне теперь надо отправить выделенные элементы

[panterr92]

maestro07, соберите то что нужно в JSON (по конкретным условиям) и только после отправляйте.

[maestro07]

matroskin92,  почему нельзя просто отправить массив?

[panterr92]

maestro07, да можно. по факту это все равно объект JS.
не знаю, что не получилось, попробуйте продебажить каждый шаг выполнения скрипта.

[maestro07]

matroskin92, отправка происходит быстрее чем сбор элементов в массив. прежде чем отправить мне надо чтобы в value был массив элементов. вот этот момент не пойму я

[panterr92]

maestro07, возвращаясь к началу, action срабатывает быстрее, чем данные при клике на submit внутри формы.

Answer 1

[sergski]

так:

<form id="form" action="{% url 'documents:print_documents'%}" method="POST" target="_blank">
    <input class="select-inv-check" data-id="123" type="checkbox">123
    <input class="select-inv-check" data-id="456" type="checkbox">456


    <input class="btn btn-sm btn-default print-all-btn" id="printAll" type="submit" name="send" value="Распечатать">

</form>

$( "#form" ).submit(function( event ) {

    var id = [];

    $('input.select-inv-check:checked').each(function() {
        id.push($(this).data('id'));
    });

    if (id.length != 0) {

        id.forEach(function(item, i) {
          
          var elInput = document.createElement("input");
              elInput.setAttribute('type', 'hidden');
              elInput.setAttribute('name', 'doc_ids[]');
              elInput.setAttribute('value', '');
              elInput.value = id[i];

            $("#form").append(elInput);

        });

        return;
    }

    event.preventDefault();
    
});

Comments

[maestro07]

все равно страница пустая

[maestro07]

sergski Пишу вручную, выводятся на странице данные.

<form action="url" method="POST" target="_blank">
    <input type="hidden" name="id[]" value="9173981723917293">
    <input type="hidden" name="id[]" value="9173981723917293">
    <input type="hidden" name="id[]" value="9173981723917293">
    <input type="submit" name="send" value="send">
</form>

как сделать чтобы выбранные выводились на новой странице?

[sergski]

maestro07, Если я правильно понимаю, вы собираете массив из value чекбоксов, а потом отправляете их формой? Код отредактировал.

[maestro07]

sergski, еще один вопрос.
есть такая функция для всех form.

$("form").submit(function() {
        blockScreen("Обработка данных...");
    });

и конечно он срабатывает и моем для #form. как сделать чтобы он не вызывал blockScreen?

[sergski]

maestro07, $("form").not( "#form" ).submit(function() {}

[maestro07]

sergski, куда это писать? и почему id main?

$("form").not("#main").submit(function() {
        blockScreen("Обработка данных...");
    });

не все равно blockscreen есть

[sergski]

maestro07, Id той формы, которую не нужно обрабтывать. Замените #main на #form

[maestro07]

sergski,

$("form").submit(function() {
        blockScreen("Обработка данных...");
    });

$("#printInvoices").submit(function(e) {
    var id = [];
    $('input.select-inv-check:checked').each(function() {
        id.push($(this).data('docid'));
    });
    if (id.length != 0) {
        id.forEach(function(item, i) {
            var elInput = document.createElement("input");
            elInput.setAttribute('type', 'hidden');
            elInput.setAttribute('name', 'doc_ids[]');
            elInput.setAttribute('value', '');
            elInput.value = id[i];
            console.log(elInput);
            $("#printInvoices").append(elInput);
        });
        return;
    }
    event.preventDefault();
});

я не понял куда и что добавить надо

[sergski]

maestro07,

$("form").not("#printInvoices").submit(function() {
        blockScreen("Обработка данных...");
    });

этот код запустит функцию для всех form на странице, кроме #printInvoices или не понимаю вопрос

[sergski]

maestro07, в коде нужно убрать строчку -- console.log(elInput);