CODEWITHSUNDEEP
jqueryhtmlcssbuttoninput
user3123934
user3123934

Reputation: 1563

Button hide not working as expected in JQuery

Right now its hide and unhide all the rows in a table. I want only the file selected should be shown. Someone could shed some lights on what's missing here? I tried multiple ways still it's breaking my head.

<script type="text/javascript">

    $(document).ready(function () {
        $('input[id^="rvw-"]').change(
                function(){
                    if ($(this).val()) {
                        alert("(this).val():"+$(this).val());
                        alert("input id:"+ $('input[id^="rvw-"]').val());
                        $('input[id^="rvw-"]').attr('hidden',false); 
                    } 
                }
          );
    });

</script>

<table id="reviewList" class="table table-striped table-condensed dt-responsive basic-table" cellspacing="0">
    <thead>
        <tr>
            <th class="text-center">Series</th>
            <th class="text-center">Series Order</th>
            <th class="text-center">Document Name</th>
            <th class="text-center">Actions</th>
        </tr>
    </thead>
    <tbody>
        <c:forEach items="${reviewDocList}" var="row">
            <tr>
                <td>${row.series}</td>
                <td>${row.seriesOrder}</td>
                <td>${row.documentName}</td>
                <td>
                    <form class="letter" docId="${row.id}" action='<c:url value="/letter-download.htm?docId=${row.id}"/>' method="POST" enctype="multipart/form-data">
                        <input type="hidden" name="docId" value="${row.id}"/>
                        <label class="hidden" for="rvw-${row.id}">Choose file for ${row.documentName}</label>
                        <input type="file" name="doc" id="rvw-${row.id}" title="Choose File for ${row.documentName}"/>
                        <input type="submit"  id="rvw-${row.id}" value="Upload ${row.documentName}" hidden="true"/>
                    </form>
                </td>
            </tr>
        </c:forEach>
    </tbody>
</table>

Upvotes: 1

Views: 63

Answers (2)

DevDisrupt
DevDisrupt

Reputation: 154

Have you considered using document.querySelector instead? You won't need JQuery anymore with element.classList.toggle('classname')

Just a thought. You can also use Babel to then convert it to ES5 if you need to.

Upvotes: 0

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

The problem comes from the selector in the following line :

$('input[id^="rvw-"]').attr('hidden',false);

The current selector input[id^="rvw-"] will target all the inputs that have an id start with rvw-.

You need to use $(this) to refer to the changed file input like :

$(this).attr('hidden', false);

Upvotes: 1

Related Questions