Check if fields in lots of rows are not empty without form

Check if fields in lots of rows are not empty without form
0

Hi all I need some advice/code help with a problem I am having. Not quite sure which technique to use to solve this.
I have lots of rows in a table each row can have 1-3 fields (dropdowns) and a button. I haven’t wrapped it around a form tag because it only takes the values and stores it in localStorage.
Here’s my problem, when I press a button on any row I need to see if any of the dropdowns were empty, if not get the value using javascript.
What would be a good way to ‘validate’ each row without having to explicitly write down its own validation criteria.
example psuedocode (ish):
If button is pressed check if closest fields are not empty on same row
Here is what the table rows look like as an example:

  <tr>
    <th>options 1</th>
    <th>option 2</th>
    <th>option 3</th>
    <th>button</th>
  </tr>
  <tr>
    <td>
	<select name="option1">
		<option value="" selected>Choose one
		<option value="paper">Paper
    </select>
	</td>
    <td>
	<select name="option2">
		<option value="" selected>Choose one
		<option value="paper">Rock
    </select>
	</td>
    <td>No 3rd o</td>
    <td><input type="button" value="add"></td>
  </tr>
  <tr>
    <td>
	<select name="option1">
		<option value="" selected>Choose one
		<option value="paper">Paper
    </select>
	</td>
    <td>
	<select name="option2">
		<option value="" selected>Choose one
		<option value="paper">Rock
    </select>
	</td>
    <td>
	<select name="option3">
		<option value="" selected>Choose one
		<option value="scissors">Scissors
    </select>
	</td>
    <td><input type="button" value="add"></td>
  </tr>

I suppose I can check on click if any of the closest inputs are empty, however because it could be different number of inputs I am not sure entirely how to validate it.

Any help would be appreciated.

Using your current table structure, you could do something like:

document.querySelector("table").addEventListener("click", ({ target }) => {
  if (target && target.tagName === "INPUT" && target.type === "button") {
    // the parent of the button's parent should be the current row element
    const rowClicked = event.target.parentNode.parentNode;
    // only need table cells that contain dropdowns
    const rowDropdowns = [...rowClicked.querySelectorAll("td > select")];
    // make sure there is at least one dropdown in the row
    if (rowDropdowns.length) {
      if (rowDropdowns.every(dropdown => dropdown.value.length)) {
        console.log("all dropdowns have an option selected");
      } else {
        console.log("one or more dropdowns do not have an option selected");
      }
    } else {
      console.log("selected row does not have any dropdowns");
    }
  }
});

FYI - You are missing </option> tags on all of your dropdown options.

Thank you for that, I will give that a go and see how it goes. Just wondered if an alternate for the arrow function could be used as it isn’t supported in some IE browsers?