ComboBox SelectedValue using JavaScript

Question

1.00/5 (1 vote)

See more:

Dear All, I am using AJAX 3.5 ComboBox Contol in my page and I want to retrive selected value of that ComboBox using Javascript but I am getting errors. following shows my ComboBox declaration.

XML

<asp:ComboBox ID="ddlPrv" runat="server" CssClass="ddl" DataSourceID="sqlDsddPrv"
         DataTextField="Province" DataValueField="ProvinceID"
            AutoCompleteMode="SuggestAppend" DropDownStyle="DropDownList">
        </asp:ComboBox>

and bellow is javascript

XML

var ddlPrv = document.getElementById('<%= frmProvinceInYear.FindControl("ddlPrv").ClientID %>');
        var val = ddlPrv.value;
        alert(val);

I am getting undefined in alert.

Modification:

I modified my page completely and I changed my ComboBox ID to cmbSDURN and placed that in a page not inside a formView, here is the rendered HTML

XML

<div onchange="javascript:setTimeout('__doPostBack(\'ctl00$ContentPlaceHolder1$cmbSDURN\',\'\')', 0)"
     id="ctl00_ContentPlaceHolder1_cmbSDURN"
     class="WindowsStyle">
    <table  id="ctl00_ContentPlaceHolder1_cmbSDURN_Table"
            class="ajax__combobox_inputcontainer"
            cellspacing="0"
            cellpadding="0"
            border="0"
            style="border-width:0px;border-style:None;border-collapse:collapse;">
        <tr>
            <td class="ajax__combobox_textboxcontainer">
                <input  name="ctl00$ContentPlaceHolder1$cmbSDURN$TextBox"
                        type="text"
                        value="021089"
                        id="ctl00_ContentPlaceHolder1_cmbSDURN_TextBox"
                        onkeydown="return gotoNext(event);"
                        autocomplete="off" />
            </td>
            <td class="ajax__combobox_buttoncontainer">
                <button id="ctl00_ContentPlaceHolder1_cmbSDURN_Button"
                        type="button"
                        style="visibility:hidden;">
                </button>
            </td>
        </tr>
    </table>
    <ul id="ctl00_ContentPlaceHolder1_cmbSDURN_OptionList"
        class="ajax__combobox_itemlist"
        style="display:none;visibility:hidden;">
        <li>-Select SDURN-</li>
        <li>011089</li>
        <li>021089</li>
        <li>031089</li>
        <li>041089</li>
        <li>051089</li>
    </ul>
    <input  type="hidden"
            name="ctl00$ContentPlaceHolder1$cmbSDURN$HiddenField"
            id="ctl00_ContentPlaceHolder1_cmbSDURN_HiddenField"
            value="2" />
</div>

in my aspx Page I have following code

C#

function getSelectedValue() {
        var comboBoxID = "<%= this.cmbSDURN.ClientID %>";
        alert(comboBoxID); //Returns ComboBox ClientID and After this Statement nothing Works
        var elements = $("#" + comboBoxID + " input"); //jQuery CSS selector
        var val = undefined;
        alert(elements.length);
        if(elements.length==1)
        {
            val = elements[0].value;
            alert(val);
        }
return false;
    }

<asp:Button runat="server" ID="btnN" Text="Selected Value" OnClientClick="return getSelectedValue();" />

using above code i get only the first alert which is ComboBox ClientID but the page postbacks. I dont know why the code doesent work?

how I can get the selected value of my Ajax 3.5 ComboBox using javascript?

Posted 14-Dec-10 0:30am

Abdul Rahman Hamidy

Updated 5-Jan-11 10:55am

Manfred Rudolf Bihy

v5

Add a Solution

Comments

Abdul Quader Mamun 14-Dec-10 6:32am

Two questions here.

saini arun 14-Dec-10 6:36am

What do you get when you alert ddlPrv?

Manfred Rudolf Bihy 14-Dec-10 17:29pm

When I checked out how a ComboBox gets rendered as HTML I found a solution utilizing jQuery. I modified my answer accordingly.

Manfred Rudolf Bihy 17-Dec-10 13:33pm

Did you try my solution yet?

Manfred Rudolf Bihy 5-Jan-11 8:52am

Dear Abdul, I don't know why you haven't tried my solution, but I can't see any javascripts rendered in the html you posted. So what are you trying to achieve here? Please try what I suggested.

Abdul Rahman Hamidy 5-Jan-11 9:26am

I tried your code, but is not working and my page postbacks even i have "return false" at end of function.

Manfred Rudolf Bihy 5-Jan-11 16:17pm

OMG, Abdul! When I said that I use jQuery for my solution I forgot to tell you that you would need to include a script tag for that in the head section of your html. Please have a look at my answer below made some additions on how to get jQuery and where to place it in your solution and how to have it loaded when the page is loaded. I'm sorry I missed that, but I thought you already knew about jQuery as you didn't ask any questions about it when I mentioned it in my first answer. If there are still issues please leave a message on my answer, so I will receive an email notification. Thanks for bearing with me!

Manfred Rudolf Bihy 6-Jan-11 3:33am

What do the three alerts in your function give you for the three values of:
- comboBoxID
- elements.length
- val

Abdul Rahman Hamidy 20-Apr-11 4:41am

let me thanks, but your code retrieve the selected Text not selected Value, but I used your code in many other places, thanks to jQuery and you.

2 solutions

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Manfred Rudolf Bihy · Answer 1 · 2010-12-14T00:47:00

Hi Abdul,

Modified solution works by utilizing jQuery!

Please download yourself a copy of the most recent jQuery.js file here:
jquery-1.4.4.js[^], move it to a folder of your choice in you web solution, make sure this folder gets uploaded (published) to your server and you may want to rename it. In my example below I used the latest version, but I renamed it to jQuery.js.

Without having jQuery.js loaded there should have been an error when the script was executed. In IE there will usually be small "Warning sign" type of symbol in the lower left corner of the status bar. Double-clicking that symbol will give you the details of what actually went wrong.

JavaScript

// Your page needs to load the jQuery script, in this example it's in a folder
// parallel to the one that contains the test html page
// !!! You must place the jQuery.js script in a folder of your choice
// !!! and adapt the path below to reflect that in the src attribute
<head>
...
<script type="text/javascript" src="../scripts/jquery.js"></script>
...
</head>
...
...
// obsolete code
// var ddlPrv = document.getElementById('<%frmProvinceInYear.FindControl("ddlPrv").ClientID %>');
// var index = ddlPrv.selectedIndex;
// var val = ddlPrv.options[index].text;

// Good code starts here: jQuery to the rescue
var comboBoxID = "<%= frmProvinceInYear.FindControl("ddlPrv").ClientID %>";
var elements = $("#" + comboBoxID + " input"); //jQuery CSS selector
var val = undefined;
if(elements.length==1)
{
    val = elements[0].value;
}

And voila! Variable val contains the text of the selected entry.

Modification:
This solution works with jQuery as it allows you to select elements that are ancestors of an element. The selector that is being constructed would be according to OP's example like this "#<whatEverTheClientIDis> input" and means essentially: Give me all HTML input tags that are children of the tag with the id <whatEverTheClientIDis>. Since the $() function returns an array elements is indexed in my code.

Cheers,

Manfred

Abdul Rahman Hamidy · Answer 2 · 2010-12-14T03:41:00

Solution 3

Thanks for your reply, using your code I am getting an error 'options' is null or not an object, your codes works if i change the AJAX 3.5 ComboBox to ASP.et DropDownList, but In Ajax ComboBox it doesent work.

Posted 14-Dec-10 3:41am

Abdul Rahman Hamidy

Comments

fjdiewornncalwe 14-Dec-10 9:55am

Please post as a comment to the answer you are referring to. If there were 10 answers here it would be very difficult for people to figure out the conversation. Cheers.

fjdiewornncalwe 14-Dec-10 9:57am

If you are using the Ajax toolkit combobox, then your source code snippet in your question is incorrect. Could you verify that that snippet is correct and if not, could you update it please? Manfred's answer is 100% correct based on the information you have provided in the question.

ComboBox SelectedValue using JavaScript

2 solutions

Solution 2

Solution 3

Add your solution here

Preview 0

ComboBox SelectedValue using JavaScript

2 solutions

Solution 2

Solution 3

Add your solution here

Preview 0

Existing Members

...or Join us