How do i pass this POST data?

Question

I am having some trouble passing this info from a dropdown form.

First of all I have one dropdown, and when you choose A, B or C, a DIV shows with another dropdown for either, A, B or C.

The dropdown in these DIV are all 3 named product.

Here I have the code which want to show DIV:

<script>
    function namedata(data) {
        if (data == 'AA') {
            $('#divaa').css('display', 'block');
            $('#divb').css('display', 'none');
            $('#divc').css('display', 'none');
            $('#diva').css('display', 'none');

        }
        if (data == 'A') {
            $('#diva').css('display', 'block');
            $('#divb').css('display', 'none');
            $('#divc').css('display', 'none');
            $('#divaa').css('display', 'none');


        }
        else if (data == 'B') {
            $('#divb').css('display', 'block');
            $('#diva').css('display', 'none');
            $('#divc').css('display', 'none');
            $('#divaa').css('display', 'none');

        }
        else if (data == 'C') {
            $('#divc').css('display', 'block');
            $('#diva').css('display', 'none');
            $('#divb').css('display', 'none');
            $('#divaa').css('display', 'none');

        }
    }
</script>

And here i have all the dropdowns

<select name="name" onchange="return namedata(this.value);">
    <option value="AA">PLEASE CHOOSE</option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
</select>

Lorem ipsum..<br>
<div style="display: block;" id="divaa">
    Choose in the first dropdown first
</div>

<div style="display: none;" id="diva">
    <select name="produkt" id="field1">
        <option value="11">AA</option>
        <option value="12">AB</option>
        <option value="12">AC</option>
    </select>
</div>

<div style="display: none;" id="divb">
    <select name="produkt" id="field2">
        <option value="31">BA</option>
        <option value="32">BB</option>
    </select>
</div>

<div style="display: none;" id="divc">
    <select name="produkt" id="field3">
        <option value="21">CA</option>
        <option value="22">CB</option>
    </select>
</div>

I want to get the value from one of the choosen dropdowns to the next page, using POST.

But the result is i allways get value 21, the CA field.

What can the problem be?

option returns value which is selected if you use value="CA" then it will give you CA — Keval Bhatt, Jun 01 '15 at 13:04

score 1 · Accepted Answer · edited May 23 '17 at 12:21

Yeah, that happends when you dont disabled a field and the value its submitted to the server.

So in other to archive that you have to, instead of just display=none, also disable the fields.

So try this:

function namedata(data) {
        if (data == 'AA') {
            $('#divaa').css('display', 'block');
            $('#divb').css('display', 'none').prop("disabled",true);
            $('#divc').css('display', 'none').prop("disabled",true);
            $('#diva').css('display', 'none').prop("disabled",true);

        }
        if (data == 'A') {
            $('#diva').css('display', 'block');
            $('#divb').css('display', 'none').prop("disabled",true);
            $('#divc').css('display', 'none').prop("disabled",true);
            $('#divaa').css('display', 'none').prop("disabled",true);


        }
        else if (data == 'B') {
            $('#divb').css('display', 'block');
            $('#diva').css('display', 'none').prop("disabled",true);
            $('#divc').css('display', 'none').prop("disabled",true);
            $('#divaa').css('display', 'none').prop("disabled",true);

        }
        else if (data == 'C') {
            $('#divc').css('display', 'block');
            $('#diva').css('display', 'none').prop("disabled",true);
            $('#divb').css('display', 'none').prop("disabled",true);
            $('#divaa').css('display', 'none').prop("disabled",true);

        }
    }

score 1 · Answer 2 · answered Jun 01 '15 at 13:25

Do not only hide the divs with display: none, but also disable the selects inside those divs that are not active. That will prevent their values from being sent:

<script>
function namedata(data) {
    if (data == 'AA') {
        $('#divaa').css('display', 'block');
        $('#divb').css('display', 'none').find("select").prop("disabled", "disabled");
        $('#divc').css('display', 'none').find("select").prop("disabled", "disabled");
        $('#diva').css('display', 'none').find("select").prop("disabled", "disabled");


    }
    if (data == 'A') {
        $('#diva').css('display', 'block').find("select").prop("disabled", false);
        $('#divb').css('display', 'none').find("select").prop("disabled", "disabled");
        $('#divc').css('display', 'none').find("select").prop("disabled", "disabled");
        $('#divaa').css('display', 'none');


    }
    else if (data == 'B') {
        $('#divb').css('display', 'block').find("select").prop("disabled", false);
        $('#diva').css('display', 'none').find("select").prop("disabled", "disabled");
        $('#divc').css('display', 'none').find("select").prop("disabled", "disabled");
        $('#divaa').css('display', 'none');

    }
    else if (data == 'C') {
        $('#divc').css('display', 'block').find("select").prop("disabled", false);
        $('#diva').css('display', 'none').find("select").prop("disabled", "disabled");
        $('#divb').css('display', 'none').find("select").prop("disabled", "disabled");
        $('#divaa').css('display', 'none');

    }
}
</script>

You can see a demo here: http://jsfiddle.net/srnzb3cy/ (check the console to see the values that would be sent)

score 1 · Answer 3 · answered Jun 01 '15 at 13:34

1

Please use the power of jquerys selectors.

You do not need all these lines of code.

Try this:

$('#diva, #divb, #divc, #divaa').not('#div' + data.toLowerCase()).css('display', 'none').prop("disabled",true);
$('#div' + data.toLowerCase()).css('display', 'block').prop("disabled",false);

The first line will select all divs and deselect the one that has to be shown. The second line will only select to div that is to be shown

answered Jun 01 '15 at 13:34

DKSan

4,187
3
25
35

This solution is neat. Just one comment: use `find("select")` to disable the dropdown, right now you are applying the `prop("disabled",true)` to the `div` instead of the `select` – Alvaro Montoro Jun 01 '15 at 13:55

score 1 · Answer 4 · answered Jun 01 '15 at 13:56

Maybe you want an answer using the resources you gave, but if isn't this the case, I can recommend you to use Chained selects plugin (jQuery)

It will help you a lot !

I can show you an example, try this:

<select name="name" id="father">
    <option value="AA">PLEASE CHOOSE</option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
</select>

So much easier :)<br>
<div style="display: block;" id="divaa">
    Choose in the first dropdown first
</div>

<div style="display: none;" id="divaa">
    <select name="produkt" id="field1">
        <option value="11" class="A">AA</option>
        <option value="12" class="A">AB</option>
        <option value="12" class="A">AC</option>
        <option value="31" class="B">BA</option>
        <option value="32" class="B">BB</option>
        <option value="21" class="C">CA</option>
        <option value="22" class="C">CB</option>
    </select>
</div>

And the only js you need is:

$("#field1").chained("#father");

You may need this:

https://github.com/tuupola/jquery_chained/blob/master/jquery.chained.min.js

Good luck !

Here's the link of the project for more info:

http://www.appelsiini.net/projects/chained

How do i pass this POST data?

4 Answers4