verificare completare select-uri

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

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
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
multumesc mult, foarte usor cu "required"

Subiecte similare