сделать JavaScript отменить отправить на странице JSP - PullRequest
Новая
       20

сделать JavaScript отменить отправить на странице JSP

0 голосов
/ 23 мая 2018

У меня есть эта страница 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>

Ответы [ 2 ]

0 голосов
/ 23 мая 2018

использовать onsubmit для формы и возвращать 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>
0 голосов
/ 23 мая 2018
  1. изменить событие для отправки
  2. вернуть false в обработчике события (или warnDefault ())
  3. НАСТОЯТЕЛЬНО рекомендуется не иметь встроенных обработчиков событий.Этот избежит этого 
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;
  }
}
...