javascript - 获取所有不为空的输入，使用 jQuery 检查和选择

Question

我有一个包含一堆问题的多步骤表单（表单向导）（根据所问问题的不同输入）。所有问题都位于其中一个中<div class="form-group" data-question-number="1"></div>（问题编号发生变化）。

我在一个名为questionSequence. 在表格的最后，我想知道每个问题填写了哪些输入。

我正在遍历我知道已回答的问题，但是对于每个问题，是否有一种简单的方法可以知道填写了哪些输入？有些问题是文本输入，有些是复选框，有些是收音机，有些是选择（下拉）......等等。

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?
}

更新

我被要求提供一个可运行的片段，所以这里是一个 Codepen。我已将其简化为问题的核心，我只想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>

标签： javascriptjquery

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>