Show Hide all TextBoxes in table row using jQuery in ASP.Net

Last Reply one month ago By dharmendr

Posted 2 months ago

Hi again great helpers,

Can you please help with toggling button for show/hide?

I actually got the jQuery code here and it works for just one <td>...</td>

What I am trying to do now requires several <tds> and I am struggling to get the textboxes to work.

Please see link of what I am asked to do:

https://www.kenig-dev.tech/wp-content/uploads/2021/06/Consultant-Support-Details.png

As you can see from the link, there is a button called Amend.

If user clicks the Amend button, new blank textboxes are displayed underneath the top boxes.

Then a user can enter data into the blank boxes.

My issue is how to modify the JS to recognize the new blank textboxes.

I have been bugged down now for two days.

//HTML
<script type="text/javascript">
    $(function () {
        $("#btnta").click(function () {
            if ($(this).val() == "Amend") {
                $("#dvta").show();
                $(this).val("Cancel");
             } else {
                 $("#dvta").hide();
                 $(this).val("Amend");
             }
         });

         $("#btconsultsup").click(function () {
             if ($(this).val() == "Amend") {
                 $("#dvconsultsup").show();
                 $(this).val("Cancel");
             } else {
                 $("#dvconsultsup").hide();
                 $(this).val("Amend");
             }
        });
    });
</script>

//This works perfectly
<label>Proposed activities for next year: </label>
<input id="btnta" type="button" value="Amend" name="btnta" /><br>
<textarea id="taskActivities" class="longText" name="taskActivities" maxlength="4999"></textarea>
<br>
<div id="dvta" style="display: none">
    <label>Amended activities for next year: </label> <br>
    <textarea id="amended_taskActivities" class="longText" name="amended_taskActivities" maxlength="4999"></textarea>
</div>

          <table id="consultantTable">
            <tr class="headerRow">
              <th class="numberColumn"></th>
              <th class="inputColumn">Subtask, if applicable</th>
              <th class="inputColumn">Consultant name, if applicable <br><span class="conNotes fieldNotes">If unknown, state 'TBD'</span></th>
              <th class="inputColumn">Contract number, if applicable <br><span class="conNotes fieldNotes">If unknown, state 'TBD'</span></th>
              <th class="costColumn">Total contract cost:</th>
              <th class="costColumn">Pre-FFY 2020 cost:</th>
              <th class="costColumn">FFY 2020 cost:</th>
              <th class="costColumn">Post-FFY 2020 cost:</th>
              <th class="timelineColumn"></th>
            </tr>
            <tr id="optionsRow0" class="optionsRow collapse order1">
              <td></td>
              <td></td>
              <td class="optionsHeader">Timeline for subtask</td>
              <td><div>Scope development and FHWA review/approval:<br>
                  <span class="timelineNotes fieldNotes">(Month, Year) e.g. June, 2020</span> <br>
                </div>
                <input class="shortText" id="scopeDev0" name="scopeDev0" ></td>
              <td class="costColumns"><div> Consultant procurement and selection:<br>
                  <span class="timelineNotes fieldNotes">(Month, Year) e.g. June, 2020</span> <br>
                </div>
                <input class="shortText" id="conProcu0" name="conProcu0" ></td>
              <td class="costColumns"><div>Contract negotiations and FHWA review/approval:<br>
                  <span class="timelineNotes fieldNotes">(Month, Year) e.g. June, 2020</span> <br>
                </div>
                <input  class="shortText" id="contractNegotiations0" name="contractNegotiations0" ></td>
              <td class="costColumns"><div>Consultant notice to proceed:<br>
                  <span class="timelineNotes fieldNotes">(Month, Year) e.g. June, 2020</span> <br>
                </div>
                <input class="shortText" id="conNotice0" name="conNotice0"></td>
              <td class="costColumns"><div> Total duration of task:<br>
                  <span class="timelineNotes fieldNotes">(Length of time) e.g. six months</span><br>
                </div>
                <input class="shortText" id="totalDuration0" name="totalDuration0"></td>
              <td></td>
            </tr>            
            <tr class="consultantRow">
              <td>1)</td>
              <td class="consultantInputCell"><select class="shortText" id="conSubTask0" name="conSubTask0" onchange="">
                  <option disabled selected hidden>Select</option>
                </select></td>
              <td class="consultantInputCell"><input class="shortText" id="conName0" name="conName0" maxlength="1999"/></td>
              <td class="consultantInputCell"><input class="shortText"  id="conSupportNum0" name="conSupportNum0" maxlength="1999"/></td>
              <td class="consultantCostCell"><span class="input-group-addon2">$</span>
                <input class="shortCosts conSupportContractCosts" id="conSupportContractCosts0" type="text" placeholder="0"  name="conSupportContractCosts0" step='0.01' value="0"/></td>
              <td class="consultantCostCell"><span class="input-group-addon2">$</span>
                <input class="shortCosts conSupportPriorExp" id="conSupportPriorExp0" type="text" placeholder="0"  name="conSupportPriorExp0" step='0.01'value="0"/></td>
              <td class="consultantCostCell"><span class="input-group-addon2">$</span>
                <input class="shortCosts conSupportNexFiscal" id="conSupportNexFiscal0" type="text" placeholder="0"  name="conSupportNexFiscal0" step='0.01' value="0"/></td>
              <td class="consultantCostCell"><span class="input-group-addon2">$</span>
                <input class="shortCosts conSupportBeyondFiscal" id="conSupportBeyondFiscal0" type="text" placeholder="0"  name="conSupportBeyondFiscal0" step='0.01' value="0"/></td>
              <td class="consultantCostCell"><input type="button" id="addTimeline0" value="Toggle Timeline" tabindex="-1"></td>
              <td><input class="remove" type="image" id="conSupportDel0" src="images/delete_hover.png" onclick="return false;" tabindex="-1"></td>
            </tr>
            <tr id="optionsRow1" class="optionsRow collapse order1">
              <td></td>
              <td></td>
              <td class="optionsHeader">Timeline for subtask</td>
              <td><div>Scope development and FHWA review/approval:<br>
                  <span class="timelineNotes fieldNotes">(Month, Year) e.g. June, 2020</span> <br>
                </div>
                <input class="shortText" id="scopeDev1" name="scopeDev1" ></td>
              <td class="costColumns"><div> Consultant procurement and selection:<br>
                  <span class="timelineNotes fieldNotes">(Month, Year) e.g. June, 2020</span> <br>
                </div>
                <input class="shortText" id="conProcu1" name="conProcu1" ></td>
              <td class="costColumns"><div>Contract negotiations and FHWA review/approval:<br>
                  <span class="timelineNotes fieldNotes">(Month, Year) e.g. June, 2020</span> <br>
                </div>
                <input  class="shortText" id="contractNegotiations1" name="contractNegotiations1" ></td>
              <td class="costColumns"><div>Consultant notice to proceed:<br>
                  <span class="timelineNotes fieldNotes">(Month, Year) e.g. June, 2020</span> <br>
                </div>
                <input class="shortText" id="conNotice1" name="conNotice1"></td>
              <td class="costColumns"><div> Total duration of task:<br>
                  <span class="timelineNotes fieldNotes">(Length of time) e.g. six months</span><br>
                </div>
                <input class="shortText" id="totalDuration1" name="totalDuration1"></td>
              <td></td>
            </tr>            
          </table>

 

Posted 2 months ago

Hi simflex,

Try below code. Youneed to loop through all the textboxes and show or hide it.

$("#btnta").click(function () {
    if ($(this).val() == "Amend") {
        $(this).val("Cancel");
        $.each($(this).closest('tr').find('input'), function () {
            $(this).show();
        });
    } else {
        $(this).val("Amend");
        $.each($(this).closest('tr').find('input'), function () {
            $(this).hide();
        });
    }
});

 


Posted one month ago

You can keep amended code in the page.

But i recomend you to move the code to the JS.

So that when any changes required in future it will be checked here itself without moving to the page.