Tips for hiding or disabling a radiobuttonlist and textbox depending on the values of two other textboxes when the edit button is pressed

I have a formview with textboxes, a radio button list, and an edit button arranged in the following order:

<asp:textbox id="tb1" runat="server" text='<%# Bind("DATE_1", "{0:d}") %>' />
<asp:calendarextender id="tb1_CalendarExtender" runat="server" targetcontrolid="tb1" />

<asp:textbox id="tb2" runat="server" text='<%# Bind("DATE_2", "{0:d}") %>' />
<asp:calendarextender id="tb2_CalendarExtender" runat="server" targetcontrolid="tb2" />

<asp:button id="EditButton" runat="server" causesvalidation="False" commandname="Edit" text="Edit" enabled='<%# CanEdit(Eval("DATE_1"), Eval("DATE_2")) %>' OnClick="EditButton_Click" />

<asp:radiobuttonlist id="rbl1" runat="server" repeatdirection="Horizontal" text='<%# Bind("DIAG_LL_APPROVAL") %>'>
      <asp:ListItem>Approved</asp:ListItem>
      <asp:ListItem>Rejected</asp:ListItem>
      <asp:ListItem Selected="True">None</asp:ListItem>
</asp:radiobuttonlist>
<asp:textbox id="tb3" runat="server" text='<%# Bind("COMMENTS") %>' maxlength="1000"/>                                 

If tb1 or tb2 is empty (i.e., null) when the edit button is clicked, I need to hide or disable rbl1 and tb3.

protected void EditButton_Click(object sender, EventArgs e)
    {
        TextBox t1 = FormViewName.FindControl("tb1") as TextBox;
        TextBox t2 = FormViewName.FindControl("tb2") as TextBox;
        RadioButtonList rbl = FormViewName.FindControl("rbl1") as RadioButtonList;
        TextBox t3 = FormViewName.FindControl("tb3") as TextBox;

        if (!string.IsNullOrEmpty(t1.Text) && !string.IsNullOrEmpty(t2.Text))
        {
            FormViewName.FindControl("rbl1").Visible = true;
            FormViewName.FindControl("tb3").Visible = true;
        }
        else
        {
            FormViewName.FindControl("rbl1").Visible = false;
            FormViewName.FindControl("tb3").Visible = false;
        }
    }                                                                             

Error: Object reference not set to an instance of an object

Answer №1

Give this a try: When the Edit button is clicked:

if (string.IsNullOrEmpty(input1.Text) && string.IsNullOrEmpty(input2.Text))
        {
            optionsList.Visible = false;
            extraTextBox.Visible = false;
        }

UPDATE

TextBox input1 = (TextBox)FormView1.FindControl("input1");

TextBox input2 = (TextBox)FormView1.FindControl("input2");

TextBox extraTextBox= (TextBox)FormView1.FindControl("extraTextBox");

 RadioButtonList optionsList= (RadioButtonList)FormView1.FindControl("optionsList");


    if (string.IsNullOrEmpty(input1.Text) && string.IsNullOrEmpty(input2.Text))
            {
                optionsList.Visible = false;
                extraTextBox.Visible = false;
            }
          else

              {
                optionsList.Visible = true;
                extraTextBox.Visible = true;
}

Answer №2

Here's my approach to achieving this:

<input type="text" id="tb1" runat="server" value='<%# Bind("DATE_2", "{0:d}") %>' />
<input type="button" id="tb1_CalendarExtender" runat="server" onclick="showCalendar('tb1')" />

<input type="text" id="tb2" runat="server" value='<%# Bind("DATE_2", "{0:d}") %>' />
<input type="button" id="tb2_CalendarExtender" runat="server" onclick="showCalendar('tb2')" />

<button id="EditButton" runat="server" onclick="handleEdit()" disabled='<%# CanEdit(Eval("DATE_2"), Eval("DATE_2")) %>'>Edit</button>

<div class="hidden edit-controls">
    <input type="radio" id="rbl1" runat="server" checked="true" />
    <textarea id="tb3" runat="server" maxlength="1000"><%# Bind("COMMENTS") %></textarea>
</div>

Incorporate the following JavaScript code using jQuery for functionality:

<script>
    function handleEdit() {
        var control1 = '#<%= tb1.ClientID %>',
            control2 = '#<%= tb2.ClientID %>';

        if ($(control1).val().length > 0 || $(control2).val().length > 0)
            $(".edit-controls").show();
        else 
            $(".edit-controls").hide();

        return $(".edit-controls").is(":visible");
    }
</script>

This setup will prevent postback if controls are hidden, display them when necessary, and trigger a postback on button click if changes are made.

Simply assign a server event like Command or Click to the button for further functionality.

If you prefer a standard HTML button, use

<button id="EditButton">Edit</button>
without requiring .NET Framework assistance.

Answer №3

When the button is clicked, a check is performed to see if both tb1 and tb2 are not empty strings. If they are not empty, then the visibility property of rbl1 and tb3 is set to false.

Alternatively, you can utilize the OnTextChanged event for tb1 and tb2. When no text is entered, rbl1 and tb3 remain hidden. As soon as text is added, they will automatically become visible.

By the way, it is recommended to use better naming conventions for clarity.

<asp:textbox id="tb1" runat="server" text='<%# Bind("DATE_2", "{0:d}") %>' />
 <asp:calendarextender id="tb1_CalendarExtender" runat="server" targetcontrolid="tb1" />

 <asp:textbox id="tb2" runat="server" text='<%# Bind("DATE_2", "{0:d}") %>' />
 <asp:calendarextender id="tb2_CalendarExtender" runat="server" targetcontrolid="tb2" />

 <asp:button id="EditButton" runat="server" causesvalidation="False" 
        commandname="Edit" text="Edit" 
        enabled='<%# CanEdit(Eval("DATE_2"), Eval("DATE_2")) %>' 
        onclick="EditButton_Click" />

 <asp:radiobuttonlist id="rbl1" runat="server" Visible="false" repeatdirection="Horizontal" text='<%# Bind("DIAG_LL_APPROVAL") %>'>
      <asp:ListItem>Approved</asp:ListItem>
      <asp:ListItem>Rejected</asp:ListItem>
      <asp:ListItem Selected="True">None</asp:ListItem>
 </asp:radiobuttonlist>
 <asp:textbox id="tb3" runat="server" Visible="false" text='<%# Bind("COMMENTS") %>' maxlength="1000"/> 

and in the code behind:

protected void EditButton_Click(object sender, EventArgs e)
{
    if (!string.IsNullOrEmpty(tb1.Text) && !string.IsNullOrEmpty(tb2.Text))
    {
        rbl1.Visible = true;
        tb3.Visible = true;

        // perform necessary actions
    }
    else 
    {
        rbl1.Visible = false;
        tb3.Visible = false;
    }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Strategies for Updating Data Post-Refresh Token Renewal for JWT

I've been working hard to troubleshoot my refresh token's functionality, and I believe I'm getting close. Even though my token successfully refreshes and triggers a 200 call after the initial 401 error, the data on my page fails to update. ...

What method can I use to locate the double quote option within an HTML select element using jQuery?

Here is an example of the select: <select id="id0" name="name0"> <option value='30" size'> 30" size </option> </select> The select contains double quotes. I am trying ...

"Implementing ASP.NET MVC4 with Razor: Dynamically filtering a dropdown list based on the selected value from another dropdown

Currently, I am facing a challenge where I need to filter the options of a dropdown list based on the value selected from another dropdown. Within my database, there are tables containing all countries and all cities in the world, with a foreign key linkin ...

Tips for effectively passing query string parameters in Angular

I am looking to make an HTTP request with parameters through a query For instance: URL: https://api/endpoint?d=1&value=2 ...

Issue with reactivity not functioning as expected within VueJS loop without clear explanation

Struggling with implementing reactivity in vue.js within a loop? The loop renders fine, but firing an event updates the content without visibly rendering the data on the page. The latest version of vue.js is being used with bootstrap and jquery. Despite a ...

What is the best way to display every comment and response using console.log()?

Currently, I am developing a commenting system where users can leave comments and reply to existing comments. In the MySQL database image Both images depict the same scenario. In my highlighted text in yellow, it should read comments[0] instead of comment ...

What is the best way to temporarily bold a cell item within a table row for a specified duration of time?

I am experiencing an issue with a section of my code where I am fetching values from the server and updating a table if a certain value is not present. Once the update is made, I want to visually notify the user by temporarily making the cell's value ...

Analyzing critical code paths for optimal performance

There is a function that accepts two arguments and an optional third argument. The function should return true if the first argument is greater than the second, false if not, unless the third argument is true, in which case it should return true if the fir ...

Leveraging AJAX in Sitecore rendering using XSLT

As a newcomer to Sitecore and .NET, I have inherited an older project built on Sitecore 6.5 that uses XSLT for content rendering with .NET Framework 3.5. My current task involves creating a page that can make AJAX calls to dynamically generate new content ...

Strange black backdrop in dialog component

Today I came across a rather peculiar issue and was wondering if anyone else had experienced it and found a solution. The problem is pretty straightforward - when I load up my Vue component with a dialog element from the Element-UI library, the background ...

Using Vue.js: Executing a method in one component from another

Currently working with Vue.Js version 2 and looking to achieve a functionality where I can call the method c1method from component1 within the method c2method in component2 in order to reload data post submission. Vue.component('component1', { ...

Merging two arrays concurrently in Angular 7

When attempting to merge two arrays side by side, I followed the procedure below but encountered the following error: Cannot set Property "account" of undefined. This is the code in question: acs = [ { "account": "Cash In Hand", ...

Choose the url path using UI-Router option

In my Angular project, I am implementing a complex structure of nested states using UI-Router. I am working on setting up a parent state that will determine the language of the application based on an optional locale path in the URL. For Spanish www.web ...

Intermittent shimmer of translucent hues appearing as solid

I have a collection of curved see-through lines stacked inside a rotating container. The opacity settings on the lines are inconsistent, working at times but not always. It's puzzling, as I can't determine what causes it to function in certain s ...

Executing a jQuery method repeatedly

Hey there! I've come across this jQuery function and it's got me stumped: $(function(){ $( ".unfocused" ).click(function ClickHeader () { $( this ).addClass( "focused" ); $( this ).removeClass( "unfocused" ); $(".header").not(this). ...

Having trouble getting the desired output from the Jquery ready function

HTML Snippet <section> <textarea class= "text" placeholder="type something"> </textarea> </br> </br> <button id= "append"> Append </button> <button id= "prepand"> Prepand </button> <bu ...

Sending dynamically created textboxes from JavaScript to PHP

I am working on a feature for my page where users can create resizable and draggable textboxes dynamically using jQuery. On the click of a button, these textboxes will appear on the page. Now, I need to figure out how to pass the data entered into these t ...

VueJS .filter unexpectedly alters array data

My goal is to filter an array based on the contents of another array, and here is the code I have written for it. private get filteredArray() { const filteredArray = this.unfilteredArray; console.log(this.unfilteredArray); filteredArray = this.unfil ...

Slow CSS :hover animations in the most recent release of Chrome

I recently upgraded my browser from chromium version 67 to the latest Chrome version 79. However, I noticed that after the upgrade, the CSS transitions on my website have become very laggy and unresponsive. Surprisingly, everything works perfectly fine on ...

Upon refreshing, the user of the React JS application is redirected to a different page

My React JS app utilizes react-router-dom v6 to manage the routes. Everything was working fine until I integrated Firebase Firestore. Now, when I reload the seeker page, it redirects me to the home page instead of staying on the seeker page. This issue is ...