jQuery pass data from map function to input and span

Question

I have bunch of checkboxes. I want to get values from them and pass it to span and hidden input. When I click one checkbox it works fine. But when I click more than one checkbox it pass me only last value. What's wrong? Please help me with that. And other question. Is it proper to use input or textarea to store multiple values?

    function t() {
        $('input[type="checkbox"]:checked').map(function(){
            var dataAttr = $(this).attr('name');
            var dataAttrVal = $(this).val();
            $('input[name="' + dataAttr + '-value"]').val(dataAttrVal);
            $('#summary_' + dataAttr).html(dataAttrVal);
            console.log(dataAttr);
            console.log(dataAttrVal);
        }).get().join();
    };   

    $('input[type="checkbox"]').on('click', function(){
        t();
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="sause" id="sause-garlic" value="Sos czosnkowy" class="sause">                        
                                <label for="sause-garlic">garlic</label>
                                <input type="checkbox" name="sause" id="sause-tabasco" value="Sos tabasco" class="sause">                        
                                <label for="sause-tabasco">tabasco</label>                               
<br>
                                <input type="checkbox" name="vegies" id="vegies-tomato" value="Tomato" class="vegies">                        
                                <label for="vegies-tomato">tomato</label>

                                <input type="checkbox" name="vegies" id="vegies-tomato" value="potato" class="vegies">                        
                                <label for="vegies-tomato">potato</label>


<input type="text" name="sause-value">
<input type="text" name="vegies-value">                      

<span id="summary_sause" class="summary"></span>
  <span id="summary_vegies" class="summary"></span>

Racil Hilan · Accepted Answer · 2017-12-31 15:26:21Z

1

When you use the .html() method, you're basically overwriting everything that is there. You can replace the line:

$('#summary_' + dataAttr).html(dataAttrVal);

With:

var s = $('#summary_' + dataAttr);
s.html(s.html() + dataAttrVal);

Alternatively, you can use the .append() method to add to the existing value:

$('#summary_' + dataAttr).append(dataAttrVal);

This the answer to your question, but you have many other issues in your code that you need to fix. I will let you explore them by yourself and if you face some difficulties, post a new answer and we will help you.

As for your second question: Is it proper to use input or textarea to store multiple values? Generally, it's not a good idea, but it can be OK in some scenarios. We need to know your exact scenario and requirements in order to give a good advice.

answered Dec 31, 2017 at 15:26

Racil Hilan

25.4k13 gold badges56 silver badges61 bronze badges

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

4 Comments

MMPL1 Over a year ago

I have some kind of form with checkboxes. I want to pass values to hidden inputs in my form and pass the form next. And what issues did you see in my code?

Racil Hilan Over a year ago

Choose one of the options I gave you, update your code, and run it to see if it works as you want. If you find things that you want to behave differently, then those are the issues. Try to fix them and if you face some difficulties, post them in a new question and we will help you.

MMPL1 Over a year ago

I see. But your code work flawless! Maybe there's one thing to fix, pass data to texarea but I think I can fix it by myself. Thank you

Racil Hilan Over a year ago

OK, that's great! Good luck!

Collectives™ on Stack Overflow

jQuery pass data from map function to input and span

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related