How to write all input types values in span on change using javascript/jquery?

Question

i have a list of input types, a combination of <input type="checkbox"> and <input type="text">

whenever i select a checkbox, it will place its value to

<span name="products" id="products"></span>

separated by a comma.

But i don't know how to include the value of <input type="text" /> so whenever i input a value, it will also add its value to

<span name="products" id="products"></span>

Please help me. My Code:

Javascript

$(function() {
  $('input[name=selectProducts]').on('change', function() {    
    $('#products').text($('input[name=selectProducts]:checked').map(function() {
      return this.value;
    }).get());
  });
});

HTML

<input type="checkbox" name="selectProducts" id="product1" value="product1" />
<input type="checkbox" name="selectProducts" id="product2" value="product2" />
<input type="checkbox" name="selectProducts" id="product3" value="product3" />
<!-- i want to include these input type text -->
<input type="text" name="selectProducts" id="product4" value="product4" />
<input type="text" name="selectProducts" id="product5" value="product5" />
<span name="products" id="products"></span>

OUTPUT

product1,product2,product3,product4,product5

The only working here is the checkbox. Please help me to do in the input text.

Answer 1

You should add type=text inputs to jquery selector.

$('input[name=selectProducts]:checked, input[name=selectProducts][type=text]')

So your code should changed to

$('input[name=selectProducts]').on('change', function() {
    $('#products').text($('input[name=selectProducts]:checked, input[name=selectProducts][type=text]').map(function() {
        return this.value;
    }).get());
});

$('input[name=selectProducts]').on('change keyup', function() {
  $('#products').text($('input[name=selectProducts]:checked, input[name=selectProducts][type=text]').map(function() {
    return this.value;
  }).get());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="selectProducts" id="product1" value="product1" />
<input type="checkbox" name="selectProducts" id="product2" value="product2" />
<input type="checkbox" name="selectProducts" id="product3" value="product3" />
<input type="text" name="selectProducts" id="product4" value="product4" />
<input type="text" name="selectProducts" id="product5" value="product5" />
<span name="products" id="products"></span>