Save data, disregarding hidden DIV's

Question

Save data, disregarding hidden DIV's

Navigation

#1 by (1 votes)

2

In my View I have a select that hides and shows the div according to the select chosen. This part is working properly. This select has three options, and the form changes according to the chosen value. The problem is that I have equal fields in these forms, and when I send them to controller , it recognizes only the first value.

An example below:

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>Qualasuacidade?</label><selectclass="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>

For those who prefer: JSFiddle Example

My problem is that if you fill out Form 1, it sends to my controller and saves it normally. Now if I fill form 2 or form 3, it sends the repeated fields as null .

My question is: How do I send to controller o formulário selected in?

And another question is: Am I doing the best? In this example, the user will have three fields, Nome, Idade, Cidade . Is this the best way to do this, leaving the unused field as null , or create three entities, such as User1, User2, user3 , and each with their properties? Type User1 only with property Nome , User2 with Nome e idade and User3 with Nome, Idade, cidade .

asp.net-mvc-5

asked by anonymous 15.05.2015 / 20:37

1 answer

noClonflict () jQuery - Does not work anymore Prevent multiple clicks on Android

score 1 · Accepted Answer

Following the idea of @LuisHenrique in the comments, I disabled the inputs of div's hidden, thus sending only the necessary data.

My script looks like this:

<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>

The rest of the code stayed the way it was.