Update input value field on click and checking if exists

Question

I am trying to update the value of an input field based on what options the user selects. So, if they select an option 'education', it would add it to the input value field. If they select that same option again it would remove. They can add as many or as few options as they want. I'm a little stuck with two things:

If they add more than one option, is it possible to separate these values by a comma?
If they select the same option again but added others, it would remove only that option and keep the rest?

Any help? This is what I have so far. I have set up a jsFiddle that might help? Thanks.

https://jsfiddle.net/w1x9Lpho/

    $(document).on('click touchstart', '.project-library-filters-container ul.project-sectors-list li a', function(e) {
        $(this).each(function() {
            $(this).parent('li').addClass('active');
            if ($(this).parent('li').is('active')) {
                var dataName = '';
                $('input[name=project_sectors]').val($('input[name=project_sectors]').val() + dataName).serialize();
            } else {
                var dataName = $(this).data('name');
                $('input[name=project_sectors]').val($('input[name=project_sectors]').val() + dataName).serialize();
            }
        });
        e.preventDefault();
    });

Emre Erkan · Accepted Answer · 2015-10-14 14:13:00Z

Maybe you have to approach to the problem from a different angle. :)

I heavily changed your code. I used an array for storing selected values and stored that selected values on input with .data(). Used .join() to join values with a comma. $.inArray helps finding a value in an array. So if exists I can remove, if not I can add.

Here is the final code. You have to implement the code for "All" procedure by yourself.

$(document).on('click touchstart', '.project-library-filters-container ul li a', function (e) {
    e.preventDefault();
    var $this = $(this),
        $li = $this.parent(),
        $input = $li.parent().next(),
        name = $this.data('name'),
        data = $input.data('selected') || [],
        idx = $.inArray(name, data);
    if(idx >= 0) {
        data.splice(idx, 1);
    }
    else {
        data.push(name);
    }
    $input.data('selected', data).val(data.join(', '));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="project-library-filters-container" id="project-library-filters">
    <div class="container-fluid">
        <form class="project-library-filter" action="/Freelance/levitt-bernstein/project-library-results/" method="get">
            <div class="row">
                <div class="filter-container clearfix">
                    <div class="col-xs-12 col-sm-12 each-filter-set">
                        <div class="inner">
                            	<h3>Show me &mdash;</h3>

                            <ul class="project-sectors-list list small clearfix">
                                <li><a href="#">All</a>
                                </li>
                                <li><a href="#" data-name="architecture">Architecture</a>
                                </li>
                                <li><a href="#" data-name="landscape-design">Landscape Design</a>
                                </li>
                                <li><a href="#" data-name="urban-design">Urban Design</a>
                                </li>
                            </ul>
                            <input type="text" name="project_sectors" value="" />
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-12 each-filter-set">
                        <div class="inner">
                            	<h3>For &mdash;</h3>

                            <ul class="project-tags-list list small clearfix">
                                <li><a href="#">All</a>
                                </li>
                                <li><a href="#" data-name="arts">Arts</a>
                                </li>
                                <li><a href="#" data-name="commercial">Commercial</a>
                                </li>
                                <li><a href="#" data-name="education">Education</a>
                                </li>
                                <li><a href="#" data-name="health">Health</a>
                                </li>
                                <li><a href="#" data-name="housing">Housing</a>
                                </li>
                            </ul>
                            <input type="text" name="project_tags" value="" />
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-12 each-filter-set">
                        <div class="inner">
                            	<h3>In &mdash;</h3>

                            <ul class="list small clearfix">
                                <li><a href="#" data-name="bristol">Bristol</a>
                                </li>
                                <li><a href="#" data-name="london">London</a>
                                </li>
                                <li><a href="#" data-name="ucl">UCL</a>
                                </li>
                            </ul>
                            <input type="text" name="project_cities" value="" />
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12 col-sm-12">
                        <button type="submit" name="submit">Go</button>
                    </div>
                </div>
            </div>
    </div>
</div>
</div>

This is really great and clear to understand. I appreciate you giving me your time on this. My thinking with 'All' is if it is selected it clears all the values. I need to think about how 'active' classes work too.
Great. You can use directly $this.toggleClass('active') to add/remove active class to a elements or $li.toggleClass('active') for li elements. If my answer has answered your question, please don't forget to click on the check mark next to the answer.

Lucas Souza · Accepted Answer · 2015-10-14 13:54:46Z

0

You can create an array with the selected values, and than use indexOf to check if the value already been selected. You can also use join to create a string separated by comma.

answered Oct 14, 2015 at 13:54

Lucas Souza

3711 silver badge6 bronze badges

Collectives™ on Stack Overflow

Update input value field on click and checking if exists

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