CODEWITHSUNDEEP
javascripthtml
Mohammad Awni Ali
Mohammad Awni Ali

Reputation: 115

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

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

Upvotes: 0

Views: 1657

Answers (1)

Norman
Norman

Reputation: 805

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.

Upvotes: 1

Related Questions