양식을 제출할 때 모든 필드가 채워져 있는지 확인하려고합니다. 그러나 모든 필드가 채워지지 않은 양식이 전송되는 것을 확인했습니다. 그래서 조사를 시작했고, 심지어 양식이 전송되지 않았 음을 의미하는 false를 반환해도 그렇습니다.
다음은 HTML 코드입니다.
<form action="addproduct.php" onsubmit="checkinput()" method="post">
<style> <?php include 'css/addproduct.css'; ?> </style>
<div class="iRow">
<div class="lclass"> <label for="ProductSKU">Product SKU:</label> </div>
<div class="tclass"> <input type="text" name="ProductSKU"> </div>
</div>
<div class="iRow">
<div class="lclass"> <label for="ProductName">Product Name:</label> </div>
<div class="tclass"> <input type="text" name="ProductName"> </div>
</div>
<div class="iRow">
<div class="lclass"> <label for="ProductPrice">Product Price:</label> </div>
<div class="tclass"> <input type="text" name="ProductPrice"> </div>
</div>
<div class="iRow dvd">
<div class="lclass"> <label for="ProductSize">Product Size:</label> </div>
<div class="tclass"> <input type="text" name="ProductSize"> </div>
</div>
<div class="iRow book">
<div class="lclass"> <label for="ProductWeight">Product Weight:</label> </div>
<div class="tclass"> <input type="text" name="ProductWeight"> </div>
</div>
<div class="iRow furniture">
<div class="lclass"> <label for="ProductDimensions">Product Dimensions:</label> </div>
<div class="tclass"> <input type="text" name="ProductDimensions"> </div>
</div>
<div class="iRow">
<div class="lclass"> <label for="typeselector">Product Category</label> </div>
<div class="tclass">
<select id="typeselector" name="productoptions" onchange="selectorhandle()">
<option value=""></option>
<option value="DVD">DVD-Disc</option>
<option value="Book">Book</option>
<option value="Furniture">Furniture</option>
</select>
</div>
</div>
<input type="submit" value="Add Product" >
<script>
<?php include 'js/addproduct.js'; ?> <!-- Adding this javascript for the dynamic form -->
</script>
</form>
그리고 addproduct.js에는 다음이 있습니다.
function checkinput()
{
return false;
}
문제의 근본 원인은 'onsubmit' 속성에 의한 함수 호출에 있습니다.
onsubmit = "checkInput ()" 은 checkInput ()이 완료 될 때까지 기다리지 않고 checkInput () 함수와 제출 양식 만 호출합니다.
함수 / 단계가 완료 될 때까지 기다리지 않는 이러한 동작 (비동기 적 특성)은 자바 스크립트에 내재되어 있습니다.
명시 적으로 사용하여 문제를 해결할 수 있습니다.
onsubmit="return checkInput()"
대신에
onsubmit="checkInput()"
onsubmit을 사용하여 입력을 검증하는 작업 예제 :
<form action="addproduct.php" onsubmit="return checkInput()" method="post">
<!-- form fields here -->
</form>
<script>
function checkInput() {
if( all_input_is_Valid ) {
return true
}
return false
}
</script>
추가 정보:
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다