0

Tenho o seguinte cenário: O cliente escolhe mais de um pacote de benefícios em uma pagina (formulário html), até aí tudo bem, trabalho com array

Exemplo:

<input type="checkbox" name="pacote[]" value="pacote1">
<input type="checkbox" name="pacote[]" value="pacote2">

Mas numa próxima tela ele deverá colocar o nome dos beneficiários em cada pacote, o que pode repetir ou não o mesmo beneficiário para um ou mais pacotes.

A estrutura ficaria mais ou menos assim:

Pacote1:

  Beneficiário-1
  Beneficiário-2
  Beneficiário-3

Pacote2:

  Beneficiário-1
  Beneficiário-3
  Beneficiário-4

Veja que o Pacote2 tem beneficiário que não repete no Pacote1

Quando eu enviar o form tenho que saber qual beneficiário é de cada pacote. Estou quebrando a cabeça numa forma de fazer isso. Se desse pra enviar mais de um form ao mesmo tempo beleza, ou se pudesse fazer um agrupamento com <fieldset>resolveria, pois colocaria um campo hidden e matava.

Se alguém entendeu a necessidade e puder dar alguma ideia, será muito bem vinda.

2
  • Se possível, coloque o código do seu formulário na questão
    – Vinícius
    Commented 7/06/2016 às 11:18
  • 1
    @Vinicius acabei achando a solução nuns exemplos na web tem que acrescentar os arrays conforme os niveis que preciso, no caso é name="pacote[beneficiario][]" ou seja é matriz de array
    – user37466
    Commented 8/06/2016 às 1:51

1 Resposta 1

0

A solução que vejo mais clara pra você seria criar elementos customizados com JavaScript. Quanto à questão de traduzir isso em dados, fiz o script abaixo, que traduz a estrutura HTML para JS. Veja se ajuda:

$("form.pacotes").on("submit", function(e) {
  // para evitar que o form seja enviado da maneira padrão
  e.preventDefault();
  var data = [];
  
  // procurar elementos com atributo data-pacote e iterar
  $(this).find("[data-pacote]").each(function(){
    pacote_element = $(this);
    data.push({
        pacote: $(this).attr("data-pacote"),
      
        // o bloco (function(){})() pode parecer estranho, mas funciona como função anônima, um bloco que se auto-executa e apenas retorna o resultado
        beneficiarios: (function(){
            // buscando os ids dos beneficiarios
            var beneficiarios = [];
            pacote_element.find("[data-beneficiario]").each(function(){
                beneficiarios.push($(this).attr("data-beneficiario"));
            });
            return beneficiarios;
        }).call()
    });
  })
  
  // fazendo um output disso
  console.log(data);
  
  // Aqui você pode fazer o envio desses dados por xmlHttpRequest, $.ajax, etc. 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="pacotes">
  <ul data-pacote="1">
    <li data-beneficiario="1">1</li>
    <li data-beneficiario="2">2</li>
    <li data-beneficiario="3">3</li>
    <li data-beneficiario="7">7</li>
    <li data-beneficiario="9">9</li>
    <li data-beneficiario="10">10</li>
  </ul>

  <ul data-pacote="2">
    <li data-beneficiario="4">4</li>
    <li data-beneficiario="5">5</li>
    <li data-beneficiario="6">6</li>
    <li data-beneficiario="8">8</li>
  </ul>
  <button type="submit">Enviar</button>
</form>

1
  • Muito bom @pedrozath
    – user37466
    Commented 7/06/2016 às 20:49

Você deve fazer log-in para responder a esta pergunta.