使 javascript 取消在 jsp 页面提交

Question

我有这个 JSP 页面，我希望 javascript 在其中对用户输入进行错误处理。如果据说用户输入在 javascript 代码中引起警报，我想取消重定向到另一个页面。这是重定向行

<input type="hidden" name="command" value="createorder">

在第二行，javascript在最下面。由于长度的原因，代码可能看起来难以管理，我将把所有内容都放入其中，但其中大部分只是下拉表单。

    <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>

Answer 1

更改要提交的事件
return 在事件处理程序中为 false（或 preventDefault()）
强烈建议不要使用内联事件处理程序。这个会避免这个

document.querySelector("[name=createorder]").onsubmit=function() {
  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;
  }
}

Answer 2

对表单使用 onsubmit，return 验证失败时为 false

<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>

使 javascript 取消在 jsp 页面提交

make javascript cancel submit in jsp page

javascript

error-handling

jsp

submit

invalidation