Save data by disregarding hidden DIV’s

Asked

Viewed 64 times

2

In my View i own a select that hides and shows thediv in accordance with the select chosen. This part, is working correctly. 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 sending to the 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>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>

For those who prefer: Example in Jsfiddle

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

My question is: How to send to controller the formulário selected in?

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

asp.net-mvc-5

  • If you set the field to disabled it will not be sent in the request.

  • @Luishenrique You would have some example?

  • Why don’t you make the three fields visible and depending on the select you of disable in one or more inputs? Then you’d only have one form and it would be simpler.

  • @dHEKU It’s because I own about 10 fields in each div. I just narrowed down the example. And another, as the fields have the same name and attribute, if the sample remains, even disabled, I get complaint from system users.

  • @Luishenrique I did according to your idea. However, if someone has a better alternative, I will be happy to use.

1 answer

1


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

My script got this way:

<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 remained the way it was.

Browser other questions tagged asp.net-mvc-5

You are not signed in. Login or sign up in order to post.