CODEWITHSUNDEEP
javascriptjspjstl
Romi
Romi

Reputation: 4921

How to hide an element in jsp file using javascript

<li><label>Email:</label> <input type='text' name='username'
                            id="forgot_username" /></li>
                        <li><label>&nbsp;</label> <input type="submit"
                            id="forgot_btn" value="Send Reminder" class="btn"></li>

I have above text box and button in my jsp. and the below condition, what i want is when this condition occur , above text box and button should hide how can i do it.

<c:if test="${param.message == 3}">
                        <span class="error"><font color="red"> Email does not match</font></span>
                    </c:if>

Upvotes: 0

Views: 9756

Answers (2)

Xavi L&#243;pez
Xavi L&#243;pez

Reputation: 27880

Why can't you put those <li> elements inside an identical construct?

If you can't put those elements together and don't want to repeat the condition, you can always define a new variable: 

<c:set var="condition" value="0">
<c:if test="${param.message == 3}">
    <c:set var="condition" value="1">
</c:if>

<c:if test="${condition == 1}">
                        <span class="error"><font color="red"> Email does not match</font></span>
                    </c:if>

....

<c:if test="${condition == 1}">
<li><label>Email:</label> <input type='text' name='username'
                            id="forgot_username" /></li>
                        <li><label>&nbsp;</label> <input type="submit"
                            id="forgot_btn" value="Send Reminder" class="btn"></li>
</c:if>

This way those <li> will be hidden even if the client has JS disabled, or any kind of JS problem.

Upvotes: 0

Jaanus
Jaanus

Reputation: 16541

You should put div tags around the first code like this:

<div id="hide"> 
    <ol>
        <li>
            <label>Email:</label>
            <input type='text' name='username' id="forgot_username" />
        </li>
        <li>
            <label>&nbsp;</label>
            <input type="submit" id="forgot_btn" value="Send Reminder" class="btn">
        </li>
    </ol>
</div>

And then you can hide like this:

<c:if test="${param.message == 3}">

    <script>
        $('#hide').hide();
    </script>

    <span class="error"><font color="red"> Email does not match</font></span>
</c:if>

Upvotes: 1

Related Questions