Clicky

I have a textbox tied to a radio button list with 4 options. If somebody chooses the last option, the textbox is enabled and focus goes to it automatically. They are required to fill out this textbox if they choose the last option  and if they don't the selection in the list returns to the previously selected radio button. Everything is working up to this point.

There is a problem when they click on one of the other radio buttons instead of somewhere else on the page. So before firing the event that reverts the radio button and disables the textbox, I want to check and see if they clicked one of the other radio buttons. If so, I will let the server-side selected index changed event handle this. Currently, I am using the OnBlur event on the textbox to fire a javascript function that fires server side code. Probably not the best way to do it but it works! All I really need to know is find out how to determine the clicked element when the onblur event fires.

asked 12/01/2011 12:42

WCCrobert's gravatar image

WCCrobert ♦♦


4 Answers:
I'm assuming that with the OnBlur event, you're calling a js or vbs function?

In the function call, pass the id of the element you need to check.

1:
2:
3:
4:
<input type="radio" name="theradio" value="1"> 1<br>
<input type="radio" name="theradio" value="2"> 2<br>
<input type="radio" name="theradio" value="3"> 2<br>
<input type="text" name="whatever" value="" OnBlur="javascript:somefunction('theradio');">


link

answered

MuffyBunny's gravatar image

MuffyBunny

In my case, I am using an ASP Radio Button List, so I'm wondering how I would pass over the newly selected value?

As for what is being fired, I am calling a JS function that fires the click event of a hidden button to run the VB code that I need it to. This is the only way I know of firing server-side code through javascript. SO if I could pass the clicked element to the javascript, I could wrap that in a if statement and only call the server side code if it was not one of those radio buttons.

Here is my code.
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
<script type="text/javascript">
    function txtLostFocus(){
        document.getElementById("<%=ibtnOtherCommentsLostFocus.ClientID %>").click();}
</script>

<asp:UpdatePanel ID="UpdatePanel2" runat="server">
  <ContentTemplate>
  <asp:RadioButtonList ID="rdoEL" runat="server" AutoPostBack="true" RepeatDirection="Vertical"
      Font-Size="10px" style="line-height: 15px; margin: 0px 8px 0px 2px; display: block; padding-top: 8px; float: left;">
      <asp:ListItem Text="Radio1" Value="Radio1"></asp:ListItem>
      <asp:ListItem Text="Radio2" Value="Radio2"></asp:ListItem>
      <asp:ListItem Text="Radio3" Value="Radio3"></asp:ListItem>
      <asp:ListItem Text="Radio4" Value="Radio4"></asp:ListItem>
  </asp:RadioButtonList>
  <div style="float:right; margin-top: 5px;">
      <asp:Label ID="lblRadio4Comments" runat="server" style="font-size: 90%;">Comments:</asp:Label><br />
      <cc1:TextBoxWatermarkExtender id="txtRadio4CommentsWM" runat="server" targetcontrolid="txtRadio4Comments" watermarktext="Please enter comments" watermarkcssclass="watermark"></cc1:TextBoxWatermarkExtender>
      <asp:TextBox ID="txtRadio4Comments" runat="server" TextMode="MultiLine" MaxLength="250" Columns="25" Rows="7" Font-Size="11px" AutoPostBack="true" OnBlur="txtLostFocus();"></asp:TextBox>
<asp:ImageButton ID="ibtnRadio4CommentsLostFocus" runat="server" ImageUrl="~/images/blank.gif" Width="0" Height="0" AlternateText="" CausesValidation="false"  />
  </div>
  </ContentTemplate>
</asp:UpdatePanel>
link

answered 2011-12-01 at 09:04:20

WCCrobert's gravatar image

WCCrobert

I could never figure out a way to pass the selected radio button when calling the function but I found that I can checked the clicked elements in the javascript that is called and only hit the server side function if it is not one of those.
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
<script type="text/javascript">
    function txtLostFocus(){
        var target = document.activeElement;
        if (target.id != "ctl00_ContentPlaceHolder1_rdoExpectedLoss_0" && 
            target.id != "ctl00_ContentPlaceHolder1_rdoExpectedLoss_1" && 
            target.id != "ctl00_ContentPlaceHolder1_rdoExpectedLoss_2" && 
            target.id != "ctl00_ContentPlaceHolder1_rdoExpectedLoss_3")
        {
            document.getElementById("<%= ibtnCommentsLostFocus.ClientID %>").click();
        }
    }
</script>
link

answered 2011-12-01 at 11:53:47

WCCrobert's gravatar image

WCCrobert

Found the solution on my own.

link

answered 2011-12-13 at 09:09:20

WCCrobert's gravatar image

WCCrobert

Your answer
[hide preview]

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here

By RSS:

Answers

Answers and Comments

Tags:

×102
×125
×63
×1

Asked: 12/01/2011 12:42

Seen: 364 times

Last updated: 12/17/2011 05:19