CODEWITHSUNDEEP
javascriptjqueryarrays
Echoing Throughout Tel Numara
Echoing Throughout Tel Numara

Reputation: 353

Javascript : How to properly check if selected option is empty?

I have selected option here, I don't know why If I didn't choose any option that means (-select-) values="" no values, still not work. My select option is an array because it on the loop.

Here is my code

var randomGender_arr = [];
var tae = true;
if(randGender == 'random'){
    $('select[name="randomGender[]"]').each(function(k,v){

        if($(v).val()===''){
            alert('Please select a gender')
        }else{
            randomGender_arr.push($(v).val());
        }

    });
}else{

}

Btw my selected option is here, as you can see my first option is disabled. How could it be consider as empty? And check if when I leave even 1 of the the option (-select-) then return false.

echo'<div style="float:right; position:absolute; top:10px; right:0;">
<label for="randomGender">Gender:</label>
    <select name="randomGender[]" id="randomGender" class="form-control randomGender">
        <option disabled readonly selected>-select-</option>
        <option value="male">Male</option>
        <option value="female">Female</option>
    </select>
</div>
<div style="clear:both;"></div>';

Upvotes: 2

Views: 1550

Answers (1)

Felix Fong
Felix Fong

Reputation: 985

let changeTime = 0;

let opt = document.querySelector(".opt");

let submit = document.querySelector(".submit");

let notif = document.querySelector(".notif");

opt.addEventListener("change",function(){
  changeTime++;
});

submit.addEventListener("click",function(){

  if(changeTime != 0){
    // Success
    notif.textContent = "Success";
    
  }else{
    notif.textContent = "Please chose at less one time!";
  }
  
});
<div class="opt" style="float:right; position:absolute; top:10px; right:0;">
<label for="randomGender">Gender:</label>
    <select name="randomGender[]" id="randomGender" class="form-control randomGender">
        <option disabled readonly selected>-select-</option>
        <option value="male">Male</option>
        <option value="female">Female</option>
    </select>
</div>
<div style="clear:both;"></div>
<button class="submit">Button</button>
<p class="notif"></p>

Upvotes: 2

Related Questions