Jquery loop through and get the form field values

Question

I have a form like below:

$('.form').submit(function(e) {
    
      e.preventDefault();
      $(this).find('.choices li').each(function() {
      			var $thisChoice = $(this);
  				 	var choiceLabel = $thisChoice.find('.choice-label').val();
         		if( $thisChoice.find('textarea.sub_textarea'))
         		{
                $thisChoice.find('textarea.sub_textarea').each(function() { 
                    var subChoiceNotes=$(this).val();
                    //var subNotesReqChoice=$(this).next('input.requiredNotes[type=checkbox]').val();
                    var subNotesReqChoice=$(this).next('input.requiredNotes[type=checkbox]:checked').val();
                    alert('NoteLabel:'+subChoiceNotes+'&reqNote:'+subNotesReqChoice);
                });
        		}
         
  		});
  
});

<form class="form">
  <div class="choices">
    <ul> 
      <li class="ui-sortable-handle">Add Choice: <input type="text" value="Choice1" class="choice-label">
        <div  class="parentbox">
          <textarea  name="choice_notes" class="sub_textarea" >note1</textarea>
          <input type="checkbox" class="requiredNotes" value="1"  checked>Required?
          <br/>
          <textarea style="display:inline-block; vertical-align:middle;" name="choice_notes" class="sub_textarea" >note2</textarea>
          <input type="checkbox" class="requiredNotes" value="0">Required?
        </div>
      </li>
      <li class="ui-sortable-handle" style="">Add Choice: <input type="text" value="Choice2" class="choice-label">
        <div  class="parentbox">
          <textarea name="choice_notes" class="sub_textarea" >note3</textarea>
          <input type="checkbox" class="requiredNotes" value="1" checked>Required?
          <br/>
          <textarea name="choice_notes" class="sub_textarea" >note4</textarea>
          <input type="checkbox" class="requiredNotes" value="0">Required?
          <br/>
            <textarea  name="choice_notes" class="sub_textarea" >note5</textarea>
          <input type="checkbox" class="requiredNotes" value="1" checked>Required?
          <br/>
        </div>
      </li>
    </ul>
     <input type='submit' class='update' value='submit' />
  </div>
</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<form class="form">
  <div class="choices">
    <ul> 
      <li class="ui-sortable-handle">Add Choice: <input type="text" value="Choice1" class="choice-label">
        <div  class="parentbox">
          <textarea  name="choice_notes" class="sub_textarea" >note1</textarea>
          <label><input type="checkbox" class="requiredNotes" value="1"  checked>Required?</label>
          <br/>
          <textarea style="display:inline-block; vertical-align:middle;" name="choice_notes" class="sub_textarea" >note2</textarea>
          <label><input type="checkbox" class="requiredNotes" value="0">Required?</label>
        </div>
      </li>
      <li class="ui-sortable-handle" style="">Add Choice: <input type="text" value="Choice2" class="choice-label">
        <div  class="parentbox">
          <textarea name="choice_notes" class="sub_textarea" >note3</textarea>
         <label> <input type="checkbox" class="requiredNotes" value="1" checked>Required?</label>
          <br/>
          <textarea name="choice_notes" class="sub_textarea" >note4</textarea>
          <label> <input type="checkbox" class="requiredNotes" value="0">Required?</label>
          <br/>
            <textarea  name="choice_notes" class="sub_textarea" >note5</textarea>
          <label><input type="checkbox" class="requiredNotes" value="1" checked>Required?</label>
          <br/>
        </div>
      </li>
    </ul>
     <input type='submit' class='update' value='submit' />
  </div>
</form>

When the form submits, I want to loop through all the choices in the li tag and store the values in a variable.

I am getting the text area values when loop through the li tag. I want to get the value of checkbox with the text area values. The checkbox value should be the value of checkbox near the text area.

Any help would be appreciated!

Answer 1

Add name attributes to your checkboxes and then use var subNotesReqChoice=$(this).next('input.requiredNotes[type=checkbox]').val(); to get the checkboxes regardless of them been selected or not.

$('.form').submit(function(e) {
    
      e.preventDefault();
      $(this).find('.choices li').each(function() {
      			var $thisChoice = $(this);
  				 	var choiceLabel = $thisChoice.find('.choice-label').val();
            alert('FOR CHOICE:'+choiceLabel);
         		if( $thisChoice.find('textarea.sub_textarea'))
         		{
                $thisChoice.find('textarea.sub_textarea').each(function() { 
                    var subChoiceNotes=$(this).val();
                    var subNotesReqChoice=$(this).next('input.requiredNotes[type=checkbox]').val();
                    alert('NoteLabel:'+subChoiceNotes+'&reqNote:'+subNotesReqChoice);
                });
        		}
         
  		});
  
});

<form class="form">
  <div class="choices">
    <ul> 
      <li class="ui-sortable-handle">Add Choice: <input type="text" value="Choice1" class="choice-label">
        <div  class="parentbox">
          <textarea  name="choice_notes" class="sub_textarea" >note1</textarea>
          <input type="checkbox" name="requiredNotes" class="requiredNotes" value="1"  checked>Required?
          <br/>
          <textarea style="display:inline-block; vertical-align:middle;" name="choice_notes" class="sub_textarea" >note2</textarea>
          <input type="checkbox" name="requiredNotes" class="requiredNotes" value="0">Required?
        </div>
      </li>
      <li class="ui-sortable-handle" style="">Add Choice: <input type="text" value="Choice2" class="choice-label">
        <div  class="parentbox">
          <textarea name="choice_notes" class="sub_textarea" >note3</textarea>
          <input type="checkbox" name="requiredNotes" class="requiredNotes" value="1" checked>Required?
          <br/>
          <textarea name="choice_notes" class="sub_textarea" >note4</textarea>
          <input type="checkbox" name="requiredNotes" class="requiredNotes" value="0">Required?
          <br/>
            <textarea  name="choice_notes" class="sub_textarea" >note5</textarea>
          <input type="checkbox" name="requiredNotes" class="requiredNotes" value="1" checked>Required?
          <br/>
        </div>
      </li>
    </ul>
     <input type='submit' class='update' value='submit' />
  </div>
</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<form class="form">
  <div class="choices">
    <ul> 
      <li class="ui-sortable-handle">Add Choice: <input type="text" value="Choice1" class="choice-label">
        <div  class="parentbox">
          <textarea  name="choice_notes" class="sub_textarea" >note1</textarea>
          <input type="checkbox" name="requiredNotes" class="requiredNotes" value="1"  checked>Required?
          <br/>
          <textarea name="choice_notes" class="sub_textarea" >note2</textarea>
          <input type="checkbox" name="requiredNotes" class="requiredNotes" value="0">Required?
        </div>
      </li>
      <li class="ui-sortable-handle" style="">Add Choice: <input type="text" value="Choice2" class="choice-label">
        <div  class="parentbox">
          <textarea name="choice_notes" class="sub_textarea" >note3</textarea>
          <input type="checkbox" name="requiredNotes" class="requiredNotes" value="1" checked>Required?
          <br/>
          <textarea name="choice_notes" class="sub_textarea" >note4</textarea>
          <input type="checkbox" name="requiredNotes" class="requiredNotes" value="0">Required?
          <br/>
            <textarea  name="choice_notes" class="sub_textarea" >note5</textarea>
          <input type="checkbox" name="requiredNotes" class="requiredNotes" value="1" checked>Required?
          <br/>
        </div>
      </li>
    </ul>
     <input type='submit' class='update' value='submit' />
  </div>
</form>