Call onchange function from Document.Ready with pre selected item from update

Question

I have a user form that contains many option boxes, one of them has (onChange()) function to hide/show some text inputs based on its value. In the add form every thing works like a charm, but when editing a pre-added record, the select option is populated with (Selected), which was selected when adding the form, my question here, When I select a record to update, can I hide/show input boxes based on option box selected value using javascript.

and example of what I want can be found

Yes of course you can, but share your code so we can advise you. — cнŝdk, May 09 '16 at 10:49
Short answer is 'Yes'. However we will need to see what you have tried and some code before anyone will be able to help you more than that. — Tigger, May 09 '16 at 10:50
I am really sorry for the vague question above, here is a fiddle showing code [fiddle](https://jsfiddle.net/usgd6Ld6/2/) my problem is that select name "cateogory" come with pre-selected option, how can I hide and show inputs based on its pre-selected value — Mohammad Awni Ali, May 10 '16 at 05:48

Norman · Accepted Answer · 2016-05-10T12:09:35.057

As many already mentioned, it's hard to help without any example code given. I'll still give it a try.

HTML:

<select id="select" onchange="toggleInputs()">
    <option value="0">Option 0</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>

<input type="text" class="toggleInputs" placeholder="Input 0" id="inp0"/>
<input type="text" class="toggleInputs" placeholder="Input 1" id="inp1"/>
<input type="text" class="toggleInputs" placeholder="Input 2" id="inp2"/>
<input type="text" class="toggleInputs" placeholder="Input 3" id="inp3"/>

JS:

function toggleInputs() {
    // value of select field
    var x = document.getElementById("select").value;

    // ID of targeted input field to hide
    var targetInput = "inp"+x;

    // get all input fields and the amount of them
    var inputFields = document.getElementsByClassName("toggleInputs");
    var ln = inputFields.length;

    // show all input fields (by resetting the style)
    for (var i=0; i<ln; i++) {
        inputFields[i].setAttribute("style", "");
    }

    // hide the targeted input field
    document.getElementById(targetInput).setAttribute("style", "display: none");
}

In case you're having multiple selects, you should also group your HTML elements.

HTML:

<select id="select1" onchange="toggleInputs('select1', 'grp1')">
    <option value="0">Option 0</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>
<div id="grp1">
    <input type="text" class="toggleInputs" placeholder="Input 0" id="grp1-0"/>
    <input type="text" class="toggleInputs" placeholder="Input 1" id="grp1-1"/>
    <input type="text" class="toggleInputs" placeholder="Input 2" id="grp1-2"/>
    <input type="text" class="toggleInputs" placeholder="Input 3" id="grp1-3"/>
</div>

<select id="select2" onchange="toggleInputs('select2', 'grp2')">
    <option value="0">Option 0</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>
<div id="grp2">
    <input type="text" class="toggleInputs" placeholder="Input 0" id="grp2-0"/>
    <input type="text" class="toggleInputs" placeholder="Input 1" id="grp2-1"/>
    <input type="text" class="toggleInputs" placeholder="Input 2" id="grp2-2"/>
    <input type="text" class="toggleInputs" placeholder="Input 3" id="grp2-3"/>
</div>

JS:

function toggleInputs(targetedSelect, targetedGrp) {
    // value of select field
    var x = document.getElementById(targetedSelect).value;

    // ID of targeted input field to hide
    var targetInput = targetedGrp+"-"+x;

    // get all input fields and the amount of them
    var inputFields = document.getElementsByClassName("toggleInputs");
    var ln = inputFields.length;

    // show all input fields (by resetting the style)
    for (var i=0; i<ln; i++) {
        inputFields[i].setAttribute("style", "");
    }

    // hide the targeted input field
    document.getElementById(targetInput).setAttribute("style", "display: none");
}

Haven't tested the version for multiple selects and input groups, but it should do the job.

what I need, is to run the toggleInputs() function when page loaded, and the option come with a pre-selected option as we are using the edit page. so how can I show options to the pre selected option — Mohammad Awni Ali, May 10 '16 at 11:02
I am sending the select to the function, toggleInputs(this), how can we solve this? — Mohammad Awni Ali, May 10 '16 at 11:50
I've edited my answer to have two versions: One for a single select and some inputs and one for multiple groups. Check it out and tell me if it works ;) — Norman, May 10 '16 at 12:11
I put the following line in bottom of my body but in firefox console, it return ReferenceError: cateogry is not defined — Mohammad Awni Ali, May 11 '16 at 06:08
it worked in a strange way, I copied the many times in the page, and it worked. — Mohammad Awni Ali, May 12 '16 at 08:44
It's nice to hear that it works but actually you should need to execute the function only **once**. I think you could also add `toggleInputs()` right below the `function toggleInputs()` after the closing curly backet. Plus, in the new version, you also need to add the `targetedSelect` and the `targetedGrp`, otherwise the function won't know which inputs to toggle. You need to execute the function for each input group. In my given example it would be `function toggleInputs() {...} toggleInputs('select1', 'grp1'); toggleInputs('select2', 'grp2');` Add linebreaks for cosmetics and readability. — Norman, May 12 '16 at 08:52

Call onchange function from Document.Ready with pre selected item from update

1 Answers1