Using Jquery to add items in Listbox from Textbox

Question

I am stuck somewhere using jquery to append the list box from a text box.

here is my jquery

  $("#btnAddSvc").click(function () {
        var svc = $("#<%= txtServiceName.ClientID %>").val();  //Its Let you know the textbox's value   
        svc.appendTo("#<%=lstSvcName.ClientID %>");
    });

I am using asp.net (c#) to develop my code

<asp:Button ID="btnAddSvc" runat="server" Text=">>" Font-Size="Medium" />
<asp:ListBox ID="lstSvcName" runat="server" SelectionMode="Multiple" ToolTip="Selected Service Names"
                Width="169px"></asp:ListBox>

can someone please help as i am not able to get the values in list box.

Adil · Accepted Answer · 2012-07-06 12:17:24Z

7

The jQuery selector $() is missing for "#<%=lstSvcName.ClientID %>" so you will get id of lstSvcName instead of object.

I also changed the append statement as it does not have correct syntax.

"#<%=lstSvcName.ClientID %>"

would be

$("#<%=lstSvcName.ClientID %>")

Your code will become

$("#<%= btnAddSvc.ClientID %>").click(function () {
      var svc = $("#<%= txtServiceName.ClientID %>").val();  //Its Let you know the textbox's value   
      $("#<%=lstSvcName.ClientID %>").append('<option value="'+svc+'">item '+svc+'</option>');
      return false;
});

EDIT [ More functionality requested by OP for unique items in ListBox and clearing TextBox]

$("#<%= btnAddSvc.ClientID %>").click(function () {
    var txt = $("#<%= txtServiceName.ClientID %>");
    var svc = $(txt).val();  //Its Let you know the textbox's value   
    var lst = $("#<%=lstSvcName.ClientID %>");
    var options = $("#<%=lstSvcName.ClientID %> option");
    var alreadyExist = false;
    $(options).each(function () {
        if ($(this).val() == svc) {
            alert("Item alread exists");
            alreadyExist = true;
            return;
        }
        txt.val("");
        // alert($(this).val());
    });
    if(!alreadyExist)
            $(lst).append('<option value="' + svc + '">' + svc + '</option>');
    return false;
});

edited Jul 6, 2012 at 12:17

answered Jul 6, 2012 at 8:49

Adil

148k25 gold badges217 silver badges207 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Adil Over a year ago

Try it now, you had wrong syntax for adding item in listbox, check it now

Pratik Over a year ago

Surprisigly this is also not working :( why you have included 5</option> what 5 means here

Adil Over a year ago

It was typing mistake and I have already removed it, let me check why its not working

Adil Over a year ago

Its working, I do not know why not working on your side. Have you included jquery file? and placed this script at right place. Do some debugging it should work. Also take latest code from answer you may not have latest.

Adil Over a year ago

Here is my answer for debugging javascript that may help you stackoverflow.com/questions/10573819/…

|

Raaghav · Accepted Answer · 2012-07-06 09:08:20Z

1

Try something like this. This may help you. Change the return value for your convenience.

   $('#<%= btnAddSvc.ClientID %>').click(function () {
            $textbox = $('#<%= txtServiceName.ClientID %>');
            $listbox = $('#<%= lstSvcName.ClientID %>');
            $listbox.append($('<option></option>').attr('value', $textbox.val()).text($textbox.val()));
            return false;
        });

answered Jul 6, 2012 at 9:08

Raaghav

3,0421 gold badge25 silver badges21 bronze badges

3 Comments

Pratik Over a year ago

This is great thanks for your help : One more help needed how can i avoid the duplicates and also delete the ones on delete keystroke

Raaghav Over a year ago

Sorry for the delay. I dint come online these days. @PratikGupta , Try something like this to delete

$('#<%= btnDelete.ClientID %>').click(function() {         $listBox = $('#<%= lstBox.ClientID %>');         $selectedItem = $listBox.find('option:selected');         $selectedItem.remove();         return false;     });

Raaghav Over a year ago

@PratikGupta , Just try these lines of code to check for duplicate entries. I'm not sure this will work. Try modify some lines and try.

$textbox = $('#<%= txtText.ClientID %>'); 		for (var i = 0, j = selectObject.options.length; i < j; i++)         { 		if(selectObject.options[i].value==$textbox.val())            		   { 				alert('This Item already exists'); 				e.preventDefault();            }         }

Jupaol · Accepted Answer · 2012-07-06 09:19:28Z

You could do it using jquery manipulating the DOM but... Now there's a more elegant way to do it: an object-oriented way (using a MVVM - Model View ViewModel), using knockoutjs

Knockoutjs Nuget Package

You create a binding to your list just adding data-bind="options: elements" to your list, and you are always working with objects, never with DOM elements, in this example I have a string array but you can create custom objects and bind them using just a little variation in the syntax

The way to do it is:

<script type="text/javascript" src="Scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="Scripts/knockout-2.1.0.js"></script>
<script type="text/javascript">
    $(function () {
        var model = {
            elements: ko.observableArray(),
            addElement: function () {
                this.elements.push($("#<%= this.newElement.ClientID %>").val());
            }
        };

        ko.applyBindings(model);
    });
</script>


    <asp:ListBox runat="server" ID="myListbox" Rows="10" Width="25%" data-bind="options: elements">
    </asp:ListBox>
    <br />
    <asp:TextBox runat="server" ID="newElement"></asp:TextBox>
    <input type="button" id="addElement" value="Add element" data-bind="click: addElement" />

This is the output:

enter image description here

Collectives™ on Stack Overflow

Using Jquery to add items in Listbox from Textbox

3 Answers 3

9 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related