Adding values from a list of checkboxes to a textbox

Question

I am new to jQuery, so I am not familliar with syntax of it.

The problem I am facing right now is, I have a dropdown list with some values and corresponding checkboxes. When someone selects a particular value from the dropdown i.e checks a checkbox from dropdown, I want to add the 'value' of the checkbox to the textbox which is besides the dropdown of checkboxes.

The code I have come up with is

$(".productr-dropdown li input[type='checkbox']").click(function(e){
        var cmd = $(this).val();
        addToTextBox(cmd);
});  

function addToTextBox(cmd){
    command = $(".z:eq(2)").find("#platform_Command").val();

    if (command.indexOf(' '+cmd+' ')>=0)
        return;
    else {
        // THIS IS THE NEXT PART WHERE I AM STUCK
        // I don't know how to add/replace the contents of 'cmd' 
        //  to the contents of 'command'(which is the value of the textbox)    
    }       
}

To better explain my problem I will write a use case here, The user checks a checkbox from the dropdown, e.g the value of the checkbox checked is 'abc', the textbox in which I want to add this 'abc' already has a value say 'xyz hijkl defg'. what should happen is the value'abc' should get added to the textbox in such a way that the value of the textbox would be'xyz abc hijkl defg'

The problem I have is I am not sure whether I am invoking the correct event also.

One more approach I have in mind is, $(document).click(function(e) { $(".productr-dropdown").hide(); $(".productr-dropdown").each(["input='checkbox':checked"], function (e){ addToTextBox($(this).val()); }); });

Which one is better ?

What is the syntax to only select values in the dropdown which are checked ?

@SimeVidas: Yes, it's possible and could be useful in some cases. :) — Tamara Wijsman
– Tamara Wijsman, Commented May 19, 2011 at 15:05
@Šime Vidas : Yes I have a checkboxes inside a dropdown list, basically its a dropdown list with options and corresponding checkboxes.......Its a long list of options, so using dropdown saves lot of screen space in my case + it looks better than say if I were to simply add some 20 odd checkboxes in the main form — Aniket
– Aniket, Commented May 19, 2011 at 15:13

Roko C. Buljan · Accepted Answer · 2011-05-19 23:15:09Z

1

A HTML from you would be kind. I improvized here:

JSFIDDLE demo

I'm still not clear about what are you trying to achieve btw.

edited May 19, 2011 at 23:15

answered May 19, 2011 at 17:31

Roko C. Buljan

209k41 gold badges334 silver badges346 bronze badges

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

1 Comment

Aniket Over a year ago

The problem is that the html gets built on the fly, depending upon a configuration in the xml file, so Its extremely difficult to post it here. Thanks for your help, I really appreciate it. :)

pixelbobby · Accepted Answer · 2011-05-19 15:06:00Z

0

can't you do something like so:

$('#myTxt').val( $('#mytxt').val() + cmd )?

answered May 19, 2011 at 15:06

pixelbobby

4,4305 gold badges33 silver badges50 bronze badges

1 Comment

Aniket Over a year ago

The main problem is I don't know the syntax to invoke a proper even which will either add value of each checkbox as and when it is clicked. There is one more option like to add the values of each checkbox checked once after the user is done selecting the values and clicks anywhere on the document which hides the dropdown

Tamara Wijsman · Accepted Answer · 2011-05-19 15:08:39Z

0

You will want to rewrite from

command = $(".z:eq(2)").find("#platform_Command").val();

to

command = $(".z:eq(2)").find("#platform_Command");

and from

if (command.indexOf(' 'cmd+' ')>=0)

to

if (command.val().indexOf(' 'cmd+' ')>=0)

so that you can easily just use the following to adjust the value

command.val(command.val() + " " + cmd);

answered May 19, 2011 at 15:08

Tamara Wijsman

12.4k8 gold badges55 silver badges82 bronze badges

2 Comments

Aniket Over a year ago

I just debugged my code with firebug, the event, $(".productr-dropdown li input[type='checkbox']").click(function(e){ }) doesn't seem to get invoked, so my question is if I am invoking the correct event here ?

Tamara Wijsman Over a year ago

You need to ask a new question for that, I already answered your original one.

Collectives™ on Stack Overflow

Adding values from a list of checkboxes to a textbox

3 Answers 3

1 Comment

1 Comment

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

2 Comments

Related