How to enable and disable button from onclick or select onchange

Navigation
1

I've already done this with the radio button, but I'm having trouble doing this from a select. When selecting any employee, you must enable and when you select that it represents no employee, it will disable the button. 

<form action="questao2.php" method="post">
   <fieldset>
      <select>
        <option name="ativo" value="--" onchange="if(document.getElementById('avancar').disabled==false){document.getElementById('avancar').disabled=true}"/> --</option>
        <option name="ativo" value="FUNCIONARIO1" onchange="if(document.getElementById('avancar').disabled==true{document.getElementById('avancar').disabled=false}"/>FUNCIONÁRIO 1</option>
     </select>
 <button id="avancar" type="submit" disabled="disabled" class="btn btn-primary pull-right" >Avançar</button>

</fieldset>
</form>

<form action="teste.php" method="post">
  <fieldset> Sim ou não? <label class="radio">
      <input name="ativo" type="radio" value="SIM" onclick="if(document.getElementById('avancar').disabled==true){document.getEleme‌​ntById('avancar').disabled=false}"/>SIM</label>
    <label class="radio">
      <input name="ativo" type="radio" value="NAO" onclick="if(document.getElementById('avancar').disabled==true){document.getEleme‌​ntById('avancar').disabled=false}"/>NÃO</label>
    <button id="avancar" disabled="disabled" class="btn btn-primary pull-right" type="submit">Avançar</button>
  </fieldset>
</form>
    
asked by anonymous 25.06.2014 / 16:15

2 answers

7

The onchange event should be in the < select onchange="action ()" >

See if this solves your problem: 

<!doctype html>
<html>
    <head>
    </head>
    <script type="text/javascript">
        function habilitaBtn () {
            var op = document.getElementById("opcao").value;

            if(op == "--")
            {
                if(!document.getElementById('avancar').disabled) document.getElementById('avancar').disabled=true;              
            }

            else if(op == "FUNCIONARIO1")
            {
                if(document.getElementById('avancar').disabled) document.getElementById('avancar').disabled=false;
            }
        }
    </script>
    <body>
    <form action="questao2.php" method="post">
    <fieldset>
        <select onchange="habilitaBtn()" id="opcao">
            <option name="ativo" value="--"/> --</option>
            <option name="ativo" value="FUNCIONARIO1"/>FUNCIONÁRIO 1</option>
        </select>
        <button id="avancar" type="submit" disabled="disabled" class="btn btn-primary pull-right" >Avançar</button>
    </fieldset>
    </form>
    </body>
</html>
    
25.06.2014 / 16:35
2

Here's a suggestion, once you've accepted one of the answers. (Link: link ) 

var inputs = document.querySelectorAll('form select, form input');
for (var i = 0; i < inputs.length; i++) {
    inputs[i].addEventListener('change', verificar);
}

function buscaBotao(elInicial) {

    // ir buscar o field set mais correspondente
    var fieldset = elInicial.parentElement;
    while (fieldset.tagName.toLowerCase() != 'fieldset') fieldset = fieldset.parentNode;

    // ir buscar o botao
    var botao = fieldset.getElementsByTagName('button')[0];

    // devolver o elemento
    return botao;
}

function verificar(e) {
    var el = e.target;
    var value = el.value || el.options[el.selectedIndex].value;
    var botao = buscaBotao(el);
    botao.disabled = !value;
}

This tip improves your code on these points:

  • Removes javascript mixed in HTML. This is bad practice and hard to figure out.
  • button ID changes to class, in case there are several on the same page this would give error.

For it to work you should put the javascript at the end of the body, or involving a function window.onload=function(){ ...codigoaqui...};

Note the jsFiddle that I put as the code gets cleaner (HTML without javascript in the middle) and easier to maintain.

    
25.06.2014 / 17:06
Calculate the standard deviation of a vector Send email with dynamic content in PHP