자바스크립트 부분(JavaScript part)
자바스크립트의 document.getElementById(“[변수 variable]”.value)에서 변수에 해당하는 부분은 HTML에서 id=”변수 variable” 부분이다.
In JavaScript’s document.getElementById (“[variable]”.value), the part that corresponds to a variable is the id=”variable” part of HTML.
const frmName = document.getElementById("name").value;
<input type="name" class="form-control" id="name" placeholder="당신의 이름을 입력하세요(Enter Your Name)" name="name">
const frmPwd = document.getElementById("pwd").value;
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd">
버튼 클릭했을 때 폼 “frumSubmit()”이 실행된다.
When the button is clicked, the form “frumSubmit()” runs.
<button type="button" onClick="frmSubmit();" class="btn btn-primary">Submit</button>
전체코드(full code)
-아래의 링크를 통해서 테스트 할 수 있습니다
You can test it through the link below.
https://freelifemakers.org/lec/form3.php
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 5 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<form name="frm" action="./form_action2.php" method="get">
<div class="mb-3 mt-3">
<label for="name" class="form-label">이름(Name):</label>
<input type="name" class="form-control" id="name" placeholder="당신의 이름을 입력하세요(Enter Your Name)" name="name">
<div id="errorName"></div>
</div>
<div class="mb-3">
<label for="pwd" class="form-label">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd">
<div id="errorPwd"></div>
</div>
<div class="form-check mb-3">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="remember"> Remember me
</label>
</div>
<button type="button" onClick="frmSubmit();" class="btn btn-primary">Submit</button>
</form>
<script>
function frmSubmit(){
const frmName = document.getElementById("name").value;
const frmPwd = document.getElementById("pwd").value;
errorName.innerHTML = "";
errorPwd.innerHTML = "";
if(frmName == ""){
errorName.innerHTML = "<p>이름을 입력하세요(Please Enter Your Name)</p>";
} else if(frmPwd == ""){
errorPwd.innerHTML = "<p>패스워드를 입력하세요(Please Enter Your Password)</p>";
}else{
frm.submit();
}
}
</script>
</body>
</html>