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

Last Reply 12 days ago By dharmendr

Posted 18 days 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 18 days 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 12 days 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.