Get all inputs that are not empty, checked and selected with jQuery

Question

I have a multi-step form (form wizard) with a bunch of questions (various inputs depending on question being asked). All questions sit in one of these <div class="form-group" data-question-number="1"></div> (where the question number changes).

I keep track of what questions have been answered in an array called questionSequence. At the end of the form, I would like to know what input has been filled for each question.

I am looping through the questions that I know were answered, but then for each, is there an easy way to know what inputs were filled? Some questions are text inputs, others are checkboxes, others are radios, others are selects (drop downs) ... etc.

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

Basically, I am not sure what my getFilledInInputs(questionId) would look like.

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

UPDATE

I was asked to provide a runnable snippet, so here is a Codepen. I've simplified it to the core of the problem, I only want to console.log() the filled in inputs.

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>

If the dupes are not enough, please post a [mcve] where we can see examples what each div contains. More than one field in one div etc — mplungjan, Apr 09 '20 at 06:30
Should I create a new question with the minimal reproducible example? or re-open this one and edit it? — J86, Apr 09 '20 at 07:41
No sadly not, none handle the scenario of getting the input values where the inputs are of varying types. I'll try and create a Codepen stack snippet. — J86, Apr 09 '20 at 07:48
Posted possible dupes: [dupe1](https://stackoverflow.com/questions/8907835/check-all-input-fields-have-been-filled-out-with-jquery) [dupe2](https://stackoverflow.com/questions/16211871/how-to-check-if-all-inputs-are-not-empty-with-jquery) [dupe3](https://stackoverflow.com/questions/14936494/get-all-form-elements-values-using-jquery) — mplungjan, Apr 09 '20 at 08:55

score 0 · Answer 1 · answered Apr 09 '20 at 09:10

Have a look at this

The serialize shows all filled items on name The $(':input').map(function() { if (this.name) return this.name; }).get() gets all names and then the uniqueItems = [...new Set(names)] dedups them

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>

Get all inputs that are not empty, checked and selected with jQuery

1 Answers1