How to enable and disable button from onclick or onchange from select

Asked

Viewed 50,524 times

2

I’ve done it with the radio button, but I’m having trouble doing it from a select. When selecting any employee, you must enable and when you select that you represent no employee, you 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>
javascript twitter-bootstrap

  • <form action="questao2.php" method="post"> <fieldset> <select> <option name="active" value="-" onchange="if(Document.getElementById('advance'). disabled==false){Document.getElementById('advance'). disabled=true}"/> --</option> <option name="active" value="FUNCIONARIO1" onchange="if(Document.getElementById('advance'). disabled=true{Document.getElementById('advance'). disabled=false}"/>EMPLOYEE 1</option> </select> <button id="forward" type="Submit" disabled="disabled" class="btn btn-Primary pull-right" >Forward</button> </fieldset> </form>

  • Can you put the radio button code? Better than doing it one by one it’s better to create more general code that works for many elements. But for that you have to put the whole code relevant to this question.

  • <form action="test.php" method="post"> <fieldset> Yes or no? <label class="radio"><input name="active" type="radio" value="SIM" onclick="if(Document.getElementById('advance').disabled==true){Document.getElementById('advance'). disabled=false}"/>SIM</label> <label class="radio"><input name="active" type="radio" value="NAO" onclick="if(Document.getElementById('advance').disabled==true){Document.getElementById('advance'). disabled=false}"/>NO</label> <button id="advance" disabled="disabled" class="btn btn-Primary pull-right" type="Submit">Next</button></fieldset> </form> Obrg @Sergio

2 answers

7


The event onchange should stay 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>

  • Perfect. Thanks @user11795.

  • I made a small improvement that if it is equal to "-", disables and if it is different from empty, enables. I created a javascript file.

  • Check this out, @Irpinheiro. Function habilitaBTN() { var op = Document.getElementById("option"). value; if(op == "-") { if(!Document.getElementById('advance').disabled)Document.getElementById('advance'). disabled=true; } Else if (!op == "") { if(Document.getElementById('advance').disabled)Document.getElementById('advance'). disabled=false; } }

  • @fabricio_wm by q understood you only need to disable the button when it is equal '-' so I changed the code, give a look and see if it makes sense to you. function habilitaBTN() {&#xA;var op = document.getElementById("opcao").value;&#xA; if(op == "--"){&#xA; if(!document.getElementById('avancar').disabled) document.getElementById('avancar').disabled=true;&#xA;} &#xA; else { if(document.getElementById('avancar').disabled)&#xA;document.getElementById('avancar').disabled=false;&#xA;}&#xA;} JS,CSS and HTML.

2

Here is a suggestion, after you have accepted one of the answers.
(Link: http://jsfiddle.net/AvXws/)

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 suggestion improves your code at these points:

  • removes the javascript mixed in HTML. This is bad practice and is difficult to understand.
  • changes button ID to class, in case you have multiple on the same page this would give error.

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

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

Browser other questions tagged javascript twitter-bootstrap

You are not signed in. Login or sign up in order to post.