jQuery - Getting values of text input and checkboxes into one string (or array)

Question

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?

An existing POST string
Free input from a text field with an Add button
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);
})

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
– Cristian, Commented Aug 27, 2015 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. — user1106925
– user1106925, Commented Aug 27, 2015 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. — user1106925
– user1106925, Commented Aug 27, 2015 at 16:08

Cruiser · Accepted Answer · 2015-08-27 16:05:03Z

0

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(',');

answered Aug 27, 2015 at 16:05

Cruiser

1,6162 gold badges16 silver badges20 bronze badges

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

2 Comments

Cristian Over a year ago

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.

Cruiser Over a year ago

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

Leo Javier · Accepted Answer · 2015-08-27 16:09:00Z

0

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);
    })

answered Aug 27, 2015 at 16:09

Leo Javier

1,40314 silver badges19 bronze badges

Collectives™ on Stack Overflow

jQuery - Getting values of text input and checkboxes into one string (or array)

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related