Html "Double" Select required

Question

Html "Double" Select required

Navigation

#1 by (1 votes)

0

Hello, I am trying to make a form in the html where it contains TWO selects required, however I will use only one at a time, that is when I select the other required should pass "beaten". The structure is as follows:

<form>
  <select required>//se esse for selecionado não precisaria selecionar o outro
    <option value="">
    <option value="1">1</option>
    <option value="2">2</option>
  </select>
  <select required>//da mesma forma se esse for selecionado o outro não precisa ser também.
    <option value="3">3</option>
    <option value="4">4</option>
  </select>
</form>

The result of this code does not let me select only 1 select, I must select both to work, ie I would like a structure in the logic style "OR" and not "AND" as it happens here. If you have any way to do this without JS it would be even better.

OBS: Yes, I need two SELECTS to do this for the sake of intuitiveness.

javascript html html5

asked by anonymous 15.01.2018 / 12:34

1 answer

Problems with mod_rewrite in Apache I can not create the connection to the bank in my php file

score 1 · Accepted Answer

The only solution I know is through Javascript.

I created a method that will be executed every time one of your select is changed, it will get id and value elemento changed.

If the% changed% has value then the other elemento will lose its obligation.

Here's an example:

function removeObrigatoriedade(id, valor){
  var lista1 = document.getElementById("lista1");
  var lista2 = document.getElementById("lista2");
  
  if(id=="lista1" && valor != ""){
    lista1.required = true;
    lista2.required = false;
  }
  
  if(id=="lista2" && valor != ""){
    lista2.required = true;
    lista1.required = false;
  }
  
}

<form action="#">
  <select name="lista1" id="lista1" required onchange="removeObrigatoriedade(this.id, this.value)">
    <option value="">
    <option value="1">1</option>
    <option value="2">2</option>
  </select>
  <select name="lista2" id="lista2" required onchange="removeObrigatoriedade(this.id, this.value)">
    <option value="">
    <option value="3">3</option>
    <option value="4">4</option>
  </select>
  
  
  <button type="submit" name="enviar" id="enviar">Enivar</button>
</form>