Как заставить Select Option работать с кнопкой отключения и включения отправки - PullRequest
0 голосов
/ 24 января 2020

У меня есть форма с textarea, тип ввода: текст, радио и флажок. Также у него есть опция выбора и отключение кнопки отправки.

Идея состоит в том, что если все поля заполнены, кнопка отправки будет включена.

Все работает, как и ожидалось, но, похоже, как мой код игнорирует опцию выбора. Это означает, что кнопка отправки активна, прежде чем я выберу опцию.

Ниже приведен мой код для опции выбора:

var pickOne = $('#pickone option:selected').length === 0;
              if (pickOne) {
              console.log("pickOne: " + pickOne);
                  filled = false;
              } 

Интересно, что-то пропустил. Пожалуйста, посмотрите на мой образец в jsfiddle

HTML

<form action="" method="post" id="subnewtopicform" />Title:
<input type="text" name="title"> <br />
Name:
<input type="text" name="name">
<br/>Description:
<textarea name="description"></textarea>
<br/>Category:
<ul class="list:category categorychecklist form-no-clear" id="categorychecklist">
    <li id="category-19">
        <label class="selectit">
            <input type="radio" id="in-category-19" name="category" value="19">Animation</label>
    </li>
    <li id="category-20">
        <label class="selectit">
            <input type="radio" id="in-category-20" name="category" value="20">Anime</label>
    </li>
</ul>
    <div class="fieldText" id="multi-select">
      <lable>
        <input class="item" name="item1" type="checkbox">Item 1
      </lable>
      <lable>
        <input class="item" name="item2" type="checkbox">Item 2
      </lable>
    </div>
    <p>
         <select name="pickone" id= "pickone" required>
            <option selected="selected" value="">Select one</option>
            <option value="a">aktif</option>
            <option value="l">terkunci</option>
            <option value="b">blokir</option>
     </select>
    </p>
<input type="submit" value="Submit Topic" class="button-primary" name="subnewtopic" id="subnewtopic" disabled="disabled" />
</form>

JS

//function check() {
$('#subnewtopicform').on("keyup change", function() {
    var inputs = $("input");
    var textareas = $("textarea");
    var filled = true;
    var oneChecked = false;
    var multiChecked = false;
    //var pickOne = $('#pickone option:selected').length === 0;
    //var pickOne = false;


    for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].type === "text" && !inputs[i].value) {
            filled = false;
        }

        if (inputs[i].type === "radio" && inputs[i].checked) {
            oneChecked = true;
        }
        if (inputs[i].type === "checkbox" && inputs[i].checked) {
                multiChecked = true;
        }
    }

    if (!oneChecked) {
        filled = false;
    }
    if (!multiChecked) {
        filled = false;
    }
    var pickOne = $('#pickone option:selected').length === 0;
              if (pickOne) {
              console.log("pickOne: " + pickOne);
                  filled = false;
              }

    for (var j = 0; j < textareas.length; j++) {
        if (!textareas[j].value) {
            filled = false;
        }
    }

    if (filled) {
        $("#subnewtopic").removeAttr('disabled');
    } else {
        $("#subnewtopic").prop('disabled', 'disabled');
    }
}
)
/* window.addEventListener("keyup", check);
window.addEventListener("click", check); */

1 Ответ

3 голосов
/ 24 января 2020

, но мой код игнорирует опцию выбора

Нет. Ваш код не игнорирует параметр select.

 <select name="pickone" id= "pickone" required>
        <option selected="selected" value="">Select one</option> //This is selected by default
        <option value="a">aktif</option>
        <option value="l">terkunci</option>
        <option value="b">blokir</option>
 </select>

«Выбрать один» является допустимым параметром и выбран по умолчанию, поэтому этот код:

$('#pickone option:selected').length

Будет return 1 даже если выбран вариант «Выбрать один».

На мой взгляд, лучшее, что вы можете сделать, это проверить select по его значению !== '', учитывая, что это значение «Выбрать один» option которые являются вашим "недействительным" вариантом.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...