HOWTO · jQuery
jQuery를 사용하여 HTML 양식 재설정
이 튜토리얼은 jQuery를 사용하여 HTML 양식을 재설정하는 방법을 보여줍니다.
jQuery에는 JavaScript reset() 메서드와 같은 메서드가 없지만 jQuery의 trigger() 메서드를 사용하여 HTML 양식을 재설정할 수 있습니다. 이 튜토리얼에서는 trigger() 메소드를 사용하여 jQuery에서 HTML 양식을 재설정하는 방법을 보여줍니다.
jQuery를 사용하여 HTML 양식을 재설정하려면 trigger() 메서드 사용
trigger() 메서드는 선택한 요소에서 지정된 이벤트 핸들러를 트리거할 수 있습니다. 이 방법을 reset 매개변수와 함께 사용하여 HTML 양식을 재설정할 수 있습니다.
양식을 재설정하는 trigger() 메서드의 구문은 다음과 같습니다.
$("Form").trigger("reset");
Form이 양식에 대한 선택기인 경우 ID, 클래스 또는 form 키워드가 될 수 있습니다.
예를 들어 보겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ResetForm Using JQuery</title>
</head>
<body>
<form action="" method="post" id="DemoForm">
<label>Name:</label>
<input type="text" name="name">
<br><br>
<label>ID:</label>
<input type="text" name="id">
<br><br>
<label>Address:</label>
<input type="text" name="address">
<br><br
<label>Salary:</label>
<input type="number" name="salary">
<input type="submit" value="Submit">
</form>
<br>
<button type="button" id='ResetButton'>Reset Form</button>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$("#ResetButton").click(function(){
$("#DemoForm").trigger("reset");
});
});
</script>
</body>
</html>
위의 코드는 버튼 클릭 시 양식을 재설정합니다. 출력 참조:
jQuery 양식 개체를 만들고 JavaScript의 reset() 메서드를 사용하여 HTML 양식 재설정
jQuery에서 양식을 재설정하는 또 다른 방법은 양식의 jQuery 객체를 만들고 JavaScript reset() 메서드로 재설정하는 것입니다. 이 메서드의 구문은 다음과 같습니다.
$("#DemoForm")[0].reset()
여기서 [0]은 jQuery 개체를 JavaScript 개체로 변환한 다음 reset() 메서드를 적용합니다.
이 방법에 대한 다음 예를 참조하십시오.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Reset Form Using JQuery</title>
</head>
<body>
<form action="" method="post" id="DemoForm">
<label>Name:</label>
<input type="text" name="name">
<br><br>
<label>ID:</label>
<input type="text" name="id">
<br><br>
<label>Address:</label>
<input type="text" name="address">
<br><br
<label>Salary:</label>
<input type="number" name="salary">
<input type="submit" value="Submit">
</form>
<br>
<button type="button" id='ResetButton'>Reset Form</button>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function() {
$("ResetButton").click(function() {
$("#DemoForm")[0].reset()
});
});
</script>
</body>
</html>
위의 코드는 jQuery 객체를 JavaScript로 변환하고 reset() 메소드를 사용하여 양식을 재설정합니다. 출력 참조:
