Making a prompted warning within a form that looks like a table

Code Help HTML/CSS/JS
1

I have a form, and I want an alert to pop up whenever the same answer was picked multiple times. My radio buttons are in a table, and the warning should appear if the same name was picked across a row.

This is how my table is organized

<tr class="candidates">
        <td>Mark Twain</td>
        <td> <input type="radio" value="mTwain" name="choice1" ></td>
       <td>
        <input type="radio" value="mTwain" name="choice2"> 
       </td>

        <td>
          <input type="radio" value="mTwain" name="choice3">
        </td>

        <td>
          <input type="radio" value="mTwain" name="choice4">
        </td>

        <td>
          <input type="radio" value="mTwain" name="choice5">
        </td>
        
      </tr>

This is the function I tried.

function sameCand() {
  let x = document.forms["ballot2"]["choice5"].value;
  let y = document.forms["ballot2"]["choice4"].value;
  if (x == y) {
    alert("Warning! Candidates may only be chosen once. ");
    return false;
  }
}
2

Make sure to add your function to the radio buttons, or else the function won’t run.

<input type="radio" value="mTwain" name="choice4">

and

<input type="radio" value="mTwain" name="choice5">

should become

<input type="radio" value="mTwain" name="choice4" onchange="sameCand()">

and

<input type="radio" value="mTwain" name="choice5" onchange="sameCand()">
3

This helped thank you so much!!! However now 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. Do you think you could help me out again? This is my function as I tried to repeat it for all my other rows.

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;
  }
}
4

Sure!

The problem is that when you change choice 4 or choice 5, the function is called, and the choice that you did not click (either 4 or 5) will remain with a value of false, but then the other buttons are also false, so then you code will say “hey! false = false!” and then create the alert.

Also, by default, radio buttons in the same “group” (they share the same name) will only allow one of them to be selected, so you would be able to fix this whole issue without Javascript by rewriting the buttons like this:

<input type="radio" value="choice1" name="mTwain">

Another problem is that this won’t solve the issue of people being able to choose the same rank for multiple candidates. The solution for this would be to use <select> tags like so:

<select name="rank" id="rank">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>

You would need one of these for each person you are rating, and would need to write some Javascript code that removes ratings that have already been assigned.

5

I think I understand the flaw in my sameCand() function now, thank you !!!