jQuery로 양식 필드 지우기
Habdul Hazeez
2024년2월15일
jQuery를 사용하여 양식 필드를 지우려면 해당 값을 빈 문자열로 설정할 수 있습니다.
이 문서에서는 사용할 수 있는 두 가지 방법을 설명합니다. 첫 번째는 확인란을 고려하지만 두 번째는 그렇지 않습니다.
CSS 선택기를 사용하여 양식 필드 지우기
CSS 선택기 조합을 사용하여 jQuery에서 HTML 양식 필드를 지울 수 있습니다. 여기서 CSS 선택기는 라디오 버튼 및 확인란과 같은 일부 양식 필드를 제외합니다.
이렇게 하면 추적하기 어려운 버그로 이어질 수 있는 value 속성이 우발적으로 제거되는 것을 방지할 수 있습니다. 다음은 HTML 양식 필드를 지우고 확인란의 값은 그대로 둡니다.
체크되어 있어도 코드는 체크를 해제합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>01-jQuery-clear-form</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
form {
width: 50%;
margin: 2em auto;
font-size: 1.2em;
}
.form_row {
margin-bottom: 1em;
}
</style>
</head>
<body>
<main>
<form id="bio_data_form">
<div class="form_row">
<label for="first_name">First name</label>
<input id="first_name" type="text" name="first_name">
</div>
<div class="form_row">
<label for="last_name">Last name</label>
<input id="last_name" type="text" name="last_name">
</div>
<div class="form_row">
<label>
<input type="checkbox" name="engineer" value="engineer" value="engineer"> I am an engineer
</label>
</div>
<div class="form_row">
<button class="clear_form">Clear form</button>
<input type="submit" name="submit_form" value="Submit form" class="submit_form">
</div>
</form>
</main>
<script>
$(document).ready(function() {
$('.clear_form').click(function(e) {
e.preventDefault();
$(':input', '#bio_data_form')
.not(':button, :submit, :reset, :hidden')
.prop('checked', false).prop('selected', false)
.not(':checkbox, :radio, select').val('');
});
});
</script>
</body>
</html>
출력:
jQuery .find() 메서드를 사용하여 양식 필드 지우기
jQuery .find() 메서드는 HTML 양식 요소를 검색할 수 있습니다. 거기에서 해당 값을 지울 수 있습니다. 첫 번째 예와 달리 양식에는 확인란이 없습니다.
코드는 텍스트 입력 및 textarea 요소를 대상으로 하지만 원하는 경우 더 많은 요소를 추가할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>02-jQuery-clear-form</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
form {
width: 50%;
margin: 2em auto;
font-size: 1.2em;
}
.form_row {
margin-bottom: 1em;
}
label, input:not([type="submit"]), textarea {
display: block;
width: 50%;
}
</style>
</head>
<body>
<main>
<form id="bio_data_form">
<div class="form_row">
<label for="first_name">First name</label>
<input id="first_name" type="text" name="first_name">
</div>
<div class="form_row">
<label for="last_name">Last name</label>
<input id="last_name" type="text" name="last_name">
</div>
<div class="form_row">
<label>Who are you?</label>
<textarea></textarea>
</div>
<div class="form_row">
<button class="clear_form">Clear form</button>
<input type="submit" name="submit_form" value="Submit form">
</div>
</form>
</main>
<script>
$(document).ready(function() {
$('.clear_form').click(function(e) {
e.preventDefault();
$(this).closest('form').find("input[type=text], textarea").val("");
});
});
</script>
</body>
</html>
출력:
작가: Habdul Hazeez
Habdul Hazeez is a technical writer with amazing research skills. He can connect the dots, and make sense of data that are scattered across different media.
LinkedIn