Передавать значение из input в другой input

Как передать текст из нескольких input вместе с placeholder? Чтобы было: Цвет: ...., Фасон: ...., Сейчас передается всегда только placeholder из первого input

var fields = $('#quiz-forms').find('.quiz-form');
  fields.on('change keyup', function(){
    var tags = [];
    fields.each(function(){
      if ($(this).val().length)
      {
        tags.push($(this).val());
      }
    });
    $('#SendInput', '#quiz-forms').val($('.quiz-form').attr('placeholder')+tags.join(', '));
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="quiz-forms">
<input type="text"  class="form-control quiz-form"  placeholder="Цвет: "/><br/>
<input type="text"  class="form-control quiz-form"  placeholder="Фасон: "/><br/>

<input type="" name="SendInput" id="SendInput" value="" />
</form>


Ответы (1 шт):

Автор решения: Quazimorda

Самый простой способ, как по мне, написать так:

    let fields = $('#quiz-forms').find('.quiz-form');
    fields.on('change keyup', function(){
        let tags = [];
        fields.each(function(){
            if ($(this).val().length)
            {
                tags.push($(this).attr('placeholder') + ' ' + $(this).val());
            }
        });
        $('#SendInput', '#quiz-forms').val(tags.join(', '));
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <form id="quiz-forms">
        <input type="text" class="form-control quiz-form" placeholder="Цвет: " /><br />
        <input type="text" class="form-control quiz-form" placeholder="Фасон: " /><br />

        <input type="" name="SendInput" id="SendInput" value="" />
    </form>

То есть вы сразу в результирующий массив сохраняете плейсхолдеры и значения, если текущий input у вас не пустой.

→ Ссылка