CODEWITHSUNDEEP
javascriptjquery
abcid d
abcid d

Reputation: 2953

How to get Select Option working with disable and enable submit button

I have a form with textarea, input type: text, radio and checkbox. Also it has select option and disable submit button at first.

An idea is if all fields are filled in then the submit button will be enable.

Everything is working as expected, but it seems like my code ignores select option. That means the submit button is enable before I do select option.

Below is my code for select option:

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

I wonder if I miss something. Please take a look at my sample in 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); */

Upvotes: 0

Views: 227

Answers (1)

Marcelo The Mage Coder
Marcelo The Mage Coder

Reputation: 2202

but it seems like my code ignores select option

No. Your code is not ignoring the select option.

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

"Select one" is a valid option and is selected by default, so this code:

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

Will return 1 even if "Select one" is the selected option.

In my opinion the best thing you can do is validate the select by it's value being !== '' considering that's the value of "Select one" option which are your "invalid" option.

Upvotes: 3

Related Questions