Styled <select> in css. There was a problem, which is that the default is the first option (it says "Select the desired item"). But the user must necessarily choose some other than him.

And when sending data to the server, if the user did not select other items, incorrect data is sent (some of the other items must be necessary).

How to restrict the user so that before pressing the button to send data to the server, it is checked whether he chooses some other item, or left the default one. I tried using the js - onclick function on the send button, but the data is still sent.

 function ValidateSelect(selected) { var kindSelect = selected.value; var valid = false; if (kindSelect == "Выберите алгоритм") { selected.value = ""; return false; } else { return true; break; } } 
 <select class="turnintodropdown" name="algoritm" id="algoritm" required> <option>Выберите алгоритм</option> <option value="AES">AES</option> <option value="Rijndael">Rijndael</option> <option value="TripleDES">TripleDES</option> </select> <br /> <p> <div class="col-md-offset-2 col-md-10"> <input type="submit" value="Зашифровать" onclick="ValidateSelect(algoritm)" class="btn btn-default" /> </div> </p>

    1 answer 1

     /*** Your function is here if you want ***/ var form = document.querySelector('form'); form.addEventListener('submit', function(e) { e.preventDefault(); //---------------------------------------------------------------- // console.log('Check before sending to Server '); }) 
     <!-------- Added form --------> <form id="myForm" action="/action_page.php"> <select class="turnintodropdown" name="algoritm" id="algoritm" required> <option>Выберите алгоритм</option> <option value="AES">AES</option> <option value="Rijndael">Rijndael</option> <option value="TripleDES">TripleDES</option> </select> <br /> <p> <div class="col-md-offset-2 col-md-10"> <input type="submit" value="Зашифровать" class="btn btn-default" /> </div> </p> </form>

    UPD:

     //---------------------------------------------------------------- function ValidateSelect(selected) { var kindSelect = selected.value; console.log('Here: ', kindSelect); var valid = false; if (kindSelect == "Выберите алгоритм") { selected.value = ""; return false; } else { return true; //break; // In this case Break is Error } } //---------------------------------------------------------------- var form = document.querySelector('form'); form.addEventListener('submit', function(e) { e.preventDefault(); var sel = document.querySelector('select'); //---------------------------------------------------------------- if( ValidateSelect(sel) ) { /// Вызов вашей фунции если вернула, то что вам надо //---------------------------------------------------------------- // form.submit(); // Отослать на сервер ... console.log('Sending'); } else { // Обработайте ошибки юзера или другая ваша задача.... console.log('Please select'); } console.log('Check before sending to Server '); }) 
     <!-------- Added form --------> <!--------------------------------------------------------- Поменяйте файл action_page.php на тот который на сервере принимает запрос это your-file.asp тот файл куда до этого данные с формы посылали ------------------------------------------------------------> <form id="myForm" action="/action_page.php"> <select class="turnintodropdown" name="algoritm" id="algoritm" required> <option>Выберите алгоритм</option> <option value="AES">AES</option> <option value="Rijndael">Rijndael</option> <option value="TripleDES">TripleDES</option> </select> <br /> <p> <div class="col-md-offset-2 col-md-10"> <input type="submit" value="Зашифровать" class="btn btn-default" /> </div> </p> </form>

    • I read about addEventListener and preventDefault and still didn't quite understand what I need to do - Yura Morozov
    • preventDefault will stop sending to the server (this is the usual behavior of submit send data from the form to the server), and there you will add a check, after which you decide to send it to the server or return it to the user for revision. - Kosta B.
    • I just don’t understand how to describe in the block where addEventListener has this my function and how it should look. I looked at the examples, and I do not understand how to arrange it. Where should I call my function and where I decide whether to send data or not - Yura Morozov
    • Everything added, now when selecting any item, the data is not sent at all, although everything seems to be added - Yura Morozov
    • The if-else block in addEventListener does not work at all - Yura Morozov