はどうすれば有効にして、特定の定義された条件に基づいて

Question

を送信ボタンを無効に私はボタンが最初にして唯一無効にすることにしたい次のコード

<input type=submit value=SUBMIT onclick=report_submit()> 

で関数を呼び出すことによって、提出コードを持っていますすべての入力がnullでない場合に有効になります。

フォームが送信されたら、ボタンを再度無効にして、重複した挿入が行われないようにします。

私はStack Overflowから他の例を試しましたが、永久に有効または無効にされています。

Answer 1

ユーザーが選択を入力または変更すると、フォームをチェックして、すべての入力が値を持っているかどうかを確認して、ボタンをもう一度無効にします。興味があればArray.prototype.slice()。

function enableSubmit() { 
 
    
 
    // counts the elments of inputs with values 
 
    var i = 0; 
 
    Array.prototype.slice.call(document.forms["form"].elements).forEach(function(e) { 
 
    if (e.value) { 
 
     i++; 
 
    } 
 
    }); 
 
    
 
    // if all the elements have a value enabled the submit button 
 
    if (i === (document.forms["form"].elements.length - 1)) { 
 
    document.getElementById('disabled').disabled = false; 
 
    } else { 
 
    document.getElementById('disabled').disabled = true; 
 
    } 
 
}; 
 

 
// add a event listener to each tag require (were using input and select) 
 
Array.prototype.slice.call(document.forms["form"].elements).forEach(function(e) { 
 
    if (e.tagName === 'INPUT') { 
 
    e.addEventListener("keyup", function(e) { 
 
     enableSubmit(); 
 
    }, false); 
 
    } else if (e.tagName === 'SELECT') { 
 
    e.addEventListener("change", function(e) { 
 
     enableSubmit(); 
 
    }, false); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form name="form" method="post"> 
 
    <input id="text" name="text" type="text" /> 
 
    <select id="options" name="options"> 
 
    <option value></option> 
 
    <option value="1">Option 1</option> 
 
    </select> 
 
    <input type="submit" id="disabled" disabled="disabled" /> 
 
</form>

Answer 2

kodecountは（すなわち、Safariがthisを参照）、この本質的な特徴は、ブラウザ間で100％ではないことを思い出しました。

各入力にrequired属性を使用し、その日に電話をかけないのはなぜですか。 requiredの入力に値がない限り、その送信ボタンを1000回クリックすることができ、requiredのすべての入力が値を持つまで何もすることはできません。 JSなし、CSSなし、HTMLのみ

<form id='f1' onsubmit='nullCheck()'> 
 
    <input name='i1' required> 
 
    <br/> 
 
    <input name='i2' required> 
 
    <br/> 
 
    <input name='i3' required> 
 
    <br/> 
 
    <input name='i4' required> 
 
    <br/> 
 
    <input type='submit'> 
 
</form> 
 
<form id='f2' onsubmit='nullCheck()'> 
 
    <input name='i5' required> 
 
    <br/> 
 
    <input name='i6' required> 
 
    <br/> 
 
    <input type='submit'> 
 
</form>