入力が完了したらJavascriptを有効にするボタン

Question

入力が完了したら、私のボタンを有効にしたい。私は純粋なJavascriptでそれをしたい。

HTMLでの私のコード例：

<form action="sent.php" method="post" name="frm"> 
    <input type="text" name="name_input" id="name" onkeyup="myFunction()"><br> 
    <button type="submit" class="button button-dark" id="send">Send message</button> 
</form> 

とJavaScript：

document.addEventListener("DOMContentLoaded", function(event) { 
    document.getElementById('send').disabled = "true"; 
    function myFunction() { 
     var nameInput = document.getElementById('name').value; 
     if (!nameInput === "") { 
      document.getElementById('send').disabled = "false"; 
     } 
    } 
}); 

私のボタン入力で何かを充填した後の状態を有効にするために変更されていない理由を私は知りません。私はそれを行うさまざまな方法を試みたが、それはまだ動作していない。 助けてください。

Answer 1

あなたのコードの問題は、あなたがクリックのためのEventListenerでそれを定義しているためmyFunction()が利用できないということです。

完全なリファクタリング、コードの答え：

HTML

<form action="sent.php" method="post" name="frm"> 
    <input type="text" name="name_input" id="name"> 
    <br> 
    <button type="submit" class="button button-dark" id="send" disabled>Send message</button> 
</form> 

JS

document.getElementById("name").addEventListener("keyup", function() { 
    var nameInput = document.getElementById('name').value; 
    if (nameInput != "") { 
     document.getElementById('send').removeAttribute("disabled"); 
    } else { 
     document.getElementById('send').setAttribute("disabled", null); 
    } 
}); 

Answer 2

disabled属性がでない場合にのみ、HTMLの入力要素が有効になります。。あなたのケースでは

disabledは、常にあなたの要素に存在している、それが「偽」または「真」の値を持っていることだけだ - しかし、これはスペック（http://www.w3schools.com/tags/att_input_disabled.asp）によると、無意味である

だからあなたがする必要がありそれを完全に削除します。

document.getElementById('send').removeAttribute('disabled') 

Answer 3

それはあなた

function myFunction() { 
      document.getElementById('send').disabled = true; 
      var nameInput = document.getElementById('name').value; 
      if (nameInput != "") { 
      alert("Empty"); 
       document.getElementById('send').disabled = false; 
      } 
    } 

のために動作します。この方法を試してください。あなたは私たちがますisNaN（）関数を使用することができます番号を含めるべきでない入力をチェックしたい場合は数が数が返さそうでない場合は0

、それはtrueを返します偽

Answer 4

あなたのコードはほとんど正しいですが、あなたはmyFunctionを定義していますブロック内で、そうinputはmyFunction()

onkeyup="myFunction()"の内側を見つけることができないので、ちょうど demo

01を作業参照 DOMContentLoadedイベント

の同じ外側を保ちます

document.addEventListener("DOMContentLoaded", function(event) { 
    document.getElementById('send').disabled = "true"; 
}); 
function myFunction() { 
    var nameInput = document.getElementById('name').value; 
    console.log(nameInput); 
    if (nameInput === "") { 
     document.getElementById('send').disabled = true; 
    } else { 
     document.getElementById('send').disabled = false; 
    } 
}