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? stackoverflow.com/questions/11735660/… — Jonas G. Drange
– Jonas G. Drange, Commented Aug 1, 2012 at 13:34

adeneo · Accepted Answer · 2012-08-01 13:52:26Z

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 1, 2012 at 13:52

answered Aug 1, 2012 at 13:40

adeneo

319k29 gold badges410 silver badges392 bronze badges

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

4 Comments

Anthony Grist Over a year ago

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.

adeneo Over a year ago

@AnthonyGrist - Good point, edited it, but seems the answer above was what the OP was after anyway !

y2ok Over a year ago

@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.

adeneo Over a year ago

@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.

Rodik · Accepted Answer · 2012-08-01 13:40:04Z

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)

Ganaraj · Accepted Answer · 2012-08-01 13:46:35Z

0

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.

answered Aug 1, 2012 at 13:46

Ganaraj

26.8k6 gold badges68 silver badges60 bronze badges

Collectives™ on Stack Overflow

Replace input value .val() with jQuery

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related