1
다음 코드는 간단한 등록 양식입니다. 문제는 이 name (내 양식의 첫 번째 요소) 대신 undefined으로 표시된다는 것입니다. 그러나 alert(elements[1].value)을 실행하려고 시도하면 아무런 문제없이 name 값이 표시됩니다. 어떤 아이디어?getElementById()는 첫 번째 요소에서 null을 반환합니다.
<html>
<body>
<form name="register" id="register" method="POST" action="this-file.php">
<fieldset>
<legend><span style="color:red; font-size:20px">
Register</span></legend><br>
<label for="firstname">First name<span style="color:red;">*</span></label>
<input type="text" name="firstname" id="firstname" placeholder="Peter"
autofocus required><br><br>
<label for="lastname">Last name<span style="color:red;">*</span></label>
<input type="text" name="lastname" id="lastname" placeholder="Parker"
required><br><br>
<label for="password">Password<span style="color:red;">*</span></label>
<input type="password" name="password" id="password" required><br><br>
<label for="favfood">Favorite food<span style="color:red;">*</span></label>
<select name="favfood" id="favfood" required>
<option value="" selected>(none)</option>
<option value="chicken">Chicken</option>
<option value="pizza">Pizza</option>
<option value="pasta">Pasta</option>
<option value="hamburger">Hamburger</option>
<option value="steak">Steak</option>
</select>
<p>Gender<span style="color:red;">*</span></p>
<ul>
<li>
<input type="radio" name="gender" id="male" value="male" required>
<label for="male">Male</label>
</li>
<li>
<input type="radio" name="gender" id="female" value="female" required>
<label for="female">Female</label>
</li>
</ul>
</fieldset><br>
<input type="submit" value="Register" name="register">
<input type="reset" value="Clear form" name="clear"><br><br>
</form>
<script type="text/javascript">
var form = document.getElementById('register');
var elements = form.elements;
form.noValidate = true;
form.addEventListener('submit', function (event) {
alert(elements[0].value); //displays "undefined" -- why?
for (var i = 0; i < elements.length; i++) {
if (elements[i].hasAttribute("required")) {
if (!elements[i].checkValidity()) {
event.preventDefault();
alert('Please, fill in every required field.');
form.reset();
elements[0].focus();
break;
}
}
}
}, false);
</script>
</body>
</html>
디버깅에'alert'를 사용하지 마십시오. 'console.log (요소)'와 [브라우저의 콘솔을보십시오] (http://webmasters.stackexchange.com/questions/8525/how-to-open-the-javascript-console-in-different-browsers)에서 어떤 요소가'elements [0]'인지 확인하십시오 (그것은 fieldset입니다). – JJJ
@JJJ 조언 해 주셔서 감사합니다. – sgrontflix