Add Insert Items to ASPNet ListBox using JavaScript and jQuery

In this article I will explain how to add (insert) Item (values) to ASP.Net ListBox using JavaScript and jQuery. The value from the TextBox will be added to the ASP.Net ListBox control using JavaScript and jQuery.

Add (Insert) Items to ASP.Net ListBox using JavaScript

The following HTML Markup consists of an ASP.Net ListBox control, a TextBox and a Button.

When the Button is clicked, the AddValues JavaScript function is executed. Inside this function, first the value from the TextBox is fetched and then a HTML OPTION element is created.

The TextBox value is set to the InnerHtml and Value property of the OPTION element. Finally the OPTION element is appended to the ASP.Net ListBox control.

<asp:ListBox ID="ListBox1" runat="server" Width="150" Height="60"></asp:ListBox>

<br />

<hr />

<asp:TextBox ID="txtValue" runat="server" />

<asp:Button ID="btnAdd" Text="Add" runat="server" OnClientClick="return AddValues()" />

function AddValues() {

var txtValue = document.getElementById("<%=txtValue.ClientID %>");

var listBox = document.getElementById("<%= ListBox1.ClientID%>");

var option = document.createElement("OPTION");

option.innerHTML = txtValue.value;

option.value = txtValue.value;

listBox.appendChild(option);

txtValue.value = "";

return false;

}

</script>

Add (Insert) Items to ASP.Net ListBox using jQuery

The following HTML Markup consists of an ASP.Net ListBox control, a TextBox and a Button.

When the Button is clicked, the jQuery click event handler is executed. Inside this event handler, first the value from the TextBox is fetched and then a HTML OPTION element is created.

The TextBox value is set to the InnerHtml and Value property of the OPTION element. Finally the OPTION element is appended to the ASP.Net ListBox control.

<asp:ListBox ID="ListBox1" runat="server" Width="150" Height="60" SelectionMode = "Multiple"></asp:ListBox>

<br />

<hr />

<asp:TextBox ID="txtValue" runat="server" />

<asp:Button ID="btnAdd" Text="Add" runat="server" />

$(function () {

$("[id*=btnAdd]").bind("click", function () {

var value = $("[id*=txtValue]").val();

var listBox = $("[id*=ListBox1]");

var option = $("<option />").val(value).html(value);

listBox.append(option);

$("[id*=txtValue]").val("");

return false;

});

</script>

Screenshot

Fetching the ASP.Net ListBox items on Server Side (Code Behind)

The items added to the ASP.Net ListBox using JavaScript and jQuery are not added in ViewState and hence will not be available in the ListBox Items collection.

Thus we will need to make use of Request.Form collection and fetch the values in the following way.

protected void Submit(object sender, EventArgs e)

{

string values = Request.Form[ListBox1.UniqueID];

}

VB.Net

Protected Sub Submit(sender As Object, e As System.EventArgs)

Dim values As String = Request.Form(ListBox1.UniqueID)

End Sub

The following screenshot displays the ListBox selected values posted to the server.