2

Em minha View eu possuo um select que esconde e mostra adiv de acordo com o select escolhido. Esta parte, está funcionando corretamente. Este select possui três opções, e o formulário muda de acordo com o valor escolhido. O problema, é que possuo campos iguais nestes formulários, e ao enviar para o controller, ele reconhece apenas o primeiro valor.

Um exemplo abaixo:

var select = document.querySelector('select#Cidade');
var cidades = document.querySelectorAll('.divcidade');

function esconder() {
    for (var i = 0; i < cidades.length; i++) {
        cidades[i].style.display = 'none';
    };
}

select.addEventListener('change', function () {
    esconder()
    var id = this.options[this.selectedIndex].value;
    console.log(id, this);
    document.getElementById(id).style.display = 'block';
});

esconder();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <label>Qual a sua cidade?</label>
    <select class="cat_dropdown" id="Cidade" name="Cidade">
    <option value="1">Fom 1</option>
    <option value="2">Fom 2</option>
    <option value="3">Fom 3</option>
    </select>
<div id="1" class="divcidade">    
     Nome: <input name="nome"/>
</div>

<div id="2" class="divcidade">   
     Nome: <input name="nome"/><br/> 
     Idade: <input name="idade"/>
</div>

<div id="3" class="divcidade">
     Nome: <input name="nome"/><br/>
     Idade: <input name="idade"/><br/>
     Cidade: <input name="cidade"/>
</div>

Para quem prefere: Exemplo no JSFiddle

Meu problema, é que se preencher o Form 1, ele envia para meu controller e salva normalmente. Agora se eu preencher o form 2 ou form 3, ele envia os campos repetidos como null.

Minha dúvida é: Como enviar para o controller o formulário selecionado no?

E uma outra dúvida é: Estou fazendo da melhor forma? Neste exemplo o usuário terá três campos, Nome, Idade, Cidade. A melhor forma de fazer é essa, deixando o campo não utilizado como null, ou criar três entidades, como User1, User2, user3, e cada uma com suas propriedades? Tipo User1 somente com a propriedade Nome, o User2 com Nome e idade e o User3 com Nome, Idade, cidade.

5
  • Se você setar o campo como disabled ele não será enviado na requisição. 15/05/2015 às 18:39
  • @LuisHenrique Você teria algum exemplo?
    – Randrade
    15/05/2015 às 18:53
  • Porque você não deixa os três campos visíveis e dependendo do select você da disable em um ou mais inputs? Assim só teria um form e ficaria mais simples o submit.
    – dHEKU
    15/05/2015 às 19:11
  • @dHEKU É porque eu possuo uns 10 campos em cada div. Eu apenas reduzi o exemplo. E outra, como os campos possuem o mesmo nome e atributo, se ficar a amostra, mesmo desabilitado, recebo reclamação dos usuários do sistema.
    – Randrade
    15/05/2015 às 19:16
  • @LuisHenrique fiz conforme a sua ideia. Porém, se alguém possuir outra alternativa melhor, ficarei feliz em utilizar.
    – Randrade
    15/05/2015 às 19:26

1 Resposta 1

1

Seguindo a ideia do @LuisHenrique nos comentários, eu desabilitei os inputs das div's ocultas, enviando assim somente os dados necessários.

Meu script ficou desta forma:

<script>
    var select = document.querySelector('select#Prazo');
    var cidades = document.querySelectorAll('.divPrazo');

    function esconder() {
        for (var i = 0; i < cidades.length; i++) {
            cidades[i].style.display = 'none';
            //Desabilito aqui todos os inputs das divs
            $(".divPrazo :input").prop("disabled", true);
        };
    }

    select.addEventListener('change', function () {
        esconder();
        var id = this.options[this.selectedIndex].value;
        console.log(id, this);
        document.getElementById(id).style.display = 'block';
        //Habilito aqui todos os inputs da div selecionada
        $("#" + id + " :input").prop("disabled", false);
    });
    esconder();
</script>

O restante do código permaneceu da forma que estava.

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 .