CODEWITHSUNDEEP
jsp
user2470075
user2470075

Reputation: 169

<JSP> How to display different input text boxes with select box options

I have a code as following

<tr>
  <td colspan="3">
    <select name="selectOp" id="selectOp" style="height:19px;">
        <option value="clipNo">CLIP NO</option>
        <option value="tapeNo">TAPE NO</option>
        <option value="cdNa">CONTENT NAME</option>
    </select>
        <c:if test="${selectOp == 'clipNo'}" >
            <span class="br"><input type="text" id="searchWord" name="searchWord" style="width:500px;height:19px;" /></span>
        </c:if>
        <c:if test="${selectOp == 'tapeNo'}" >
            <span class="br"><input type="text" id="searchWord2" name="searchWord2" style="width:500px;height:19px;" /></span>
        </c:if>
        <c:if test="${selectOp == 'tapeNo'}" >
            <span class="br"><input type="text" id="searchWord3" name="searchWord3" style="width:500px;height:19px;" /></span>
        </c:if>
  </td>
</tr>

If I select clipNo, then searchbar should be id="searchWord" name="searchWord"

If I select tapeNo, then searchbar should be id="searchWord2" name="searchWord2"

If I select videoNo, then searchbar should be id="searchWord3" name="searchWord3"

But for some reason, the search bar don't show up. Can anyone help?

Upvotes: 0

Views: 2170

Answers (1)

Aniket Kulkarni
Aniket Kulkarni

Reputation: 12983

Use JavaScript/jQuery function to generate dynamic textfield

JSP

<select name="selectOp" id="selectOp" style="height:19px;" onchange="dynamicTextField()">
    <option value="clipNo">CLIP NO</option>
    <option value="tapeNo">TAPE NO</option>
    <option value="cdNa">CONTENT NAME</option>
</select>
// div to add text fields dyanamically using jQuery
<div id="dyanamicDivElement"></div>

JavaScript/jQuery

function dynamicTextField()
{
    var selectVal = $('#selectOp').val();
    if(selectVal == "clipNo")
    {
        var newTextField = "<span class='br'><input type='text' id='searchWord' name='searchWord' style='width:500px;height:19px;' /></span>";
        $('#dyanamicDivElement').append(newTextField);
    }
    else if(selectVal == "tapeNo")
    {
        var newTextField = "<span class='br'><input type='text' id='searchWord2' name='searchWord2' style='width:500px;height:19px;' /></span>";
        $('#dyanamicDivElement').append(newTextField);
    }
    else if(selectVal == "videoNo")
    {
        var newTextField = "<span class='br'><input type='text' id='searchWord3' name='searchWord3' style='width:500px;height:19px;' /></span>";
        $('#dyanamicDivElement').append(newTextField);
    }
}

Related link

Now answer to your question

But for some reason, the search bar don't show up.

This is because there is no variable like ${selectOp} in page, request, session, application scope. It is HTML element.

The web container evaluates a variable that appears in an expression by looking up its value according to the behavior of PageContext.findAttribute(String).
For example, when evaluating the expression ${selectOp}, the container will look for selectOp in the page, request, session, and application scopes and will return its value. If selectOp is not found, null is returned.

Related link

Upvotes: 1

Related Questions