tbrock29 tbrock29 - 2 months ago 6
Javascript Question

Having changing text-boxes/drop-downs appear when certain item is picked from a drop-down menu

Currently in my code I have one drop-down menu. This drop-down menu has three options the user can pick from. Complete needs to have a text-box appear if it is selected. Abandon needs to have a drop-down menu to show up. Then Transfer works the same way. A drop-down menu needs to appear for it as well.

My HTML code for the first drop-down:

<select name="Action" id="ActionDD" required onchange="showHide()">
<option value="">Action:</option>
<option value="complete">Complete</option>
<option value="abandon">Abandon</option>
<option value="transfer">Transfer</option>
</select>


My HTML code for the Text-box that needs to appear with Complete picked from first drop-down menu

<input type="text" name="RemNUM" id="REMtextBox" placeholder="Remedy Number" maxlength="10" style="display:none;"/>


My HTML code for the drop-down that needs to appear with abandon picked from first drop-down menu

<select name="Reason" id="ReasonDD" style="display:none;" required>
<option value="">Reason:</option>
<option value="NoShow">No Show</option>
<option value="Unfixable">Unfixable</option>
<option value="other">Other</option>
</select>


Then lastly my JavaScript code I have that is doing some of these tasks. But when I select something else from the first drop-down menu after something has already been picked it will show both the new text-box or the new drop-down menu together. I need help getting both of them to show up by themselves and clear the old selected action.

function showHide()
{

var val = document.getElementById("ActionDD").value;

if(val == "complete")
document.getElementById("REMtextBox").style.display = 'inline-block';
else if(val == "abondon")
document.getElementById("ReasonDD").style.display = 'inline-block';
else if(val == "C")
document.getElementById("ThirdTextBoxId").style.display = 'inline-block';
else if(val == "D")
document.getElementById("FourthTextBoxId").style.display = 'inline-block';

}


Thanks in advance for any help!

Answer

You can give all your hidden elements class and in showHide function first hide all elements and then show the one you want.

so your js code will be

showHide = function()
{
    var showHideItems = document.getElementsByClassName('hidden-items');
    for(var i =0;i<showHideItems.length;i++){
        showHideItems[i].style.display = 'none';
    }
    var val = document.getElementById("ActionDD").value;

    if(val == "complete")
     document.getElementById("REMtextBox").style.display = 'inline-block';
    else if(val == "abandon")
     document.getElementById("ReasonDD").style.display = 'inline-block';
    else if(val == "C")
     document.getElementById("ThirdTextBoxId").style.display = 'inline-block';
    else if(val == "D")
     document.getElementById("FourthTextBoxId").style.display = 'inline-block';
}

and your html will be

<select name="Action" id="ActionDD" required onchange="showHide()">
    <option value="">Action:</option>
    <option value="complete">Complete</option>
    <option value="abandon">Abandon</option>
    <option value="transfer">Transfer</option>
</select>

<input class="hidden-items" type="text" name="RemNUM" id="REMtextBox" placeholder="Remedy Number" maxlength="10" style="display:none;"/>
<select class="hidden-items" name="Reason" id="ReasonDD" style="display:none;" required>
    <option value="">Reason:</option>
    <option value="NoShow">No Show</option>
    <option value="Unfixable">Unfixable</option>
    <option value="other">Other</option>
</select>

here is working jsfiddle for you code https://jsfiddle.net/jpj42ojz/

Comments