Automatically save to bank after changing select value

Question

I am using Datatable to show a table to the user with some information, in one of the columns (Status) is displayed a select with options. I want it to be saved in the bank automatically when selecting another option from select. I am not using Forms.

.table-wrapper-tabs id="tab-#{realty.id}"
        table.general-table id="#{realty.id}-table" cellspacing="0" width="100%"
          thead
            tr
              - if browser.device.mobile?
                th 
              th.col-md-2 Nome
              th.col-md-2 Telefone
              th.col-md-2 Email
              th.col-md-2 Origem
              th.col-md-1 Status
              th.col-md-1 Data
          tbody
            - if realty.leads.any?
              - realty.leads.each do |lead|
                tr
                  - if browser.device.mobile?
                    td 
                      i.fa.fa-arrow-circle-down
                  td #{lead.name}
                  td #{lead.phone.empty? ? "Não informado" : lead.phone}
                  td #{lead.email}
                  td #{lead.origin}
                  td 
                    select#leads-status
                      <option value='0' #{lead.status == 'new_lead' ? 'selected':''} >  Novo Lead </option>
                      <option value='1' #{lead.status == 'interest' ? 'selected':''} >  Interessado </option>
                      <option value='2' #{lead.status == 'visit' ? 'selected':''} >  Visita Feita </option>
                      <option value='3' #{lead.status == 'proposal' ? 'selected':''} >  Proposta Feita </option>
                      <option value='4' #{lead.status == 'no_interest' ? 'selected':''} >  Sem Interesse </option>
                  td #{lead.created_at.strftime("%d/%m/%Y")}

I know I’ll probably have to use a change in JS

Answer 1

That’s exactly what you’re thinking, in the onchange method, you’ll take the value and send it to your backend, to a power route, preferably using AJAX, so you won’t have to reload the entire table again.

 function saveLeadStatus ( valorDoSelect) {
     let data = { select: valorDoSelect }
     $.post('/form.php', data, function(response) {
         // aqui vai voce faz a logica de sucesso ou erro
         console.log("Response: "+response);
     }
});