Either one of two buttons on form needs to be clicked-CodePudding

I have two button on a form which look as follows:

<button name="option" id="option" value="A"  onclick="storeTime()" > Select Option A</button>

<button  name="option" id="option" value="B"  onclick="storeTimeB()" > Select Option B</button>

They share id such that if the user clicks one of them then the variable option takes in either the value A or B. The page where the form is has a timer and I would like that, when the countdown is finished, the form does not submit if non of the buttons is pressed. The way I tried to achieve this is by putting the following on a script:

document.getElementById("option").required=true

Unfortunately, that does not do the job. Does anyone have a better option? Thank you!

CodePudding user response：

The HTML id attribute is used to specify a unique id for an HTML element. You cannot have more than one element with the same id in an HTML document. Using follows method.

document.getElementsByClassName('className');

CodePudding user response：

If you really want to use buttons for this, you should use something like a classname or other attribute. ID's are meant to be unique for each element. Here's an example using a classname and document.querySelectorAll

let storedVal = ''
document.querySelectorAll('.option-btn').forEach(btn => btn.addEventListener('click', e => {
  storedVal = e.target.value;
}))

function submit() {
  console.log('storedVal:', storedVal);
  if (storedVal == '') {
    console.log('no value');
    return;
  }
}

<button value="A" > Select Option A</button>

<button value="B" > Select Option B</button>

<hr>

<button value="B"  onclick="submit()"> Submit</button>

CodePudding user response：

Use radio buttons as someone suggested or you can add event listeners like this:

<div >
  <div  value="house">
    <p>House</p>
  </div>
   <div  value="flat">
    <p>flat</p>
  </div>
   <div  value="apartment">
    <p>apartment</p>
  </div>
</div>

var housing = document.getElementsByClassName("content-each");

for (let i = 0; i < housing.length; i  ) {
  housing[i].addEventListener("click", function() {
    var value = housing[i].getAttribute("value");
    console.log("Seleted: "   value);
  });
}

https://codepen.io/tovape/pen/xxWEBPK

CodePudding user response：

It's not recommended to share IDs to multiple elements, but this is a simple example of how to do it.

        let btns = document.querySelectorAll('#option');
        let selectedValue = '';
        btns.forEach(function (btn) {
            btn.addEventListener('click', function (e) {
                let option = e.target.value;
                selectedValue = option;
            });
        });

        document.getElementById('myform').addEventListener('submit', function (e) {
            if (selectedValue === '') {
                alert('Please select an option');
                e.preventDefault();
            } else {
                alert('You selected '   selectedValue);
            }

        });

    <form method="post" id="myform">
        <button name="option" id="option" value="A"> Select Option A</button>
        <button name="option" id="option" value="B"> Select Option B</button>
        <input type="submit" name="submit" value="Submit" />
    </form>

Also, you can use radio buttons instead of buttons.

 let options = document.querySelectorAll('.option');
        let selectedValue = '';

        document.getElementById('myform').addEventListener('submit', function (e) {
            options.forEach(function (option) {
                if (option.checked) {
                    selectedValue = option.value;
                }
            });
            if (selectedValue === '') {
                alert('Please select an option');
                e.preventDefault();
            } else {
                alert('You selected '   selectedValue);
            }

        });

    <form method="post" id="myform">
        <input type="radio"  name="radio" value="A" required> SELECT A
        <br>
        <input type="radio"  name="radio" value="B" required> SELECT B
        <br>
        <input type="submit" name="submit" value="Submit" />
    </form>