c# - get the id of selected item from html5 input list -

how can id of selected item input list. can fetch item can not fetch id of selected item.

<div class="form-row">     <label>         <span>&nbsp;selected items</span>         <input list="username" runat="server" id="usernameinput" class="form-control input_list" placeholder="faculty" required="required" />             <datalist id="username" runat="server"></datalist>     </label> </div> <div class="form-row">     <label>         <span>&nbsp;&nbsp;selected html5 input</span>         <input type="text" id="input_selected" runat="server" />     </label> </div> <div class="form-row">         <asp:button id="btnsubmit" runat="server" text="submit" onclick="btnsubmit_click" /> </div> 

i want display user_name in input list user want fetch user_id of selected user_name in codebehind page.

public void getusername()         {                 string strquery = "select user_id, user_name tbl_user";                 sqlcommand cmd = new sqlcommand(strquery);                 dbconnection conn_ = new dbconnection();                 datatable dt = conn_.selectdata(cmd);                  var builder = new system.text.stringbuilder();                 (int = 0; < dt.rows.count; i++)                 {                     builder.append(string.format("<option value='{0}'>", dt.rows[i][1]));                 }                 username.innerhtml = builder.tostring();                 usernameinput.attributes["list"] = username.clientid;         } protected void btnsubmit_click(object sender, eventargs e)         {                 input_selected.value = usernameinput.value;         }    

this gives me user_name want fetch user_id in code behind page. how can that?

some concerns regarding html5 datalist element html form: select-option vs datalist-option:

if focus on use of <datalist> list of options text field here specific differences between , select box:

• a <datalist> fed text box has single string both display label , submit. select box can have different submit value vs. display label <option value='ie'>internet explorer</option>.

as mentioned above, display label text & value datalist has same string, can't use builder.append(string.format("<option value='{0}'>{1}</option>", ...) placeholder in datalist used in select element.

a) if still want use datalist & fetch user id instead of user name, can store datatable contents inside session (or other instance able hold datatable during runtime, hence no need re-query db again) , perform datatable.select query during btnsubmit_click event afterwards:

public void getusername() {     // other stuff      datatable dt = conn_.selectdata(cmd);     session["datatable"] = dt;      // other stuff }  // button click event handler protected void btnsubmit_click(object sender, eventargs e) {     var value = usernameinput.value;     datatable dt = (datatable)session["datatable"];     string expression = "user_name = '" + value + "'";      datarow[] result = dt.select(expression);      input_selected.value = result[0][0].tostring(); // ensure result single user id result } 

b) if willing change datalist plain select element able contain different data label & form submit value, use aforementioned option placeholder before:

for (int = 0; < dt.rows.count; i++) {      // if datatable has 2 columns,      // 0 = user_id, 1 = user_name      builder.append(string.format("<option value='{0}'>{1}</option>", dt.rows[i][0].tostring(), dt.rows[i][1].tostring())); }  // button event handler protected void btnsubmit_click(object sender, eventargs e) {     input_selected.value = username.value; }  <%-- datalist changed select element --%> <select id="username" runat="server" ...></select> 

then, can remove input tag named usernameinput required datalist & use client-side autocomplete feature js.