Jquery: Append a Form Input Value (.val)

Question

I am trying trying to write a string of multiple values depending on whether specific checkboxes are checked. i.e.

$('#submit').click(function() {
  if ($('#box1').attr('checked')) {
    $('#MyInput').val('box1 ');
    alert('1');
  }

  if ($('#box2').attr('checked')) {
    $('#MyInput').val('box2 ');
    alert('2');
  }
});

The return I am looking for in this case would be '1 2', however only the second value is written in the input field.

The alerts tell me that both events in the argument are firing. Is there another method for appending values?

possible duplicate of [Is it possible to do ".value +=" in JQuery?](http://stackoverflow.com/questions/1224133/is-it-possible-to-do-value-in-jquery) — Ciro Santilli OurBigBook.com, Aug 26 '14 at 15:02

Gabriele Petrioli · Accepted Answer · 2011-06-14T23:52:43.407

The .val() does not append.. it sets the value to whatever you pass, overwriting the previous value.

$('#submit').click(function() {

var myInput = $('#MyInput').val('')[0];


if($('#box1').attr('checked')){
    myInput.value += 'box1 ';
    alert('1');
    }

if($('#box2').attr('checked')){
     myInput.value += 'box2 ';
    alert('2');
    }

else {}

});

And if you have multiple checkboxes that you want all of their values added to the myInput element if they are checked you can add a class to all of them and just do

$('#submit').click(function() {
  var myInput = $('#MyInput').val('')[0];
  $('.common-class-to-all:checked').each(function(){
     myInput.value += this.value + ' ';
  });
});

demo http://jsfiddle.net/SQcGq/

roberkules · Answer 2 · 2011-06-14T23:55:10.823

1

I suppose it's a typo? In the first if you check the "checked" value, in the second if you check for the "checked" attribute

In case you use jQuery 1.6+ you should use $('#box1').prop("checked")

Check/modify this demo: http://jsfiddle.net/roberkules/45WgD/

$('#submit').click(function() {

    var values = [];
    $("#box1, #box2").filter(":checked").each(function(i, box){
        values.push($(box).attr("id"));
    });

    $('#MyInput').val(values.join(" "));

});

edited Jun 14 '11 at 23:55

answered Jun 14 '11 at 23:41

roberkules

6,557
2
44
52

thanks for catching that. typo was in the question only. edited. – pac Jun 14 '11 at 23:43
did the prop() fix it or still an issue? – roberkules Jun 14 '11 at 23:45

score 1 · Answer 3 · edited May 23 '17 at 12:31

1

Give the boxes a class like boxes, and use the map()^[docs] method to get a collection of the values, the get()^[docs] method to convert it to an Array, and .join() to join them into a string.

Then set the resulting string once as the value using the val()^[docs] method.

$('#submit').click(function() {

    var values = $('.boxes').map(function() {
        return this.checked ? this.id : '';
    }).get().join(' ');

    $('#MyInput').val( values );

});

EDIT: The requirement was to use a string equal to the ID for the result. Fixed. Thanks to @Bryan for the heads up.

edited May 23 '17 at 12:31

Community

1
1

answered Jun 14 '11 at 23:44

user113716

318,772
63
451
440

+1 I like this solution. The only thing I'd change is that I think he's using the IDs here, so you could do `return this.id` instead. Nitpicking, though. – brymck Jun 14 '11 at 23:52

score 1 · Answer 4 · answered Jun 14 '11 at 23:44

You're replacing the value of MyInput each time. .val does not add on to the value of the input field, it replaces it.

var value = [];

if ($('#box1').prop('checked')) {
  value.push('box1');
}

if ($('#box2').prop('checked')) {
  value.push('box2');
}

$("#MyInput").val(value.join(' '));

score 0 · Answer 5 · answered Jun 14 '11 at 23:47

0

Doing $('#MyInput').val('box1 '); overwrites the value of the textbox, which is why you're only seeing the second value, this should work:

$('#submit').click(function() {

  var new_val = '';

  if($('#box1').is(':checked')){
    new_val += 'box1 ';
  }

  if($('#box2').is(':checked')){
    new_val += 'box2 ';
  }

  $('#MyInput').val(new_val);

else {}

});

answered Jun 14 '11 at 23:47

Ant

3,877
1
15
14

works great thanks! but Gaby anticipated my need for multiple check boxes below. – pac Jun 15 '11 at 15:29

Jquery: Append a Form Input Value (.val)

5 Answers5