1

Стилизировал <select> в css. Возникла проблема, которая состоит в том, что по умолчанию стоит первый option (там написано "Выберите необходимый пункт"). Но пользователь должен обязательно выбрать какой-то другой, кроме него.

И при отправлении данных на сервер, если пользователь не выбирал других пунктов, отправляются неверные данные (нужно обязательно какой-то из других пунктов).

Как ограничить пользователя, чтобы перед нажатием кнопки отправления данных на сервер, проверялось, выбрал ли он какой-то другой пункт, или оставил тот, что по умолчанию. Пробовал через функцию js - onclick на кнопку отправления , но данные все равно отправляются.

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 ответ 1

0

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

11
  • Почитал про addEventListener и preventDefault и все равно не совсем понял, что мне нужно делать 10 июн 2018 в 17:41
  • preventDefault остановит посылку на сервер (это обычное поведение submit отослать на сервер данные из формы), а там вы добавите проверку, после которой решите, отсылать на сервер или вернуть юзеру на доработку.
    – Kosta B.
    10 июн 2018 в 17:51
  • я просто не понимаю, как мне описать в блоке , где addEventListener вот эту мою функцию и как это все должно выглядеть. Я смотрел примеры, и не пойму как это оформить. Где я должен вызывать свою функцию и где я решаю, отправлять данные или нет 10 июн 2018 в 18:36
  • Все добавил, теперь при выборе любого пункта данные не отправляются совсем, хотя вроде-бы все добавил 10 июн 2018 в 20:30
  • Блок if-else в addEventListener не срабатывает совсем 10 июн 2018 в 20:33

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.