verificare completare select-uri

Discutii si intrebari legate de scripturi si functii JavaScript, jQuery si Ajax, cod JavaScript in general.
sterica
Mesaje:285

verificare completare select-uri

Salutare,

Am o pagina web care incarca aprox 300 de selecturi, cum pot face ca atunci cand se apasa butonul de trimite a valorior din selecturi sa ma atentioneze daca este vreun select necompletat si bineinteles valorile sa nu fie trimise in sql daca nu sunt completate toate.

Multumesc!
MarPlo Mesaje:4343
Salut
Pune "required" la select-urile (si alte elemente de formular) care trebuie completate; - indica faptul ca respectivul camp trebuie sa fie completat inainte de a trimite datele.
Poate fi suficient cu acest atribut.

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>
- Demo:
Sel1:
Text:
Sel2:

Sau mai complex, acest script cu javascript [ca fapt divers, dar nu mai e necesar[ (pune "disable" la butonul submit, deci si la trimiterea formularului, daca nu sunt completate toate <select>-urile):

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>
Demo:
- Complete all the select elements.
Sel1:
Sel2:
Text:
Sel3:
sterica Mesaje:285
multumesc mult, foarte usor cu "required"

Subiecte similare