How do I add two getElement and a submit button to make one If Statment?

Question

Sumary: I am looking for away to add two seperate getElementbyId and a submit button to an If Statment in order to make it run.

HTML Example:

<form>
  <div>
    <fieldset id="group1">
      <input type="radio" name="type" id="h" value="1111" onclick="func2();" />0 Human</br>
      <input type="radio" name="type" id="r" value="2222" onclick="func2();" />1 Robot</br>
      <input type="radio" name="type" id="a" value="3333" onclick="func2();" />2 Animal</br>
    </fieldset>
  </div>
  <div>
    <fieldset id="group2">
      <input type="radio" name="type" id="c" value="1111" onclick="func2();" />4 Jerry</br>
      <input type="radio" name="type" id="b" value="2222" onclick="func2();" />5 Xr10Zbot</br>
      <input type="radio" name="type" id="z" value="3333" onclick="func2();" />6 Girrafe</br>
    </fieldset>
    <p><input style="width: 60px;" type="submit" name="type" id="f" class="7" value="submit" onclick="func()2;" /></p </div>
</form>

JavaScript Example:

 <script>
    function func2()
            {
                if(document.getElementById("h").checked) 
// I want for the if statment to require you to also have to check c and click submit to run
                {
                    var val = document.getElementById("h").value;
                    alert(val);
                }
                else if(document.getElementById("r").checked)
                {
                    var val = document.getElementById("r").value;
                    alert(val);
                }
                else if(document.getElementById("a").checked)
                {
                    var val = document.getElementById("a").value;
                    alert(val);
                }
            }
        </script>

What I need the if statment to run:

Make it to wher you have to click two radio buttons and submit to run the alert

if(document.getElementById("h").checked) + (document.getElementById("c").checked) + (document.getElementById("f")) 

Answer 1

I don't fully understand what you want to do. I hope my solution will help you.

---

Issue 1

There is a typo in the submit button.

• ❌NG onclick="func()2;"
• ✅OK onclick="func2();"

Issue 2

Radio buttons with the same name attribute belong to one group. Therefore, only one of the six buttons can be turned on. One of the buttons in #group1 and one of #group2 are not turned on at the same time. Change name.

For example,

<fieldset id="group2">
  <input name="type2">
  <input name="type2">
  <input name="type2">
</fieldset>

Issue 3

I think it is a bit difficult to use func2() for all buttons including the submit button. I recommend making another function for it.

---

My solution

This JS doesn't work properly here on the embed snippet. Please copy, paste and run it on an actual editor such as Visual Studio Code.

// Get DOMs
var elementC = document.getElementById('c');
var submitButon = document.getElementById('f');
// Get #group1 radio buttons at once
var group1Buttons = document.querySelectorAll('#group1 [type="radio"]');

// These are needed in If statements
// var elementH = document.getElementById('h');
// var elementR = document.getElementById('r');
// var elementA = document.getElementById('a');

function func2(e) {
  e.stopPropagation();

  // You may use this If statement
  // if (elementH.checked) {
  //   alert(elementH.value);
  // } else if (elementR.checked) {
  //   alert(elementR.value);
  // } else if (elementA.checked) {
  //   alert(elementA.value);
  // }

  // I prefer this one because it's shorter.
  alert(this.value);
}

function func3(e) {
  e.stopPropagation();
  
  if (!elementC.checked) {
    e.preventDefault(); // Stop submitting
    alert(`You need to check ${elementC.getAttribute('data-text')}!!`);
  }
}

// When one of the radio buttons is clicked, executes func2()
group1Buttons.forEach(radio => radio.addEventListener('click', func2, false));

// When the submit button is clicked, executes func3()
submitButon.addEventListener('click', func3, false);

<form>
  <div>
    <!-- Removed onClick="func2()" -->
    <!-- Added required to one of radio buttons -->
    <fieldset id="group1">
      <input type="radio" name="type" id="h" value="1111" required />0 Human</br>
      <input type="radio" name="type" id="r" value="2222" />1 Robot</br>
      <input type="radio" name="type" id="a" value="3333" />2 Animal</br>
    </fieldset>
  </div>
  <div>

    <!-- Removed onClick="func2()" -->
    <!-- Added required to one of radio buttons -->
    <!-- Change name: type => type2 -->
    <!-- Added data-text attribute -->
    <fieldset id="group2">
      <input type="radio" name="type2" data-text="4 Jerry" id="c" value="1111" required />4 Jerry</br>
      <input type="radio" name="type2" id="b" value="2222" />5 Xr10Zbot</br>
      <input type="radio" name="type2" id="z" value="3333" />6 Girrafe</br>
    </fieldset>

    <!-- Removed onClick="func2()" -->
    <p><input style="width: 60px;" type="submit" name="type" id="f" class="7" value="submit" /></p>
  </div>
</form>