Change text input value with jQuery [closed]

Question

Closed. This question needs to be more focused. It is not currently accepting answers.

Want to improve this question? Guide the asker to update the question so it focuses on a single, specific problem. Narrowing the question will help others answer the question concisely. You may edit the question if you feel you can improve it yourself. If edited, the question will be reviewed and might be reopened.

Closed 10 years ago.

Improve this question

I'm making a newsletter contact form, and in that form the user can check the subjects they want to receive newsletters from.

I want to make a text input where its value will be the value of all the checked boxes, separated with commas.

e.g.: retails, news, manufacturing

I want it to be dynamically, when the user checks a box it appears on the text input at the same moment, and when the user uncheck the box, it desappear at the same moment too, so I think jQuery is the easiest way, I just don't know how to do it.

Any ideas?

Thank you!

I know how to make it to get just one check box value, but not getting a lot of them and separated with commas — Enrique Sampaio
– Enrique Sampaio, Commented Jan 20, 2015 at 17:15
What have you tried so far? Where are you stuck? Do you have some code that you've worked on that's related to this? — jdphenix
– jdphenix, Commented Jan 20, 2015 at 17:15
possible duplicate of JQuery Add Multiple Check Action Values (of Checkboxes) to Input Text — James Thorpe
– James Thorpe, Commented Jan 20, 2015 at 17:16
Sorry, I really searched for the solution before asking but couldn't find it. But yes, it is duplicate :/ — Enrique Sampaio
– Enrique Sampaio, Commented Jan 20, 2015 at 17:37

pumpkinzzz · Accepted Answer · 2015-01-20 17:44:49Z

1

Something like this? (see demo here)

$('input').on('change', function(){
   var res = "";

   $('input:checked').each(function(){
       res += $(this).val()+", ";
   });

   res = res.slice(0,-2);
   $('#result').text(res);
});

edited Jan 20, 2015 at 17:44

answered Jan 20, 2015 at 17:22

pumpkinzzz

2,9852 gold badges20 silver badges34 bronze badges

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

1 Comment

Enrique Sampaio Over a year ago

With the necessary adaptations it worked like a charm! thank you!

indubitablee · Accepted Answer · 2015-01-20 17:28:33Z

1

something like this?

$(document).ready(function() {
    $('.check').on('change', function() {
        var displayVal = '';
        $('.check:checked').each(function() {
            displayVal += $(this).val() + ', ';
        });
        displayVal = displayVal.slice(0,-2);
        $('.display').val(displayVal);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" class="check" value="blue"/> blue<br/>
<input type="checkbox" class="check" value="red"/> red<br/>
<input type="checkbox" class="check" value="white"/> white<br/>
<br/>
<input type="text" class="display" />

answered Jan 20, 2015 at 17:28

indubitablee

8,2262 gold badges27 silver badges50 bronze badges

Comments

Roman Bekkiev · Accepted Answer · 2015-01-20 17:20:31Z

0

$('#my-form').on('change', 'input[type="checkbox"]', function(){
    var vals = [];
    $('#my-form').find('input[type="checkbox"]').each(function(){
         if($(this).checked())){
             vals.push($(this).val());
         }
    });
    $('#my-input').val(vals.join(', '));
});

-- for example

answered Jan 20, 2015 at 17:20

Roman Bekkiev

3,1381 gold badge28 silver badges33 bronze badges

1 Comment

Enrique Sampaio Over a year ago

I see what you did and unsderstand it, but unfortunately it didn't worked to me, I don't know why, but thanks for the help!

Gabriele Petrioli · Accepted Answer · 2015-01-20 17:28:03Z

0

The following will return a string with the values of all checked boxes separated by commas.

var allChecked = $('input[type="checkbox"]:checked').map(function(){
    return this.value
}).get().join(', ');

answered Jan 20, 2015 at 17:28

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

Collectives™ on Stack Overflow

Change text input value with jQuery [closed]

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Linked

Related