獲取所有不為空的輸入，使用 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>

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>