Replace input value .val() with jQuery

Question

So basically here is my jsFiddle - http://jsfiddle.net/CmNFu/ .

And code also here -

HTML -

<b style="float: left; margin-right: 10px;">category 1</b><input type="checkbox" value="category1" style="float: left;" class="portfolio-category" /><br />
<b style="float: left; margin-right: 10px;">category 2</b><input type="checkbox" value="category2" style="float: left;" class="portfolio-category" /><br />
<br />
<br />
<input type="text" name="categories" id="portfolio-categories" />

jQuery -

jQuery(document).ready(function() {
    jQuery(".portfolio-category").click(function() {
        if(jQuery(this).is(":checked")) {
            jQuery("#portfolio-categories").val(jQuery("#portfolio-categories").val()+" "+jQuery(this).val());
        }
        else {
            var portfolioCategories = jQuery("#portfolio-categories").val();    
            alert("before + "+portfolioCategories);
            var currentElement = jQuery(this).val()+" ";
            alert(currentElement);
            portfolioCategories = portfolioCategories.replace(currentElement, "");
            alert(portfolioCategories);
        }
    });
});

Well basically what I would like to achieve is, when user checks the checkbox, the value automatically adds inside input field (Done, it's working, whooray!), but the problem is when it unchecks the checkbox, the value should be removed from input box (the problem starts here), it doesn't remove anything. You can see I tried assigning val() function to variables, but also without success. Check my example on jsFiddle to see it live.

Any suggestions? I guess replace() is not working for val(), is it?

So, is there any other suggestions?

Does this answer help you? http://stackoverflow.com/questions/11735660/multiple-checkbox-value-will-show-in-textbox/11735719#11735719 — Jonas G. Drange, Aug 01 '12 at 13:34

adeneo · Answer 1 · 2012-08-01T13:52:26.800

3

I'd do this:

jQuery(document).ready(function() {
    jQuery(".portfolio-category").on('change', function() {
        var string = "";
        $('input[type="checkbox"]').each(function() {
            var space = string.length>0?' ':'';
            string += this.checked?space+this.value:'';
        });
        $("#portfolio-categories").val(string);
    });
});

FIDDLE

edited Aug 01 '12 at 13:52

answered Aug 01 '12 at 13:40

adeneo

312,895
29
395
388

I'd use `.change()` rather than `.click()` to recognise the checkbox's checked state changing, that way it will also work for people who use the keyboard. – Anthony Grist Aug 01 '12 at 13:46
@AnthonyGrist - Good point, edited it, but seems the answer above was what the OP was after anyway ! – adeneo Aug 01 '12 at 13:53
@adeneo Well basically, the answer I accepted was with same idea that I had, with your answer I would need to change few of my other code, so it wouldn't work as well. Anyway, I upvoted your answer as thanks for helping :)! Hope you don't mind. – y2ok Aug 01 '12 at 19:09
@y2ok - Thanks for upvoting, and whatever answer helps you solve your issue is the one you should accept, this answer changes most of your code, so it might not be the right one for you, that's entirely up to you to decide. – adeneo Aug 01 '12 at 20:31

score 2 · Accepted Answer · answered Aug 01 '12 at 13:40

You have quite the issue with spaces in that input box. but we'll get to that in a moment.

first, this will kind of work (if it weren't for the spaces problem):

add this line before the last alert:

 jQuery("#portfolio-categories").val(portfolioCategories);

this will work, but not always, as the last element you append doesn't have a space after it.

but if you change the 4th line to this:

jQuery("#portfolio-categories").val(jQuery("#portfolio-categories").val()+jQuery(this).val()+" ");

it will work, as it adds the space after each element, instead of before.

http://jsfiddle.net/CmNFu/5/

your issue was that you changed the values in the variable: portfolioCategories, but you haven't updated the input itself. (notice, changing the value of a string, doesn't change the value of the input it originally came from)

score 0 · Answer 3 · answered Aug 01 '12 at 13:46

What you need is to insert back the string portfolioCategories into the input. Also the spaces are creating a lot of problems. You could use $.trim(str) to remove any leading and trailing spaces from a string. Have updated your fiddle with a solution that works.

http://jsfiddle.net/CmNFu/11/

Hope this helps.

Replace input value .val() with jQuery

3 Answers3

Linked