Input from Dynamically added text fields are not getting through to the request()->validate() array

Question

I have a form where the user enters their education from Elementary to College. If they want to add any other studies they've done, they can click the "Add Other Studies" button, and a new set of input fields will appear for Other Studies

 {{-- Button --}}
<tr>
        <td scope="col"><button type="button" onclick="addOtherStudies()" name="add-educ-exp" id="ar-educexp" class="btn btn-outline-primary">Add Other Studies</button></td>
</tr>
 {{-- Add Other Studies section --}}
 {{-- .d-none is display:none --}}
 <tr  class="d-none" id="otherStudiesRow">
          <th scope="row"><label for="other">Other Studies</label>
                    <input type="text" name="otherStudies[0]other_studies_name"/>
                    Degree/Major:<input type="text" name="otherStudies[0]other_studies_degree_major" placeholder="Masters Degree, Doctorate, Associate$quos, etc." />
          </th>
            <td>
                   <input type="text" style="width: auto; margin-top: 2rem;" name="otherStudies[0]other_studies_year"/><label for="units">If not complete, enter no. of units taken:</label><input type="text" style="width: auto;" name="otherStudies[0]other_studies_units" cols="10"/>
          </td>
           <td><textarea name="otherStudies[0]other_studies_awards" rows="3" cols="30"></textarea></td</tr>
                                <tr class="d-none" id="otherStudiesbuttons">
                                    <td><button type="button" onclick="addEducation()" name="add-educ-exp" id="ar-educexp" class="btn btn-outline-primary">Add Education</button></td>
                                    <td><button type="button" class="btn btn-outline-danger remove-input-field">Delete</button></td>

                                </tr>

I used the Javascript classList property to display/hide the set of input fields whenever needed dynamicAddRemove.js :

function addOtherStudies(){
    var section = document.getElementById("otherStudiesRow");
    var buttons = document.getElementById("otherStudiesbuttons");

        section.classList.remove("d-none");
        buttons.classList.remove("d-none");

}

However, when I click the button and add in my data, the values in the input fields don't get forwarded to the request()->validate() array: This is my controller:

        $validatedEducExp = request()->validate([
            //education start at 0, length 12
            "elementary_name" => ['nullable','required_with:elementary_year,elementary_awards','max:100',new LetterSpaceOnly],
            "elementary_year" => ['nullable','required_with:elementary_name,elementary_awards',new fromToYearRule],
            "elementary_awards" => ['nullable','required_with:elementary_name,elementary_year','string'],
            "highschool_name" => ['nullable','required_with:highschool_year,highschool_awards','max:100',new LetterSpaceOnly],
            "highschool_year" => ['nullable','required_with:highschool_name,highschool_awards',new fromToYearRule],
            "highschool_awards" => ['nullable','required_with:highschool_name,highschool_year','string'],
            "college_name" => ['nullable','required_with:college_year,college_awards,degree,college_completed,college_awards','max:100',new LetterSpaceOnly],
            "college_year" => ['nullable','required_with:college_name,college_awards,degree,college_completed,college_awards',new fromToYearRule],
            "degree" => ['nullable','required_with:college_name,college_year,college_awards,college_completed,college_awards','alpha','min:4','max:100'],
            "college_completed"=> ['nullable','required_with:college_name,college_year,college_awards,degree,college_awards'],
            "college_units" => ['nullable','digits_between:1,2'],
            "college_awards" => ['nullable','required_with:college_name,college_year,college_awards,degree,college_completed','required_with:elementary_name,elementary_year','string'],

            //other studies start at 12, length 5
            'otherStudies.*.other_studies_name' => ['max:100',new LetterSpaceOnly],
            'otherStudies.*.other_studies_degree_major' => ['alpha','min:4','max:100'],
            'otherStudies.*.other_studies_year' =>  [new fromToYearRule],
            'otherStudies.*.other_studies_units' => ['digits_between:1,2'],
            'otherStudies.*.other_studies_awards' => ['string'],

            //exams start at 17, length 3
            'Exams.*.exam_name' => ['nullable','required_with: exam_grade,exam_date','max:100',new LetterSpaceOnly],
            'Exams.*.exam_grade' => ['nullable','required_with: exam_name,exam_date','digits_between:1,3'],
            'Exams.*.exam_date' =>  ['nullable','required_with: exam_date,exam_name','before_or_equal: today','date'],

            //work exp starts at 20 length 6
            'workExps.*.from' => ['nullable','digits:4'],
            'workExps.*.to' => ['nullable','digits:4'],
            'workExps.*.salary' =>  ['nullable','numeric'],
            'workExps.*.employer_name_address' => ['nullable','max:255','string'],
            'workExps.*.position' => ['nullable','min:5','max:50', new LetterSpaceOnly],
            'workExps.*.reason_for_leaving' =>  ['nullable','string',new LetterSpaceOnly],

            //seminar starts at 26,3
            'Seminars.*.title' => ['nullable','max:100',new LetterSpaceOnly],
            'Seminars.*.date' => ['nullable','before_or_equal: today','date'],
            'Seminars.*.conducted_by' =>  ['nullable','max:100',new LetterSpaceOnly],

            //skills starts 29, 2
            'languages' => ['nullable','max:255',new CommaSpace],
            'hobbies_skills' =>  ['nullable','max:255',new CommaSpace],

            //others info starts 31, length 3
            'blood_type' => ['nullable'],
            'health_problems' => ['nullable', 'max:255',new CommaSpace],
            'convictions' => ['nullable', 'max:255','string']
        ]);

When I enter information in the otherStudies input fields and do a ddd() when save button is clicked, only this appears, and otherStudies array can't be found:

array:19 [▼
  "elementary_name" => null
  "elementary_year" => null
  "elementary_awards" => null
  "highschool_name" => null
  "highschool_year" => null
  "highschool_awards" => null
  "college_name" => null
  "college_year" => null
  "degree" => null
  "college_units" => null
  "college_awards" => null
  "languages" => null
  "hobbies_skills" => null
  "blood_type" => null
  "health_problems" => null
  "convictions" => null
  "Exams" => array:1 [▶]
  "workExps" => array:1 [▶]
  "Seminars" => array:1 [▶]
]

However, when I go back to the page, the entered information gets retained in the otherStudies field due to the old() helper, meaning the information is saved to the session, correct? But is not able to move forward to the validate() function. What's going on?

Answer 1

Change your name of input to

otherStudies[0][other_studies_name]
otherStudies[0][other_studies_degree_major]