Issue with alerts in a form

Code Help HTML/CSS/JS
1

I have a form where each row has a name and the following columns have the answer choices. I’m having a problem where if anything on choice4 or choice5 is the first to be clicked in the entire form, the warning pops up. It works fine otherwise. This is my function as I tried to repeat it for all my other rows. Should I instead opt for a loop since I want to repeat the warning for every row? Not sure which type to use, in all honesty.

<tr class="candidates">
      <td>Marie Antoniette</td>
        <td> <input type="radio" value="mAnton" name="choice1"  onchange ="sameCand()"></td>
       <td>
        <input type="radio" value="mAnton" name="choice2"  onchange ="sameCand()"> 
       </td>

        <td>
          <input type="radio" value="mAnton" name="choice3" onchange ="sameCand()">
        </td>

        <td>
          <input type="radio" value="mAnton" name="choice4" onchange ="sameCand()">
        </td>

        <td> 
          <input type="radio" value="mAnton" name="choice5" onchange ="sameCand()">
        </td>
        
      </tr>

This is my function

function sameCand() {
  let x = document.forms["ballot2"]["choice5"].value;
  let y = document.forms["ballot2"]["choice4"].value;
  let z = document.forms["ballot2"]["choice3"].value;
  let a = document.forms["ballot2"]["choice2"].value;
  let b = document.forms["ballot2"]["choice1"].value;

  if (x == y || x==z || x==a || x==b) {
    alert("Warning!Each candidate can only be ranked once. ");
    return false;
  }
  else if (y == z || y==a || y==b) {
    alert("Warning!Each candidate can only be ranked once. ");
    return false;
  }
}
2

Hello, @nildaaaj . Welcome 2 the forums!

I have looked through your code.

It looks like the issue is with your sameCand() function that is being called in the onchange attribute of each radio button. It seems like the function is checking whether the fourth or fifth radio button has been clicked first, and if so, displaying a warning.

Assuming that you have similar rows for each candidate, you could indeed use a loop to repeat the same function call for each row. One way to do it is to add a class to each row, e.g. candidate-row, and then use document.querySelectorAll('.candidate-row') to select all the rows and loop through them. Then, for each row, you can find all its radio buttons and attach the onchange event with the sameCand() function.

Here’s an example code snippet in JavaScript that should accomplish this:

const rows = document.querySelectorAll('.candidate-row');

rows.forEach(row => {
  const radios = row.querySelectorAll('input[type="radio"]');
  radios.forEach(radio => {
    radio.addEventListener('change', sameCand);
  });
});

This should attach the sameCand() function to the change event of all radio buttons in each row with the class candidate-row. Hope this helps, ty.

3

Hello! Thank you so much for explaining! I already had the rows be a class called “candidates” as shown in the first line. However, am I still supposed to add "onchange ="sameCand() ) to my radio buttons? When I remove that from my radios the function doesn’t run at all. If I do include it, the same error is occurring of the warning showing up regardless. Should I add an additional if statement to sameCand() ? I don’t understand how to make the warning show up only AFTER 2 choices have been selected.

Thank you again so much for your explanation and help!!!