jQuery를 사용하여 HTML 양식 재설정
-
jQuery를 사용하여 HTML 양식을 재설정하려면
trigger()메서드 사용 -
jQuery 양식 개체를 만들고 JavaScript의
reset()메서드를 사용하여 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() 메소드를 사용하여 양식을 재설정합니다. 출력 참조:
Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.
LinkedIn Facebook