Send Post with form data through Jquery

Question

I want to create a function that moves all selected records from one table to another. The user selects multiple records in a list, clicks the move button, at that point the system opens the form for the user to choose the table to which the record will be moved and click save.

I have the Jquery code that sends a post with the ID of all selected records. But I need that besides the ID, this code also send the information of the options chosen in the form.

Form code

<form method="post">        
<div class="panel-body">
    <div class="row">
        <div id="divAction" class="form-group col-md-12">
            <label class="control-label">Escolha a tabela</label>
            <select name="id_tabela" id="id_tabela" required="" >
                <option value="1">– Tabela 1 –</option>
                <option value="2">– Tabela 2 –</option>                 
            </select>           
        </div>
        <button type="submit" name="save" class="btn btn-success transfer">Salvar alterações</button>                                   
    </div>  
</div>

Jquery code

jQuery('.transfer').on('click', function(e) { 
            var allVals = [];  
            $(".sub_chk:checked").each(function() {  
                allVals.push($(this).attr('data-id'));
            });  
            //alert(allVals.length); return false;  
            if(allVals.length <=0)  {  

                jQuery(function(){swal({
                  title: 'ATENÇÃO',
                  text: 'Nenhum registro selecionado',
                  confirmButtonColor: "#46be8a",
                  timer: 5000
                }).then(
                  function () {},
                  // handling the promise rejection
                  function (dismiss) {
                    if (dismiss === 'timer') {
                      console.log('I was closed by the timer')
                    }
                  }
                );
            });     

            }else {  

             swal({
                      title: "Deseja Mover?",
                      text: "Todos os registros selecionados serão movidos para a lista escolhida",
                      type: "warning",
                      showCancelButton: true,
                      confirmButtonColor: '#DD6B55',
                      confirmButtonText: 'Sim, Mover',
                      cancelButtonText: 'Cancelar',
                      closeOnConfirm: false,
                      //closeOnCancel: false
                    },
                    function() {
                        var ids = []; // cria o array                           
                        $.each(allVals, function( index, value ) {
                            //$('table tr').filter("[data-row-id='" + value + "']").remove();
                            id = value;  
                            ids.push(id); // armazena no array
                        });

                        var formTest = document.createElement('form');
                        formTest.setAttribute("method", "post");
                        formTest.setAttribute("action", "");
                        var post = document.createElement("input");
                        post.setAttribute("type", "hidden");
                        post.setAttribute("name", "idsTransf");
                        post.setAttribute("value", ids);
                        formTest.appendChild(post); 
                        document.body.appendChild(formTest);
                        formTest.submit();

                    }); 



            }

Answer 1

As I do not know the data that has the table I will give you a generic solution to apply.

Let’s assume that the table has the column Id and other content. So the same way you got the ID you get the content, only at the time of saving, you save it in an array of objects. I’ll give you an example of how to create for you to see on the console how it looks:

var obj = {
    'registro1' : {
        'id' : '',
        'conteudo' : ''
    },
    'registro2' : {
        'id' : '',
        'conteudo' : ''
    }
};
obj.registro1.id = 'input1';
obj.registro1.conteudo = 'input2';
obj.registro2.id = 'input3';
obj.registro2.conteudo = 'input4';

console.log(obj);