Forum

Cod: Selectaţi tot

<form action="#" method="post" id="frm1">
Sel1: <select name="sl1" required>
<option value="">Select</option>
<option value="s1v1">s1v1</option>
<option value="s1v2">s1v2</option>
</select><br>
Text: <input type="text" /><br>
Sel2: <select name="sl2"required>
<option value="">Select</option>
<option value="s2v1">s2v1</option>
<option value="s2v2">s2v2</option>
</select><br>
<input type="submit" id="sbmt1" value="Send"  />
</form>

Cod: Selectaţi tot

- Complete all the select elements.
<form action="#" method="post" id="frm1">
Sel1: <select name="sl1" required>
<option value="">Select</option>
<option value="s1v1">s1v1</option>
<option value="s1v2">s1v2</option>
</select><br>
Sel2: <select name="sl2"required>
<option value="">Select</option>
<option value="s2v1">s2v1</option>
<option value="s2v2">s2v2</option>
</select><br>
Text: <input type="text" /><br>
Sel3: <select name="sl3"required>
<option value="">Select</option>
<option value="s3v1">s3v1</option>
<option value="s3v2">s3v2</option>
</select><br>
<input type="submit" id="sbmt1" value="Send" disabled />
</form>

<script>
//function for object to check if all the <select>s in form are selected
//receives the for id (fid), and id of the submit button (sid)
//it works if the first <option> in each <select> is not a valid value for submission
function checkAllSelect(fid, sid){
  var form = document.getElementById(fid);
  var scls = form.querySelectorAll('select'); //get all selects in this form
  var sid = document.getElementById(sid);  //submit button

  //if all the $scls have option selected, removes disabled of $sid
  function chkScls(){
    var re = true;
    for(var i=0; i<scls.length; i++){
      //if no option selected, other that first option
      if(scls[i].selectedIndex ==0){
        sid.setAttribute('disabled', 'disabled');
        re = false;
        break;
      }
    }
    if(re ==true) sid.removeAttribute('disabled');
    return re;
  }

  //register chkScls() to change event to each select
  for(var i=0; i<scls.length; i++) scls[i].addEventListener('change', chkScls);

  //when form is submited, if chkScls() returns false, alert msg
  form.addEventListener('submit', function(){
    if(chkScls() ==false) alert('Coplete all <select>s');
  });
}

//create instance object of the checkAllSelect to use it with for #frm1
var sfrm1 = new checkAllSelect('frm1', 'sbmt1');
</script>