I have this JSP page, where i want javascript to do the error handling for user input. If the user input is said to cause an alert in the javascript code, I want to cancel the redirecting to another page. This is the line redirecting
<input type="hidden" name="command" value="createorder">
It's on the second line, and the javascript is in the bottom. The code might look unmanageable due to the length, I'll throw everything in but most of it is just the drop down form.
<form name="createorder" action="FrontController" method="POST">
<input type="hidden" name="command" value="createorder">
Choose Material:
<br>
<select name="material">
<option value="1">material1</option>
<option value="2">material2</option>
</select>
<br>
Choose type of roof:
<br>
<select name="roof">
<option value="1">roof1</option>
<option value="2">roof2</option>
</select>
<br>
Length of shed:<br>
<select id="lengthShed" name="lengthShed">
<option value="0">Ønsker ikke redskabsrum</option>
<option value="180">180cm</option>
<option value="210">210cm</option>
<option value="240">240cm</option>
<option value="270">270cm</option>
<option value="300">300cm</option>
<option value="330">330cm</option>
<option value="360">360cm</option>
<option value="390">390cm</option>
<option value="420">420cm</option>
<option value="450">450cm</option>
<option value="480">480cm</option>
<option value="510">510cm</option>
<option value="540">540cm</option>
<option value="570">570cm</option>
<option value="600">600cm</option>
<option value="630">630cm</option>
<option value="660">660cm</option>
<option value="690">690cm</option>
<option value="720">720cm</option>
</select>
<br>
Width of shed:<br>
<select id="widthShed" name="widthShed">
<option value="0">Ønsker ikke redskabsrum</option>
<option value="180">180cm</option>
<option value="210">210cm</option>
<option value="240">240cm</option>
<option value="270">270cm</option>
<option value="300">300cm</option>
<option value="330">330cm</option>
<option value="360">360cm</option>
<option value="390">390cm</option>
<option value="420">420cm</option>
<option value="450">450cm</option>
<option value="480">480cm</option>
<option value="510">510cm</option>
<option value="540">540cm</option>
<option value="570">570cm</option>
<option value="600">600cm</option>
<option value="630">630cm</option>
<option value="660">660cm</option>
<option value="690">690cm</option>
</select>
<br>
Width:<br>
<select id="widthCarport" name="width">
<option value="240">240cm</option>
<option value="270">270cm</option>
<option value="300">300cm</option>
<option value="330">330cm</option>
<option value="360">360cm</option>
<option value="390">390cm</option>
<option value="420">420cm</option>
<option value="450">450cm</option>
<option value="480">480cm</option>
<option value="510">510cm</option>
<option value="540">540cm</option>
<option value="570">570cm</option>
<option value="600">600cm</option>
<option value="630">630cm</option>
<option value="660">660cm</option>
<option value="690">690cm</option>
<option value="720">720cm</option>
<option value="750">750cm</option>
</select>
<br>
Length:<br>
<select id="lengthCarport" name="length">
<option value="240">240cm</option>
<option value="270">270cm</option>
<option value="300">300cm</option>
<option value="330">330cm</option>
<option value="360">360cm</option>
<option value="390">390cm</option>
<option value="420">420cm</option>
<option value="450">450cm</option>
<option value="480">480cm</option>
<option value="510">510cm</option>
<option value="540">540cm</option>
<option value="570">570cm</option>
<option value="600">600cm</option>
<option value="630">630cm</option>
<option value="660">660cm</option>
<option value="690">690cm</option>
<option value="720">720cm</option>
<option value="750">750cm</option>
<option value="780">780cm</option>
</select>
<br>
Would you like to build it yourself ?:<br>
<br>
<input type="submit" onclick="myfunction()" value="Submit" id="submitId">
</form>
<script>
let button = document.getElementById("submitId");
function myfunction() {
if (document.getElementById("lengthShed").value == 0 && document.getElementById("widthShed").value != 0) {
alert("Shed must be given both dimensions");
}
if (document.getElementById("widthShed").value == 0 && document.getElementById("lengthShed").value != 0) {
alert("Shed must be given both dimensions");
}
if (document.getElementById("lengthShed").value + 90 > document.getElementById("lengthCarport").value) {
alert("The shed has to be atleast 90cm shorter in length than the carport");
}
if (document.getElementById("widthShed").value + 90 > document.getElementById("widthCarport").value) {
alert("The shed has to be atleast 90cm shorter in width than the carport");
}
}
</script>
use onsubmit for form and return false when the validation fails
<form name="createorder" action="FrontController" method="POST" onsubmit="return myfunction()">
<input type="hidden" name="command" value="createorder">
Choose Material:
<br>
<select name="material">
<option value="1">material1</option>
<option value="2">material2</option>
</select>
<br>
Choose type of roof:
<br>
<select name="roof">
<option value="1">roof1</option>
<option value="2">roof2</option>
</select>
<br>
Length of shed:<br>
<select id="lengthShed" name="lengthShed">
<option value="0">Ønsker ikke redskabsrum</option>
<option value="180">180cm</option>
<option value="210">210cm</option>
<option value="240">240cm</option>
<option value="270">270cm</option>
<option value="300">300cm</option>
<option value="330">330cm</option>
<option value="360">360cm</option>
<option value="390">390cm</option>
<option value="420">420cm</option>
<option value="450">450cm</option>
<option value="480">480cm</option>
<option value="510">510cm</option>
<option value="540">540cm</option>
<option value="570">570cm</option>
<option value="600">600cm</option>
<option value="630">630cm</option>
<option value="660">660cm</option>
<option value="690">690cm</option>
<option value="720">720cm</option>
</select>
<br>
Width of shed:<br>
<select id="widthShed" name="widthShed">
<option value="0">Ønsker ikke redskabsrum</option>
<option value="180">180cm</option>
<option value="210">210cm</option>
<option value="240">240cm</option>
<option value="270">270cm</option>
<option value="300">300cm</option>
<option value="330">330cm</option>
<option value="360">360cm</option>
<option value="390">390cm</option>
<option value="420">420cm</option>
<option value="450">450cm</option>
<option value="480">480cm</option>
<option value="510">510cm</option>
<option value="540">540cm</option>
<option value="570">570cm</option>
<option value="600">600cm</option>
<option value="630">630cm</option>
<option value="660">660cm</option>
<option value="690">690cm</option>
</select>
<br>
Width:<br>
<select id="widthCarport" name="width">
<option value="240">240cm</option>
<option value="270">270cm</option>
<option value="300">300cm</option>
<option value="330">330cm</option>
<option value="360">360cm</option>
<option value="390">390cm</option>
<option value="420">420cm</option>
<option value="450">450cm</option>
<option value="480">480cm</option>
<option value="510">510cm</option>
<option value="540">540cm</option>
<option value="570">570cm</option>
<option value="600">600cm</option>
<option value="630">630cm</option>
<option value="660">660cm</option>
<option value="690">690cm</option>
<option value="720">720cm</option>
<option value="750">750cm</option>
</select>
<br>
Length:<br>
<select id="lengthCarport" name="length">
<option value="240">240cm</option>
<option value="270">270cm</option>
<option value="300">300cm</option>
<option value="330">330cm</option>
<option value="360">360cm</option>
<option value="390">390cm</option>
<option value="420">420cm</option>
<option value="450">450cm</option>
<option value="480">480cm</option>
<option value="510">510cm</option>
<option value="540">540cm</option>
<option value="570">570cm</option>
<option value="600">600cm</option>
<option value="630">630cm</option>
<option value="660">660cm</option>
<option value="690">690cm</option>
<option value="720">720cm</option>
<option value="750">750cm</option>
<option value="780">780cm</option>
</select>
<br>
Would you like to build it yourself ?:<br>
<br>
<input type="submit" value="Submit" id="submitId">
</form>
<script>
function myfunction() {
if (document.getElementById("lengthShed").value == 0 && document.getElementById("widthShed").value != 0) {
alert("Shed must be given both dimensions");
return false;
}
if (document.getElementById("widthShed").value == 0 && document.getElementById("lengthShed").value != 0) {
alert("Shed must be given both dimensions");
return false;
}
if (document.getElementById("lengthShed").value + 90 > document.getElementById("lengthCarport").value) {
alert("The shed has to be atleast 90cm shorter in length than the carport");
return false;
}
if (document.getElementById("widthShed").value + 90 > document.getElementById("widthCarport").value) {
alert("The shed has to be atleast 90cm shorter in width than the carport");
return false;
}
return true;
}
</script>