Below is a sample tr:
<tr>
<td><input type="text" class="ingredient required" name="ingredient"></td>
<td><input type="number" class="amount required" name="amount" ></td>
<td><input type="number" class="carrier required" name="carrier" max="100"></td>
<td><input type="number" class="kilo required" name="kilo"></td>
<td><select class="tableDropDown" style="min-width: 100px;">
<option value="other">The Manufacturer</option>
<option value="me">Me</option>
</select></td>
<td><input class="packSize" type="number" disabled></td>
</tr>
<button type="submit" class="analyze">Analyze</button>
If the select value (.tableDropDown) is set to "me", I would like to add the class .required to .packSize, as it's used for form validation.
I have attempted to achieve this with jQuery and the addClass method, but so far it hasn't been successful. Here's what my code looks like:
$(".tableDropDown").on('change', function () {
var packSize = $(this).parents('.formulaRow').find('.packSize');
if ($(this).val() === "me") {
$(packSize).prop('disabled', false);
$(packSize).addClass(".required");
} else {
$(packSize).prop('disabled', true);
$(packSize).parents('td').removeClass("redClass");
}
if ($(this).val() === "me" && $(packSize).val() === "") {
$(packSize).parents("td").addClass("redClass");
}
});
The validation function being used is as follows:
$(".analyze").click(function() {
var counter = 0;
$(".required").each(function() {
if ($(this).val() === "") {
$(this).parents("td").addClass("redClass");
counter++;
}
});
if (counter > 0){
alert("Looks like some of the fields aren't filled out correctly. They're highlighted in red.");
}
The CSS snippet redClass highlights the td in red to indicate errors after clicking submit.
This approach works for other cells, but for some reason, the addClass method isn't successfully adding the required class to .packSize. I'm currently troubleshooting this issue.