Как включить и отключить кнопку отправки на основе некоторых определенных условий

Question

у меня есть код, где я утверждаю, вызывая функцию с помощью следующего кода

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

Я хочу, чтобы кнопка была отключена изначально и только если все мои входы не равны нулю.

После отправки формы я хочу, чтобы кнопка была отключена снова, чтобы дублирующие вставки не выполнялись.

Я пробовал другие примеры из переполнения стека, но либо он постоянно включен, либо отключен.

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 напомнил мне, что эта существенная особенность не 100% во всех браузерах (а именно Safari см this).

Почему бы вам не использовать атрибут required на каждом входе и назвать его днем. Пока ваши входы required не имеют каких-либо значений, вы можете щелкнуть эту кнопку отправки тысячу раз, и ей никогда не разрешат ничего делать, пока каждый вход с 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>