Я пытаюсь вывести предупреждение, когда кто-то нажимает на кнопку. «Пожалуйста, выберите размер». Я хочу проверить, выбран ли размер, и если да, кнопка будет работать, в противном случае отобразить предупреждение.

Вот моя функция:

<script type="text/javascript">
  function SelectSize() {
    if ($('#SelectSize').is(':selected')) {  
    }
    else {
      alert('Please Select Size');
      return false; 
    }
  }
</script>

Вот HTML:

<select name="size"
        id="selectSize"
        class="form-control form-control-select"
        id="group_1"
        style="display:block;">
  <option value="">Select Size</option>
 @foreach($landing->attributes as $size)
  <option value="{{$landing->id}}-{{$size->size}}">{{$size->size}}</option>
 @endforeach
</select>

Нво:

<button type="submit"
        class="btn btn-primary"
        id="cartButton"
        style="background-color:#FF6A13; border: none; display:block;"
        onclick="return SelectSize();">
  <p>
    <i class="fa fa-shopping-cart"></i>
    Add to cart
  </p>
</button>
0
Yadav Sanjay 14 Сен 2020 в 21:29

2 ответа

Лучший ответ

Прежде всего, обратите внимание, что вы используете два идентификатора в элементе select. Кроме того, селектор внутри вашей функции типографически неверен.

Теперь, понимая селектор, #selectSize - это ваш select элемент, и чтобы узнать опцию выбора, вы должны использовать option:selected, где :selected - это фильтр для поиска выбранной опции . Думаю, остальное было бы легко понять.

Использование trim() избавляет от неприятностей, если значение состоит только из пробелов.

function SelectSize() {
  if ($('#selectSize option:selected').val().trim()) {
    //your code
  } else {
    alert('Please Select Size');
    return false; 
  }
}
0
Pranav Rustagi 14 Сен 2020 в 19:10

Ваше условие if неверно. Вот код условия, которое должно работать.

if($( "#SelectSize option:selected" ).val() !== ""){
    //do your stuff here
}
0
Sumit 14 Сен 2020 в 18:38