반응형
모든 필드에 값이있을 때까지 제출 단추 비활성화
모든 필드에 값이있을 때까지 제출 버튼을 비활성화하고 싶습니다. 어떻게해야합니까?
<html>
<head>
<title></title>
<style type="text/css">
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#register').attr("disabled", true);
});
</script>
</head>
<body>
<form>
Username<br />
<input type="text" id="user_input" name="username" /><br />
Password<br />
<input type="text" id="pass_input" name="password" /><br />
Confirm Password<br />
<input type="text" id="v_pass_input" name="v_password" /><br />
Email<br />
<input type="text" id="email" name="email" /><br />
<input type="submit" id="register" value="Register" />
</form>
<div id="test">
</div>
</body>
</html>
이 jsfiddle을 확인하십시오 .
HTML
// note the change... I set the disabled property right away
<input type="submit" id="register" value="Register" disabled="disabled" />
자바 스크립트
(function() {
$('form > input').keyup(function() {
var empty = false;
$('form > input').each(function() {
if ($(this).val() == '') {
empty = true;
}
});
if (empty) {
$('#register').attr('disabled', 'disabled'); // updated according to http://stackoverflow.com/questions/7637790/how-to-remove-disabled-attribute-with-jquery-ie
} else {
$('#register').removeAttr('disabled'); // updated according to http://stackoverflow.com/questions/7637790/how-to-remove-disabled-attribute-with-jquery-ie
}
});
})()
이것에 대한 좋은 점은 양식에 얼마나 많은 입력 필드가 있는지는 중요하지 않으며, 비어있는 항목이 하나 이상 있으면 항상 버튼을 비활성화 상태로 유지한다는 것입니다. 또한 .keyup()사용성을 더 편리하게 만드는 공허함을 확인합니다 .
$('#user_input, #pass_input, #v_pass_input, #email').bind('keyup', function() {
if(allFilled()) $('#register').removeAttr('disabled');
});
function allFilled() {
var filled = true;
$('body input').each(function() {
if($(this).val() == '') filled = false;
});
return filled;
}
코드가있는 JSFiddle , 작동합니다 :)
".keyup" ".change"대신 모든 솔루션에 대해 ".change"를 사용해야합니다. 그렇지 않으면 누군가가 텍스트 필드에 대해 쿠키에 저장된 데이터를 선택할 때 제출 버튼이 비활성화되지 않습니다.
모든 변수가 캐시되므로 루프 및 키업 이벤트가 실행될 때마다 jQuery 객체를 만들 필요가 없습니다.
var $input = $('input:text'),
$register = $('#register');
$register.attr('disabled', true);
$input.keyup(function() {
var trigger = false;
$input.each(function() {
if (!$(this).val()) {
trigger = true;
}
});
trigger ? $register.attr('disabled', true) : $register.removeAttr('disabled');
});
http://jsfiddle.net/DKNhx/3/ 에서 작동 예를 확인하십시오.
데모 : http://jsfiddle.net/kF2uK/2/
function buttonState(){
$("input").each(function(){
$('#register').attr('disabled', 'disabled');
if($(this).val() == "" ) return false;
$('#register').attr('disabled', '');
})
}
$(function(){
$('#register').attr('disabled', 'disabled');
$('input').change(buttonState);
})
무덤 파기 ... 다른 접근 방식을 좋아합니다.
elem = $('form')
elem.on('keyup','input', checkStatus)
elem.on('change', 'select', checkStatus)
checkStatus = (e) =>
elems = $('form').find('input:enabled').not('input[type=hidden]').map(-> $(this).val())
filled = $.grep(elems, (n) -> n)
bool = elems.size() != $(filled).size()
$('input:submit').attr('disabled', bool)
여기서 선택한 답변을 리팩토링하고 개선했습니다. 선택한 답변은 페이지 당 하나의 양식이 있다고 가정 할 때만 작동합니다. 동일한 페이지의 여러 양식에 대해이 문제를 해결했으며 (내 경우에는 동일한 페이지에 2 개의 모달이 있음) 내 솔루션은 필수 필드의 값만 확인합니다. JavaScript가 비활성화되고 매끄러운 CSS 버튼 페이드 전환이 포함되면 내 솔루션이 정상적으로 저하됩니다.
작동하는 JS 바이올린 예제 참조 : https://jsfiddle.net/bno08c44/4/
JS
$(function(){
function submitState(el) {
var $form = $(el),
$requiredInputs = $form.find('input:required'),
$submit = $form.find('input[type="submit"]');
$submit.attr('disabled', 'disabled');
$requiredInputs.keyup(function () {
$form.data('empty', 'false');
$requiredInputs.each(function() {
if ($(this).val() === '') {
$form.data('empty', 'true');
}
});
if ($form.data('empty') === 'true') {
$submit.attr('disabled', 'disabled').attr('title', 'fill in all required fields');
} else {
$submit.removeAttr('disabled').attr('title', 'click to submit');
}
});
}
// apply to each form element individually
submitState('#sign_up_user');
submitState('#login_user');
});
CSS
input[type="submit"] {
background: #5cb85c;
color: #fff;
transition: background 600ms;
cursor: pointer;
}
input[type="submit"]:disabled {
background: #555;
cursor: not-allowed;
}
HTML
<h4>Sign Up</h4>
<form id="sign_up_user" data-empty="" action="#" method="post">
<input type="email" name="email" placeholder="Email" required>
<input type="password" name="password" placeholder="Password" required>
<input type="password" name="password_confirmation" placeholder="Password Confirmation" required>
<input type="hidden" name="secret" value="secret">
<input type="submit" value="signup">
</form>
<h4>Login</h4>
<form id="login_user" data-empty="" action="#" method="post">
<input type="email" name="email" placeholder="Email" required>
<input type="password" name="password" placeholder="Password" required>
<input type="checkbox" name="remember" value="1"> remember me
<input type="submit" value="signup">
</form>
rsplak 의 답변을 기반으로 구축되었습니다 . 그것은 jQuery의 새로운 사용 CSTE 연구진은 () 대신에 사용되지 않는 .bind ()를 . 입력 외에도 선택 및 기타 html 요소에서도 작동합니다. 필드 중 하나가 다시 비워지면 제출 버튼도 비활성화됩니다.
var fields = "#user_input, #pass_input, #v_pass_input, #email";
$(fields).on('change', function() {
if (allFilled()) {
$('#register').removeAttr('disabled');
} else {
$('#register').attr('disabled', 'disabled');
}
});
function allFilled() {
var filled = true;
$(fields).each(function() {
if ($(this).val() == '') {
filled = false;
}
});
return filled;
}
데모: JSFiddle
참고 URL : https://stackoverflow.com/questions/5614399/disabling-submit-button-until-all-fields-have-values
반응형
'Nice programing' 카테고리의 다른 글
| 달러 기호 ($)를 grep하는 방법은 무엇입니까? (0) | 2020.11.14 |
|---|---|
| Matplotlib 플롯에서 선을 제거하는 방법 (0) | 2020.11.14 |
| 0과 1 사이의 rand () (0) | 2020.11.14 |
| Golang에서 한 번에 실행할 고 루틴 풀을 어떻게 정의 하시겠습니까? (0) | 2020.11.14 |
| ConEmu에서 열기 오른쪽 클릭 메뉴 창 7 (0) | 2020.11.14 |