Как проверить пользовательский ввод с помощью JavaScript - PullRequest
0 голосов
/ 16 мая 2018

У меня есть такой сценарий, где у меня есть 4 выпадающих списка, в которых вы можете выбрать CM для навеса для машины и навес для этого навеса.

Я хочу предложить пользователю сообщения / ошибки в следующих сценариях:

  • сарай выбран шире, чем он длинный.
  • сарай по крайней мере на 60 см меньше навесов по ширине и длине
  • выбирается только одно из размеров сарая

форма выглядит следующим образом

    <form name="createorder" action="FrontController" method="POST">
        <input type="hidden" name="command" value="createorder">
        <br>
        Length of shed:<br>
        <select name="lengthShed">
            <option value="0">I do not want a shed</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 name="widthShed">
            <option value="0">I do not want a shed</option>
            <option value="18=">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 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 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>

1 Ответ

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

Привязать функцию к свойству <select> elements onchange.

let selects = document.querySelectorAll('select');
for(var i = 0; i < selects.length; i++){
    selects[i].onchange = function(){
        // Check for your conditions
        // If your warning conditions are met, prompt user
    }
}

То есть, если вы хотите, чтобы проверка выполнялась, когда пользователь изменяет одно из значений выбора.

Если вы хотите подтвердить нажатием кнопки, вместо этого вы можете привязать функцию к событию нажатия кнопки.

let button = document.getElementById(buttonID);
button.onclick = function(){
    // Check for your conditions
    // If conditions are met, prompt user
}

Чтобы запросить пользователя, вы можете использовать простой alert(), которому вы передаете свое сообщение. Или сделайте более сложную функцию, чтобы сделать что-то свое.

Что касается ваших условий, это звучит как коммерческая математика. Возможно, вам придется разделить ваш вопрос на несколько вопросов, так как есть много возможных предупреждений.

Возможно, вам будет проще добавить идентификаторы к выбранным, чтобы вы могли получить их через document.getElementById(idString). Затем вы можете получить их значение через document.getElementById(idString).value. И чтобы использовать его в математическом решении, вам нужно будет проанализировать строку, которую <select> вернет в качестве значения, например, parseInt(document.getelementById(idString).value).

...