current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.6 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 0 down vote favorite

I have three types of items I'm trying to get into a comma-separated string (or array), which I want to display and use to form a URL later.

How can I get these three types of data into the same string or array?

  1. An existing POST string
  2. Free input from a text field with an Add button
  3. The values of a series of checkbokes

Currently, with the code I'm using, adding the form input values overrides the string, and I can't figure out how to remove a checkbox value from the string when its box is unchecked.

Here's the fiddle.

I'm using this HTML:

<div class="srs-display">existingPostString</div>

<ul id="srs" class="srs">
    <!-- START TEXT INPUT FIELD -->
    <li class="sr">
        <div class="masonry-well">
            <input id="sr-custom" type="text" placeholder="Add your own">
            <a class="add-sr-custom">Add</a>
        </div>
    </li>
    <!-- END TEXT INPUT FIELD -->
    <!-- START CHECKBOXES -->
    <li class="sr">
        <div class="masonry-well">
            <input id="srPredefined1" type="checkbox" name="srPredefined1" value="srPredefined1">
            <label for="srPredefined1" class="ts-helper">srPredefined1</label>
        </div>
    </li>
    <li class="sr masonry-item">
        <div class="masonry-well">
            <input id="srPredefined2" type="checkbox" name="srPredefined2" value="srPredefined2">
            <label for="srPredefined2" class="ts-helper">srPredefined2</label>
        </div>
    </li>
    <li class="sr masonry-item">
        <div class="masonry-well">
            <input id="srPredefined3" type="checkbox" name="srPredefined3" value="srPredefined3">
            <label for="srPredefined3" class="ts-helper">srPredefined3</label>
        </div>
    </li>
    <!-- END CHECKBOXES -->
</ul>

And here's the JS I tried so far:

$('input[type="checkbox"]').bind('change', function() {
    var srs = 'existingPostString';

    $('input[type="checkbox"]').each(function(index, value) {
        if (this.checked) {
            /*add*/ /*get label text associated with checkbox*/
            srs += ($(this).val() + ', ');
        }
    });
    if (srs.length > 0) {
        srs = srs.substring(0,srs.length-2);
    } else {
        srs = 'No checks';
    }

    $('.srs-display').html(srs);
});

$(".add-sr-custom").on('click', function() {
    var srs = 'existingPostString';

    srs +=  ',' + $('#sr-custom').val();
    $('.srs-display').text(srs);
})
share|improve this question
    
What's your question? – squint Aug 27 '15 at 15:58
    
I'm trying to figure out how I can get those three types of data into the same string or array. I edited for clarity. Thanks. – Cristian Aug 27 '15 at 16:04
    
I mean you have some code there, so what isn't working? You should describe the output you're getting and how it differs from the desired output. – squint Aug 27 '15 at 16:06
    
I see that you define separate srs variable in the handlers. You do understand that those are completely separate, right? If not, then grab some introductory materials that discuss variable scope. – squint Aug 27 '15 at 16:08
up vote 0 down vote

I would push your string elements to an array, and then call array.join(',') on it. Like this:

var srs = [];
//each checkbox
srs.push($(this).val());

//later
var new_string = srs.join(',');
share|improve this answer
    
Thank you. That would work, but the problem is, I have no idea how to take the string bits back when their respective boxes are unchecked. I need it to happen instantly, on click, as a visual representation, not in the background, or on form submit. – Cristian Aug 27 '15 at 23:54
    
You can still use this method, just use .pop() in your conditional when a checkbox isn't checked. Then, before you display the string, use .join(','). Just takes a little more checking on the .val() in case the user unchecks them later – Cruiser Aug 29 '15 at 13:07
up vote 0 down vote

Hi man check this solution:https://jsfiddle.net/leojavier/onwkaLet/6/

var srs = [];

    $('input[type="checkbox"]').bind('change', function() {
         srs=[]
        $('input[type="checkbox"]').each(function(index, value) {
            if (this.checked) {
                srs.push($(this).val());
            }
        });

        $('.srs-display').html(srs);
    });

    $(".add-sr-custom").on('click', function() {
        $('#sr-custom').val(srs);
    })
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.