I know it has been asked several times and I found many solutions but no solution worked for me.
I am working on IE
<asp:RadioButtonList ID="rbtnView" runat="server" OnSelectedIndexChanged="rbtnView_SelectedIndexChanged"
AutoPostBack="True" TabIndex="7" RepeatDirection="Horizontal">
<asp:ListItem Selected="True" Value="0">Show Pending</asp:ListItem>
<asp:ListItem Value="1">Show Processed</asp:ListItem>
</asp:RadioButtonList>
here is the button code from where I am calling the function:
<asp:Button ID="btnPrint" runat="server" CssClass="myButton" OnClick="btnPrint_Click"
Text="Print" ValidationGroup="validationgroup2" TabIndex="9" OnClientClick="doPrint()" />
here is the javascrit function
function doPrint() {
debugger;
var rad = $('#<%=rbtnView.ClientID %> input[type=radio]:checked').val();
}
Any help would be appreciated.
var radioValue = $("input[name='YOURVALUEFORTHEGROUP']:checked").val();
replace YOURVALUEFORTHEGROUP
The javascript function works just fine. But you are doing a form post (PostBack) when pressing the btnPrint button.
You can use a regular button instead of an asp.net Control. Or if you need a PostBack to execute the btnPrint_Click method. But then you can get the value there. It all depends why you need the value client side.
<input type="button" value="Get value" onclick="doPrint()" />
Or add return false to the aspnet button.
OnClientClick="doPrint(); return false;"
Related
I want to call javascript function on Dropdown menu selectedindexchanged. I tried this
<asp:DropDownList ID="selectVehicle" AutoPostBack="true" OnSelectedIndexChanged="GetRoute(this.options[this.selectedIndex].value);" runat="server" CssClass="inners">
<asp:listitem Selected>-- Select Vehicle --</asp:listitem>
<asp:listitem Value="16">Tata Ace</asp:listitem>
<asp:listitem Value="28">Tata 407</asp:listitem>
</asp:DropDownList>
Error
BC30456: 'GetRoute' is not a member of 'ASP.index3_aspx'.
Then I tried onChange instead of OnSelectedIndexChanged but it has no use for me since in my js function values inserted in textbox which is working but when page reloads textbox again gets blank & I can't turn off AutoPostBack since it is required to postback. Is is possible I can run javascript OnSelectedIndexChanged ?
You can use the standard javascript onchange:
<asp:DropDownList ID="selectVehicle" AutoPostBack="false" onchange="GetRoute(this.options[this.selectedIndex].value);" runat="server" CssClass="inners">
</asp:DropDownList>
Assuming GetRoute is a javascript function.
ASP.NET will ignore the onchange attribute and render it in the resulting select element.
Rahul Singh's comment to write the JS code into the server code, and only run the server code, no Javascript, makes sense.
In the event you have to have the JS for some reason, you can remove the autopostback = true, and manually call __doPostBack with parameters, the value your JS is producing for example.
JavaScript: Multiple parameters in __doPostBack
I am needing to call a javascript function when my asp:ListBox has a selection change rather then running some server side code. What I have at the moment is.
<asp:ListBox ID="lbCustomerFolders" runat="server" Width="100%" Height="98%" AutoPostBack="true" OnSelectedIndexChanged="lbCustromerFolders_SelectedIndexChanged"/>
Where the OnSelectedIndexChanged I require that function or something similar to call a javascript function.
Add on change event in your control lie I have added in following example. Notice that there are onchange as well as OnSelectedIndexChanged event there on the ListBox so on the selection change event both JavaScript and server side event is going to get called.
In your case change would be data which you are providing.
<asp:ListBox ID="lbCustomerFolders" runat="server" Width="9%" Height="98%" onchange="YourChangeEventJS(this)" AutoPostBack="true" OnSelectedIndexChanged="lbCustomerFolders_SelectedIndexChanged">
<asp:ListItem Text="Red" Value="#FF0000" Selected="True" />
<asp:ListItem Text="Blue" Value="#0000FF" />
<asp:ListItem Text="Green" Value="#008000" />
</asp:ListBox>
Following is script should be there on your page
<script type="text/javascript">
function YourChangeEventJS(ddl) {
alert(ddl.selectedIndex);
}
I'm developping a form page in a WebForms application.
I have a RadioButtonList and a Panel, and I wanted the panel to open when a especific value of the RadioButtonList was selected, how do I do this?
I've tried with AutoPostBack but I didn't like how it worked (running the page again), are there any other solutions?
Some of the places I searched for an answer recommended using the AutoPostBack property, but I personally didn't like it and so I had to find another way for it to work and so I decided to use JavaScript/JQuery...
This is an HTML sample code of an example of a RadioButtonList and a panel that opens when a chosen option on it is clicked (the value "Required" causes it to open and "Not Required" to close in this case):
<div>
<p class="space">3.2. ACCOMMODATION (*)</p>
<asp:RadioButtonList ID="accomodation" runat="server" RepeatDirection="Horizontal" RepeatLayout="Flow" Width="500px">
<asp:ListItem Text="Not Required" Value="Not Required"></asp:ListItem>
<asp:ListItem Text="Required" Value="Required"></asp:ListItem>
</asp:RadioButtonList>
<asp:Panel ID="PanelAccommodation" runat="server">
<p>
Number of nights (*):
<asp:RequiredFieldValidator ID="RequiredFieldValidator12" runat="server" ControlToValidate="numberOfNights" ForeColor="red" ErrorMessage="<- Required"></asp:RequiredFieldValidator>
</p>
<asp:TextBox ID="numberOfNights" runat="server" Width="50px"></asp:TextBox>
<ajaxToolkit:FilteredTextBoxExtender ID="FilteredTextBoxExtender1" TargetControlID="numberOfNights"
FilterType="Numbers" runat="server">
</ajaxToolkit:FilteredTextBoxExtender>
<p>Preferred Hotel:</p>
<asp:TextBox ID="preferredHotel" runat="server" Width="450px"></asp:TextBox>
<p>Preferred Hotel URL:</p>
<asp:TextBox ID="preferredHotelURL" runat="server" Width="450px"></asp:TextBox>
</asp:Panel>
</div>
The Script I used:
$(document).ready(function () {
$("#MainContent_PanelAccommodation").hide("fast");
$('#<%= accomodation.ClientID%>').find('input:radio').click(function () {
var selVal = $('#<%= accomodation.ClientID %>').find('input:checked').val();
if (selVal == "Required") {
$("#MainContent_PanelAccommodation").show("fast");
}
if (selVal == "Not Required") {
$("#MainContent_PanelAccommodation").hide("fast");
}
})
});
In this Script I use the first
$("#MainContent_PanelAccommodation").hide("fast");
to make sure that when the page runs the panel is hidden and will only open when/if "Required" is selected...
Another thing you may struggle with is what ID to put in the function since as you can see the panel ID is "PanelAccommodation", but the ID I use in the function is "MainContent_PanelAccommodation" since that's how it's recognized on your browser (to check this just select the panel's position and inspect element) you'll notice that the ID becomes "MainContent_PanelAccommodation" because it inherits from your asp:Content ContentHolderID...
Hope this helps ;) any questions just ask...
I have a dropdown list whose value is changed based on other controls in the UI using javascript.
I used the following code to change the dropdown list,
document.getElementById("ddlchkStsID").options[2].selected = true;
document.getElementById("ddlchkStsID").value = "3";
But in the code-behind, the ddlchkStsID.SelectedValue is still coming as first option's value.
This the control in aspx page.
<asp:DropDownList ID="ddlchkStsID" runat="server" TabIndex="10" CssClass="meta">
<asp:ListItem Text="TBD" Value="1" />
<asp:ListItem Text="Yes" Value="2" />
<asp:ListItem Text="No" Value="3" />
</asp:DropDownList>
Could someone help me how to get the changed value in the code-behind.
thanks in advance :)
Since the control is running at the server, you should be referencing the control using the ClientID, like this:
document.getElementById("<%=ddlchkStsID.ClientID%>").options[2].selected = true;
Is your JavaScript code actually working?
For some reason none of my setfocus() events were working on the server side of my web app, so I created a Javascript function setfocus that is set to trigger on the onload event of the body tag.
<body onload="SetFocus()">
The user will click a radio button which enables the drop down. they select from the drop down which enables the textbox. When they scan a barcode into the textbox it will automatically tab out of the field, therefore triggering the onchange event to call some server side code which, if a successful SQL insert is completed, will insert a new row to the gridview, and it should set focus automatically back to the textbox via Javascript. Once that gridview object has more than a header and a row of data, I disable the drop down and radio button list, so if you look at the Javascript below, I can't use those as criteria in my if statement anymore.
Javascript:
var MatAllRB = document.getElementById("HF_RB_MatAll").value;
var MatAllCL = document.getElementById("DD_SelectCL_All").value;
var MatAll = document.getElementById("Txt_MatBC_All");
var MatAllPrompt = document.getElementById("HF_AllPrompt").value;
var count = $("#GV_Scan_All tr").children().length;
This works perfectly:
else if (ActiveTab == "cont-3" && MatAllRB != "" && MatAllCL != "")
{ alert("went into setfocus");
document.getElementById("Txt_MatBC_All").focus();
alert("made it through setfocus");
}
This only works if you actually click off the field, the tab doesn't work. It just does nothing.
else if (ActiveTab == "cont-3" && count == 9)
{ alert("went into setfocus");
document.getElementById("Txt_MatBC_All").focus();
alert("made it through setfocus");
}
This does the same thing as the above:
else if (ActiveTab == "cont-3" && (MatAllPrompt == "RP" || MatAllPrompt == "P03"))
{ alert("went into setfocus");
document.getElementById("Txt_MatBC_All").focus();
alert("made it through setfocus");
}
The weird thing is that all of these alerts that I have in here show up correctly, it just never sets focus. I am pretty new at this stuff still, so maybe I'm missing something, but I can't figure out why the focus() will work for click off rather than tabbing off. Any help would be appreciated.
Here's the HTML:
<asp:RadioButtonList runat="server" ID="RB_Mat_All" AutoPostBack="true" RepeatColumns="4" OnSelectedIndexChanged="RB_Mat_All_OnSelectedIndexChange">
<asp:ListItem Text="NC" value="NC"></asp:ListItem>
<asp:ListItem Text="DA" value="DA"></asp:ListItem>
<asp:ListItem Text="GW" value="GW"></asp:ListItem>
<asp:ListItem Text="PC" value="PC"></asp:ListItem>
</asp:RadioButtonList>
<asp:HiddenField runat="server" ID="HF_RB_MatAll"></asp:HiddenField >
<br />
<asp:DropDownList runat="server" ID="DD_SelectCL_All" AutoPostBack="true" OnSelectedIndexChanged="DD_SelectCL_All_OnSelectedIndexChange">
<asp:ListItem Value="" Text="Select..."></asp:ListItem>
<asp:ListItem value="53" text="05"></asp:ListItem>
<asp:ListItem value="54" text="06"></asp:ListItem>
<asp:ListItem value="55" text="07"></asp:ListItem>
<asp:ListItem value="57" text="08"></asp:ListItem>
<asp:ListItem value="58" text="09"></asp:ListItem>
</asp:DropDownList>
<asp:label runat="server" ID="Lbl_All_Prompt" CssClass="Form" Text=""></asp:label>
<asp:HiddenField runat="server" ID="HF_AllPrompt"></asp:HiddenField >
<asp:TextBox runat="server" ID="Txt_MatBC_All" Cssclass="Form" Text="" AutoPostBack="true" OnTextChanged="Txt_MatBC_All_TextChanged"></asp:TextBox>
<asp:GridView runat="server" ID="GV_Scan_All" CssClass="Form_Feedback"></asp:GridView>
When I view the source the textbox looks like this:
<input name="Txt_MatBC_All" type="text" onchange="javascript:setTimeout('__doPostBack(\'Txt_MatBC_All\',\'\')', 0)" onkeypress="if (WebForm_TextBoxKeyHandler(event) == false) return false;" id="Txt_MatBC_All" class="Form" />
It's odd that you can click off the field and it works, but tabbing off doesn't. Try adding tabIndexes to the inputs on your page.
The ids of your text box, change when the asp.net render the page. So try this to get the id dynamically and see if its works.
document.getElementById("<%=Txt_MatBC_All.ClientID%>").focus();
The same way you must use the ClientID on every getElementById you use.
by the way, on every line you focus the same text control (Txt_MatBC_All). If this is the case, why you make all that if, just use one line.
tip 1: you can see if your getElementById found the control by make teamporary an alert call like alert(document.getElementById("<%=Txt_MatBC_All.ClientID%>"));
tip 2: Right click on your browser and see the source code of your page to see what ids your control have take, to see if you actually is correct and the same with the javascript you use.
Try converting your JavaScript to square bracket notation. For example: document.forms[0].Txt_MatBC_All.focus();