My form allows users to input their educational background from Elementary school to College. If they wish to include any additional studies, they can click the "Add Other Studies" button, which will then reveal a new set of input fields specifically for other educational experiences.
{{-- 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 utilized the JavaScript classList property to toggle the visibility of the input fields dynamically as needed in this scenario.
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, upon entering data into the added otherStudies input fields and attempting to save it, I noticed that the values are not being transmitted to the request()->validate() array:
This is an excerpt from my controller:
$validatedEducExp = request()->validate([
//education start at 0, length 12
"elementary_name" => ['nullable','required_with:elementary_year,elementary_awards','max:100',new LetterSpaceOnly],
//more validation rules here...
]);
When inspecting the submitted data using ddd(), only partial information shows up with the absence of the 'otherStudies' array, hindering its inclusion in the validation process:
array:19 [▼
"elementary_name" => null
// more fields...
]
Interestingly, when revisiting the page, the inserted data remains in the 'otherStudies' field due to the use of the old() helper function, indicating that the details are stored temporarily in the session but are unable to proceed to the validate() function. What could be causing this issue?