How can I get selected text from drop-down list? Before crucifying me for asking a duplicate, I have read:
Get selected text from a drop-down list (select box) using jQuery and
Get selected text from a drop-down list (select box) using jQuery and tried the following code variations from these pages:
<asp:DropDownList ID="DDLSuburb" runat="server">
</asp:DropDownList>
alert($get("[id*='DDLsuburb'] :selected"));
alert($("[id*='DDLsuburb'] :selected"));
alert($get("#DDLsuburb option:selected"));
alert($get("DDLsuburb option:selected"));
alert($get("#DDLsuburb :selected").text());
alert($get("DDLsuburb :selected").text());
alert($get("DDLSuburb", Text));
alert($get(DDLSuburb, Text).toString());
alert($get("DDLSuburb", Text).toString());
alert($get("DDLSuburb").html());
alert($get("DDLSuburb :selected").html());
alert($get("DDLSuburb option:selected").html());
alert($get(DDLSuburb).textContent());
alert($get(DDLSuburb).innerHTML());
alert($get(DDLSuburb).innerHTML.toString());
alert($get("DDLSuburb").text());
alert($get("DDLSuburb").valueOf("DDLSuburb"));
alert($get("DDLSuburb").valueOf());
Notes: 1. I am using alert for troubleshooting. 2. I know the first part should be ($get("DDLSuburb"), as opposed to the options without quotes. Visual Studio 2015, ASP.net.
Edit: Trying to raise the alert via button click:
<input type="button" value="Get Postcode" onclick="onClick()" />
<script type="text/javascript">
var onClick = function () {
alert($get("DDLSuburb")...);
}
Try
<script type="text/javascript">
$(document).ready(function () {
$("#<%=DDLSuburb.ClientID %>").change(function (e) {
alert($("#<%=DDLSuburb.ClientID %> option:selected").text());
});
});
</script>
The reason <%=DDLSuburb.ClientID %> is used is because in the HTML the ID DDLSuburb is translated into something like ctl00$mainContentPane$DDLSuburb to ensure unique ID's on the page. That's why your JavaScript cannot find it.
Or you can use the property ClientIDMode="Static" in the DropDown to keep the ID name the same in the HTML, but I do not recommend this.
this code use for show selected item by using jQuery. ddlItem is a id of dropdownlist.
<script>
$(document).ready(function () {
$("#ddlItem").change(function () {
var ddlItem = document.getElementById("<%= ddlItem.ClientID %>");
var selectedText1= ddlItem.options[ddlItem.selectedIndex].innerHTML;
alert("You selected :" + selectedText1);
});
});
</script>
Related
I have the following JScript on a page
<script type="text/javascript">
function ProcessButtonDisable() {
var button = $find("<%=ProcessButton.ClientID %>");
button.disabled = true;
}
</script>
and later
<asp:Button ID="ProcessButton" Text="Process All" runat="server" OnClick="Process_Click" OnClientClick="ProcessButtonDisable()" />
when running the page and firing off the button i get
Microsoft JScript runtime error: Unable to set value of the property 'disabled': object is null or undefined
and the dynamic page has converted it to:
<script type="text/javascript">
function ProcessButtonDisable() {
var button = $find("ctl00_ctl00_BodyContentPlaceHolder_MainContentPlaceHolder_ProcessButton");
button.disabled = true;
}
</script>
<input type="submit" name="ctl00$ctl00$BodyContentPlaceHolder$MainContentPlaceHolder$ProcessButton" value="Process All" onclick="ProcessButtonDisable();" id="ctl00_ctl00_BodyContentPlaceHolder_MainContentPlaceHolder_ProcessButton" />
as the control is clearly defined and the client id seems to be returning the correct id i don't know whats wrong
Any help?
ps in case this is not clear from the code the purpose of this is to prevent he user from clicking on the and resending the request before the page has time to reload after the initial click
-1 to all the previous answers for assuming JQuery. $find is a function defined by the Microsoft AJAX Library. It "provides a shortcut to the findComponent method of the Sys.Application class" which gets "a reference to a Component object that has been registered with the application through the addComponent method". Try using $get() instead, which "Provides a shortcut to the getElementById method of the Sys.UI.DomElement class."
This page explores both functions in detail: The Ever-Useful $get and $find ASP.NET AJAX Shortcut Functions
$find is differ from $.find. The first one is provides a shortcut to the findComponent method of the Sys.Application class which defined by the Microsoft AJAX Library. while the second is API method from jQuery which get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.
So, $find has to find Component not html DOM. and ajax Library has to be defined.
For more information:
http://msdn.microsoft.com/en-us/library/vstudio/bb397441(v=vs.100).aspx
http://api.jquery.com/find/
try this:
<script type="text/javascript">
function ProcessButtonDisable() {
var button = $("#<%=ProcessButton.ClientID %>");
button.disabled = true;
}
</script>
[edit] or
<script type="text/javascript">
function ProcessButtonDisable() {
$("#<%=ProcessButton.ClientID %>").attr("disabled", "disabled");
}
</script>
You have to select what you are "finding" in first. For example, if you select document then use the method "find" you should have the result you want.
<script type="text/javascript">
function ProcessButtonDisable() {
var button = $(document).find(("<%=ProcessButton.ClientID %>");
button.disabled = true;
}
</script>
disabled is not a jQuery object property it is a DOM element property.
Try using either:
$('selector').get(0).disabled = true
, or
$('selector').attr('disabled','disabled');
You need to use the dot notation, as find() is a jQuery function, like this:
<script type="text/javascript">
function ProcessButtonDisable() {
var button = $.find("<%=ProcessButton.ClientID %>");
button.disabled = true;
}
</script>
Also, if you are going to take the trouble to look up the DOM element in your jQuery logic, then do not bother wiring up the OnClientClick on the server control; either wire up the click event via jQuery or pass the element itself to the JavaScript function:
Using jQuery to wire up the click event (recommended):
<script type="text/javascript">
$(document).ready(function() {
$("#<%=ProcessButton.ClientID%>").click(function() {
$(this).disabled = true;
});
});
</script>
Using the OnClientClick attribute to wire up the click event and pass the element (not recommended):
<asp:Button ID="ProcessButton" Text="Process All" runat="server" OnClick="Process_Click"
OnClientClick="ProcessButtonDisable(this)" />
<script type="text/javascript">
function ProcessButtonDisable(elem) {
elem.disabled = true;
}
</script>
I have a radio button inside a repeater as follow.
<asp:Repeater ID="rpt" runat="server">
<ItemTemplate>
<asp:RadioButton ID="rbtnCityName" runat="server" Text='<%# Bind("CityName") %>'
GroupName="Cities" />
</ItemTemplate>
</asp:Repeater>
Now problem is that how I can select a single radio button across multiples.
Even though I have given a groupname for radio button, I am not able to select any of them.
<script type="text/javascript" language="javascript">
function fnCheckUnCheck(objId)
{
var grd = document.getElementById("<%= rpt.ClientID %>");
var rdoArray = grd.getElementsByTagName("input");
for(i=0;i<=rdoArray.length-1;i++)
{
if(rdoArray[i].type == 'radio')
{
if(rdoArray[i].id != objId)
{
rdoArray[i].checked = false;
}
}
}
}
</script>
call this function on click of radiobutton
onclick="fnCheckUnCheck(this.id);"
the best solution for me was to simlpy create an html input control inside the repeater:
<input type="radio" name="yourGroup" value='<%# Eval("Value") %>'/>
got the solution from Radio button repeater problem solved
Just adding another solution in case someone else is still running into this in 2020...
It does use JavaScript.
If you inspect the radio button in the browser's dev tools you'll see that the RadioButton control is rendered as a span with an input inside it, just like other input controls such as CheckBox.
So this:
<asp:RadioButton runat="server" class="my-class" name="myGroup" value="myGroupOption1" />
Ends up as something like this:
<span name="myGroup" class="my-class">
<input id="(long generated id)" type="radio" name="(generated name)" value="myRadioButton">
</span>
Notice I didn't use ASP.NET's GroupName attribute. If you use that it will end up as a name attribute on the input, replaced with the generated value that is causing problems here. Just use the regular name attribute and it gets moved to the span.
Now, to fix the names in the browser you can do something like this. I used JQuery, but you could accomplish the same with pure JavaScript.
$(document).ready(function () {
$('.my-class').each(function () { // find all the spans
if ($(this).attr('name')) {
var groupName = $(this).attr('name'); // save the group name
$(this).children('input').each(function () { // find the input
$(this).attr('name', groupName); // fix the name attribute
});
}
});
});
Now the radio buttons are grouped properly.
So add a unique CSS class to your radio buttons and run that function on page load.
$('#SubmitAnswers').click(function () {
var names = [];
$('input[type="radio"]').each(function () {
// Creates an array with the names of all the different checkbox group.
names[$(this).attr('name')] = true;
});
// Goes through all the names and make sure there's at least one checked.
for (name in names) {
var radio_buttons = $("input[name='" + name + "']");
if (radio_buttons.filter(':checked').length == 0) {
// alert('none checked in ' + name);
$('#Group'+ name).css("visibility", "visible");
}
else {
// If you need to use the result you can do so without
// another (costly) jQuery selector call:
var val = radio_buttons.val();
$('#Group' + name).css("visibility", "hidden");
}
}
});
I am using the jQuery Datepicker without any problem for TextBox controls that are non-templated. However, I am unable to get the datepicker to work with a TextBox that is in an EditItemTemplate of a ListView control. My latest attempt is to get a handle on this textbox by CSS class name "DateControl", any ideas?
<asp:ListVIew id="lvTest" runat="server">
<LayoutTemplate>...</LayoutTemplate>
<ItemTemplate>...</ItemTemplate>
<EditItemTemplate>
<tr>
<td>
<asp:TextBox ID="txtExpReceiveDate" runat="server" Text='<%#Eval("exp_receive_date","{0:dd-MMM-yy}") %>' CssClass="DateControl" />
</td>
</tr>
</EditTemplate>
</asp:ListView>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$('.DateControl').datepick({ dateFormat: 'M-dd-yyyy' });
});
</script>
You need a . at the beginning of a class name when selecting with jQuery (just like CSS):
$(document).ready(function () {
$('.DateControl').datepick({ dateFormat: 'M-dd-yyyy' });
});
This turned out to just be a case where I needed to attach the datepicker to my controls inside of...
function pageLoad(sender, args){}
instead of...
$(document).ready(function () {});
It's been a while since I used a ListView, but I think that the Edit controls are exposed dynamically - there's no postback.
So in order to attach to a dynamically included element, you'll need to use the new jquery live - not sure if you can do something like
$('.DateControl').live('click', function() {
$('.DateControl').datepick({ dateFormat: 'M-dd-yyyy' });
});
or if you have to attach that to the Edit event something like:
$("DateControl").live("showEdit", function(e, myName, myValue){
$('.DateControl').datepick({ dateFormat: 'M-dd-yyyy' });
});
$("EditControl").click(function () {
$("DataControl").trigger("showEdit");
});
But that should be enough to get you started.
Is it possible to prevent the _doPostBack() call getting rendered on a button?
I would like add some custom logic prior to calling the postback.
I have added an onClick event to the button
e.g.
<button id="manualSubmit" runat="server" class="manual-submit" onclick="$('#jeweller-form').hide();" />
However, this just gets rendered inline before the _doPostBack()
But the postback gets fired before the jQueryHide takes place
I would like to call my own JS function then manually trigger the postback
any ideas?
Try this:
<button runat="server" id="Test" onserverclick="Test_ServerClick">Submit</button>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var o = $("#Test"), c = o.attr("onclick");
o
.removeAttr("onclick")
.click(function(e) {
o.fadeOut("slow", function() {
o.fadeIn("slow", function() {
c(e);
});
});
return false;
});
});
</script>
Add return false; after the client-side code in the click event. In the HTMLControl, it didn't think it rendered __doPostBack; is the control that renders the _doPostBack, and the common way to prevent that for that control is:
<asp:Button ... OnClientClick="doThis();return false;" />
Which renders these JS statements before __doPostBack.
HTH.
im trying this format:
$("#<%= hfWidth.UniqueID %>").val($("#drag").attr("offsetWidth"));
to fill the hidden field with client-side values
but when I do postback, the values doesn't seem to be saved.
help
If you want to get params from the server side, you should use name instead of id attribute.
And your code should work :
$("#elementId").val("value");
fixed it with <%= hfWidth.ClientID %>
in your aspx page:
<asp:HiddenField ID="hdn_checkbox" runat="server" />
in your Javascript:
function somefunction() {
$("#<%= hdn_checkbox.ClientID %>").val("test");
}
$('.btnGreen').click(function () {
somefunction();
alert($("#<%= hdn_checkbox.ClientID %>").val());
return true;
});