I need to combine three different types of items into a single comma-separated string or array, which I plan to use later in a URL.
Is there a way to merge these three types of data together into one string or array?
- An existing POST string
- User input from a text field with an Add button
- The values of multiple checkboxes
Currently, the code I have only allows me to add form input values, and I'm struggling to remove a checkbox value from the string when its box is unchecked.
This is the HTML structure being used:
<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>
Below is the JavaScript code that has been attempted 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);
})