Получить все входные данные, которые не пусты, проверены и выбраны с помощью jQuery

Question

У меня есть многошаговая форма (мастер форм) с кучей вопросов (различные входы в зависимости от задаваемого вопроса). Все вопросы находятся в одном из этих <div class="form-group" data-question-number="1"></div> (где номер вопроса меняется).

Я отслеживаю, какие вопросы были даны ответы в массиве под названием questionSequence. В конце формы я хотел бы знать, какие данные были заполнены для каждого вопроса.

Я перебираю ответы на вопросы, на которые, как я знаю, были даны ответы, но для каждого из них есть простой способ знаете, какие входы были заполнены? Некоторые вопросы - это ввод текста, другие - флажки, другие - rad ios, другие - выбор (выпадающие списки) ... et c.

for (var i = 1; i < questionSequence.length; i++) {
  let questionId = questionSequence[i];
  let filledInInputs = getFilledInInputs(questionId);
}

В принципе, я не уверен, что мой getFilledInInputs(questionId) будет выглядеть так.

const getReadItemsForQuestion = questionId => {
  // questionId is a string e.g. "1"
  let questionParentDiv = getQuestionBlockAsJqueryObject(questionId);

  // now that I have the parent div, is there an easy way to get all
  // filled in inputs no matter the input type?
}

ОБНОВЛЕНИЕ

Меня попросили предоставить исполняемый фрагмент, поэтому вот кодекс . Я упростил его до сути проблемы, я хочу только console.log() заполненных входных данных.

let questionSequence = ["1", "3", "4", "16"];

$(".process-btn").click(function() {
  for (var i = 0; i < questionSequence.length; i++) {
    let questionId = questionSequence[i];
    let questionParentDiv = getQuestionBlockAsJqueryObject(questionId);
    let questionInputs = questionParentDiv.find(":input");
    let filledInQuestionInputs = questionInputs.filter(function() {
      let thisVal = $(this);
      let inputValue = thisVal.val();
      return $.trim(inputValue).length !== 0
    });

    // filledInQuestionInputs should be an object with only be the filled in inputs 
    console.log(filledInQuestionInputs);
  }
});

const getQuestionBlockAsJqueryObject = activeQuestionId => {
  return $(`[data-question-number='${activeQuestionId}']`);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group" data-question-number="1" data-read-label="Service type">
  <fieldset class="fieldset" aria-describedby="example-hint">
    <legend class="fieldset__legend fieldset__legend--l">
      <h1 class="fieldset__heading">
        What service type are you?
      </h1>
    </legend>

    <select class="select" data-next-question="2" data-val="true" data-val-number="The field Setting must be a number." data-val-required="The Setting field is required." id="SettingId" name="SettingId" required="true">
      <option value="1">999</option>
      <option value="2">111</option>
      <option value="3">Out of Hours (OOH)</option>
      <option value="4">Reception Point (RP)</option>
      <option value="6">Dental service</option>
    </select>
  </fieldset>
</div>

<div class="form-group" data-question-number="3" data-read-label="Type of enquiry">
  <fieldset class="fieldset" aria-describedby="example-hint">
    <legend class="fieldset__legend fieldset__legend--l">
      <h1 class="fieldset__heading">
        What is the nature of your enquiry?
      </h1>
    </legend>

    <div class="radios">
      <div class="radios__item">
        <input class="radios__input" data-next-question="5" data-val="true" data-val-required="The NatureOfEnquiry field is required." id="RequestForChange" name="NatureOfEnquiry" type="radio" value="RequestForChange">

        <label class="label radios__label" for="RequestForChange">A request for change</label>

      </div>

      <div class="radios__item">
        <input class="radios__input" data-next-question="5" id="SharedLearning" name="NatureOfEnquiry" type="radio" value="SharedLearning" checked>

        <label class="label radios__label" for="SharedLearning">A submission for shared learning</label>

      </div>

      <div class="radios__item">
        <input class="radios__input" data-next-question="5" id="Information" name="NatureOfEnquiry" type="radio" value="Information">

        <label class="label radios__label" for="Information">Requesting further information</label>

      </div>
    </div>
  </fieldset>
</div>

<div class="form-group" data-question-number="4" data-read-label="Is Regulation 28">
  <fieldset class="fieldset" aria-describedby="example-hint">
    <legend class="fieldset__legend fieldset__legend--l">
      <h1 class="fieldset__heading">
        Does the enquiry relate to a Regulation 28?
      </h1>
    </legend>

    <div class="radios">
      <div class="radios__item">
        <input class="radios__input" data-next-question="32" id="regulation-1" name="IsRegulationTwentyEight" type="radio" value="True">

        <label class="label radios__label" for="regulation-1">Yes</label>
      </div>

      <div class="radios__item">
        <input class="radios__input" data-next-question="32" id="regulation-2" name="IsRegulationTwentyEight" checked type="radio" value="False">

        <label class="label radios__label" for="regulation-2">No</label>
      </div>
    </div>
  </fieldset>
</div>

<div class="form-group" data-question-number="16" data-read-label="Enquiry relates to">
  <fieldset class="fieldset" aria-describedby="area-hint">
    <legend class="fieldset__legend fieldset__legend--l">
      <h1 class="fieldset__heading">
        Does your enquiry relate to any of the following?
      </h1>
    </legend>

    <div class="checkboxes">
      <div class="checkboxes__item">
        <input class="checkboxes__input" id="site-section-1" name="SiteSections[]" type="checkbox" value="1" data-next-question="18">
        <label class="label checkboxes__label" for="site-section-1">
                    Care Advice
                </label>
      </div>

      <div class="checkboxes__item">
        <input class="checkboxes__input" id="site-section-2" name="SiteSections[]" type="checkbox" value="2" data-next-question="18">
        <label class="label checkboxes__label" for="site-section-2">
                    Disposition
                </label>
      </div>

      <div class="checkboxes__item">
        <input class="checkboxes__input" id="site-section-3" name="SiteSections[]" type="checkbox" value="3" data-next-question="18">
        <label class="label checkboxes__label" for="site-section-3">
                    Pathway
                </label>
      </div>

      <div class="checkboxes__item">
        <input class="checkboxes__input" id="site-section-4" name="SiteSections[]" type="checkbox" value="4" data-next-question="18">
        <label class="label checkboxes__label" for="site-section-4">
                    Question
                </label>
      </div>

      <div class="checkboxes__item">
        <input class="checkboxes__input" checked id="site-section-5" name="SiteSections[]" type="checkbox" value="5" data-further-info="true">
        <label class="label checkboxes__label" for="site-section-5">
                    Other
                </label>
      </div>
    </div>
  </fieldset>

  <fieldset class="fieldset fieldset--last" aria-describedby="area-hint">
    <label class="label" for="other-section">
            Can you provide further details?
        </label><br />

    <textarea class="textarea js-character-count" cols="20" data-char-limit="200" data-next-question="18" id="other-section" name="OtherSection" rows="5">Some lorem ipsum</textarea>
  </fieldset>
</div>

<button class="process-btn">Process</button>

Answer 1

Посмотрите на это

Сериализация показывает все заполненные элементы на имя. $(':input').map(function() { if (this.name) return this.name; }).get() получает все имена, а затем uniqueItems = [...new Set(names)] выводит их

let questionSequence = ["1", "3", "4", "16"];

$("#myForm").on("submit", function(e) {
  e.preventDefault();
  const inputFilled = $(this).serialize().split("&")
  const nofInputFilled = inputFilled.length;

  let names = $(':input').map(function() { if (this.name) return this.name; }).get();
  let uniqueItems = [...new Set(names)]
  console.log(nofInputFilled,inputFilled)
  console.log(uniqueItems,uniqueItems.length)

  for (var i = 0; i < questionSequence.length; i++) {
    let questionId = questionSequence[i];
    let questionParentDiv = getQuestionBlockAsJqueryObject(questionId);
    let questionInputs = questionParentDiv.find(":input");
    let filledInQuestionInputs = questionInputs.filter(function() {
      let thisVal = $(this);
      let inputValue = thisVal.val();
      return $.trim(inputValue).length !== 0
    });

    // filledInQuestionInputs should be an object with only be the filled in inputs 
    //    console.log(filledInQuestionInputs);
  }
});

const getQuestionBlockAsJqueryObject = activeQuestionId => {
  return $(`[data-question-number='${activeQuestionId}']`);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
  <div class="form-group" data-question-number="1" data-read-label="Service type">
    <fieldset class="fieldset" aria-describedby="example-hint">
      <legend class="fieldset__legend fieldset__legend--l">
        <h1 class="fieldset__heading">
          What service type are you?
        </h1>
      </legend>

      <select class="select" data-next-question="2" data-val="true" data-val-number="The field Setting must be a number." data-val-required="The Setting field is required." id="SettingId" name="SettingId" required="true">
        <option value="1">999</option>
        <option value="2">111</option>
        <option value="3">Out of Hours (OOH)</option>
        <option value="4">Reception Point (RP)</option>
        <option value="6">Dental service</option>
      </select>
    </fieldset>
  </div>

  <div class="form-group" data-question-number="3" data-read-label="Type of enquiry">
    <fieldset class="fieldset" aria-describedby="example-hint">
      <legend class="fieldset__legend fieldset__legend--l">
        <h1 class="fieldset__heading">
          What is the nature of your enquiry?
        </h1>
      </legend>

      <div class="radios">
        <div class="radios__item">
          <input class="radios__input" data-next-question="5" data-val="true" data-val-required="The NatureOfEnquiry field is required." id="RequestForChange" name="NatureOfEnquiry" type="radio" value="RequestForChange">

          <label class="label radios__label" for="RequestForChange">A request for change</label>

        </div>

        <div class="radios__item">
          <input class="radios__input" data-next-question="5" id="SharedLearning" name="NatureOfEnquiry" type="radio" value="SharedLearning" checked>

          <label class="label radios__label" for="SharedLearning">A submission for shared learning</label>

        </div>

        <div class="radios__item">
          <input class="radios__input" data-next-question="5" id="Information" name="NatureOfEnquiry" type="radio" value="Information">

          <label class="label radios__label" for="Information">Requesting further information</label>

        </div>
      </div>
    </fieldset>
  </div>

  <div class="form-group" data-question-number="4" data-read-label="Is Regulation 28">
    <fieldset class="fieldset" aria-describedby="example-hint">
      <legend class="fieldset__legend fieldset__legend--l">
        <h1 class="fieldset__heading">
          Does the enquiry relate to a Regulation 28?
        </h1>
      </legend>

      <div class="radios">
        <div class="radios__item">
          <input class="radios__input" data-next-question="32" id="regulation-1" name="IsRegulationTwentyEight" type="radio" value="True">

          <label class="label radios__label" for="regulation-1">Yes</label>
        </div>

        <div class="radios__item">
          <input class="radios__input" data-next-question="32" id="regulation-2" name="IsRegulationTwentyEight" checked type="radio" value="False">

          <label class="label radios__label" for="regulation-2">No</label>
        </div>
      </div>
    </fieldset>
  </div>

  <div class="form-group" data-question-number="16" data-read-label="Enquiry relates to">
    <fieldset class="fieldset" aria-describedby="area-hint">
      <legend class="fieldset__legend fieldset__legend--l">
        <h1 class="fieldset__heading">
          Does your enquiry relate to any of the following?
        </h1>
      </legend>

      <div class="checkboxes">
        <div class="checkboxes__item">
          <input class="checkboxes__input" id="site-section-1" name="SiteSections[]" type="checkbox" value="1" data-next-question="18">
          <label class="label checkboxes__label" for="site-section-1">
                    Care Advice
                </label>
        </div>

        <div class="checkboxes__item">
          <input class="checkboxes__input" id="site-section-2" name="SiteSections[]" type="checkbox" value="2" data-next-question="18">
          <label class="label checkboxes__label" for="site-section-2">
                    Disposition
                </label>
        </div>

        <div class="checkboxes__item">
          <input class="checkboxes__input" id="site-section-3" name="SiteSections[]" type="checkbox" value="3" data-next-question="18">
          <label class="label checkboxes__label" for="site-section-3">
                    Pathway
                </label>
        </div>

        <div class="checkboxes__item">
          <input class="checkboxes__input" id="site-section-4" name="SiteSections[]" type="checkbox" value="4" data-next-question="18">
          <label class="label checkboxes__label" for="site-section-4">
                    Question
                </label>
        </div>

        <div class="checkboxes__item">
          <input class="checkboxes__input" checked id="site-section-5" name="SiteSections[]" type="checkbox" value="5" data-further-info="true">
          <label class="label checkboxes__label" for="site-section-5">
                    Other
                </label>
        </div>
      </div>
    </fieldset>

    <fieldset class="fieldset fieldset--last" aria-describedby="area-hint">
      <label class="label" for="other-section">
            Can you provide further details?
        </label><br />

      <textarea class="textarea js-character-count" cols="20" data-char-limit="200" data-next-question="18" id="other-section" name="OtherSection" rows="5">Some lorem ipsum</textarea>
    </fieldset>
  </div>

  <button type="submit" class="process-btn">Process</button>
</form>