3

Eu tenho um form e dentro deste form estou adicionando um determinado input dinamicamente via jquery utilizando um botão, esses inputs vão para um array em uma controller C#. inserir a descrição da imagem aqui

Atualmente eu estou fazendo assim:

  for (var j = 0; j < numeroDePiscinas; j++) {
            formdata.append("Piscinas", $("#piscina"+j).val());
        }

O problema e que essa lógica não vai funcionar mais porque o usuario ira poder pode remover esses inputs, eu usava o Id do input de acorodo que era adicionado , ex posição 1, id=piscina1

O que eu quero fazer é pegar todos os inputs com a classe inputPiscina e enviar o seu valor para a controller, eu tentei algo assim :

 $("#form:formPiscina").each(".inputPiscina",
            function() {
                formdata.append("Piscinas", $(this).val());
            });

mas não funcionou, tse alguém puder me ajudar, se alguém souber alguma forma melhor de fazer isso, eu ficaria agradecido.

4 Respostas 4

2

Se já tens um objeto formdata podes enviar um array para essa chave. Algo assim:

var piscinas = $("#form:formPiscina .inputPiscina").map(function() {
    return this.value;
}).get(); // o ".get()" é para gerar uma array nativa e não uma coleção jQuery
formdata.append("Piscinas", piscinas);
1
  • 1
    Legal, vou tentar essa forma também, uma pergunta rapida o que o .map faz, sou bem leigo nessa parte. 6/06/2017 às 13:26
1

Você pode utilizar o .serialize() do jQuery com essa função você pegar todos os dados do seu form de forma correta para envio. ficaria dessa forma:

jQuery('form').serialize();

Aqui um exemplo do código :

JSFIDDLE EXEMPLO

1

Dê uma lida sobre delegação de eventos, mais espeficamente sobre propagação de eventos, na documentação oficial da biblioteca jQuery.

Resumidamente:

A delegação de eventos refere-se ao processo de utilização da propagação de eventos (bubbling) para lidar com eventos em um nível superior no DOM do que o elemento no qual o evento se originou. Isso nos permite anexar um único event listener para elementos que existem agora ou no futuro.

Um exemplo mínimo seria assim:

// "click": evento
// ".inputPiscina": elemento filho que esse evento deve ser aplicado
$( "#meuform" ).on( "click", ".inputPiscina", function( event ) {
    event.preventDefault();
    console.log( $( this ).attr("id") );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div id="container">
    <form id="meuform">
        <input id="piscina1" type="text" class="inputPiscina">
        <input id="piscina2" type="text" class="inputPiscina">
        <input id="piscina3" type="text" class="inputPiscina">
    </form>
</div>
</body>
</html>

Você pode adaptar o exemplo para o seu caso, selecionando o form e delegando o evento change para os inputs filhos que possuam a classe .inputPiscina.

0

Eu acabei resolvendo logo após postar a pergunta

Usei o seguinte código:

   $("input:text.inputPiscina").each(
            function() {
                formdata.append("Piscinas", $(this).val());
            });

Assim eu fui em todos os inputs do tipo text que tinham a classe inputPiscina e enviei os dados para minha controller.

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

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .