Issue removing duplicate val() in :checked .map function

Question

I could use some insight or a helpful reference on where to look for checking values on selected checkboxes and if there are duplicates, only return one.

I'm working on a software trial wizard using bootstrap wizard. The first tab is a "solutions catalog" where the user can filter through hundreds of solutions. Many solution types are duplicate as they apply to multiple industry types.

Once user makes selections they go to tab 2 and review their selections. I'm able to map :checked and join the values in a custom separator in the next step but can't figure out how to only show one instance of a duplicate value.

For example, user might select two types of "Audits" for a customized solution. However, the provisioning team only wants to know that they want an "Audit" module.

<input type="checkbox" class='selection' value="Audits" name="Audits - Manufacturing">
<input type="checkbox" class='selection' value="Audits" name="Audits - Electrical">
<input type="checkbox" class='selection' value="Audits" name="Audits - Retail">
<input type="checkbox" class='selection' value="Trading" name="Trading - Manufacturing">
<input type="checkbox" class='selection' value="Trading" name="Trading - Retail">

My current code is outputting multiple selections of same value and kinda stuck on how to handle this.

$(document).ready(function() {
$('#rootwizard').bootstrapWizard({
    onNext: function(tab, navigation, index) {
        if (index == 1) {
            // Make sure we entered the solutions
            if (!$('.selection:checked').val()) {
                alert('Please select a solution to try');
                $('.selection').focus();
                return false;
            }
        }
        // Show selections in next tab
        $('#showSelection').html('<li>' + $('.selection:checked').map(function() {
            return $(this).val();
        }).get().join('</li><li>') + '</li>');
      }
    });
});

dehrg · Accepted Answer · 2014-08-19T14:37:42.300

0

You could use an array to store the values you have already seen. Something like:

$(document).ready(function() {
$('#rootwizard').bootstrapWizard({
    onNext: function(tab, navigation, index) {
        if (index == 1) {
            // Make sure we entered the solutions
            if (!$('.selection:checked').val()) {
                alert('Please select a solution to try');
                $('.selection').focus();
                return false;
            }
        }
        var selections = [];
        // Show selections in next tab
        $('.selection:checked').each(function() { 
            var value = $(this).val()
            if ($.inArray(value, selections) < 0){
               selections.push(value);
            }
        })
        $('#showSelection').html('<li>' + selections.join('</li><li>') + '</li>');
      }
    });
});

fiddle: http://jsfiddle.net/2a460tfc/10/

edited Aug 19 '14 at 14:37

answered Aug 18 '14 at 19:19

dehrg

1,721
14
17

Thanks for the advice dehrg. Makes sense to me but when I implement for some reason it actually just displays all the variables on the second tab. It's preventing duplicates but shouldn't push all variables into second tab. I'll see if I can pull a fiddle together to help demo the issue. – Zendiko Aug 18 '14 at 21:18
I'm not entirely sure what you mean, a fiddle would definitely help. Doesn't this do the same thing as your original code but without the duplicates? Also - I was missing a bracket on the if condition (revised in my answer now) – dehrg Aug 18 '14 at 21:33
Hi dehrg, sorry for the delay, was offline yesterday evening. Here's a fiddle with my original code and issues I'm working on. I left it original so you could see the duplication issue but when I added your ammendment above into the script It was stripping out the value, when I added known value types to the var, it showed an instance of every one. I'm obviously missing something. Any help/guidance you can provide is appreciated. – Zendiko Aug 19 '14 at 14:07
I updated my answer with revised code & updated fiddle. I had a mistake in there regarding the return value of `$.inArray`. If the fiddle doesn't do what you are looking for still I might need a bit more clarification – dehrg Aug 19 '14 at 14:38
Thanks dehrg!! This fixed the issue perfectly!! It also helped me better understand the application of .inArray as I'm still learning jQuery -- thanks for the help and insight. Trying to figure out the last two issues on the fiddle. Don't expect you to fix my work (important i understand things so I learn) but if you have time, perhaps you can point me in the right direction regarding setting the val in tab 4 (I suspect i'm using .html incorrectly). Also, not sure why my .find("a[href='']").trigger('click'), isn't working in final step. Current fiddle: http://jsfiddle.net/zendiko/2a460tfc/13/ – Zendiko Aug 19 '14 at 15:52
Absolutely right for issue #2. The function `html` will completely replace the content of whatever element you have selected. Try looking into the other `jQuery` content functions like `append` or `prepend`. For issue #3, you are hunting for an actual DOM element in the page (a link to google) and it doesn't look like that link actually exists. For navigation, maybe try something like [this answer](http://stackoverflow.com/questions/1226714/how-to-get-browser-to-navigate-to-url-in-javascript) – dehrg Aug 19 '14 at 16:09

Issue removing duplicate val() in :checked .map function

1 Answers1