Disable a submit button when one of the fields is empty - php

Question

I am trying to disable a submit button when one or more of the selectors (generated dynamically) shown in the picture are empty..
I tried the following jQuery code:
<script>
var $submit = $("input[name=store_values]");
$(".ownlevelselect").each(function(){
if($(".ownlevelselect:empty").length>0){
$submit.attr("disabled","disabled");
}else {
$submit.removeAttr("disabled");
}
});
</script>
and these are the relevant parts of my form:
echo "<select class='ownlevelselect' id='ownlevelselect' name='level-".$compi['Competence_ID']."' >";
and the input buttons:
echo "<input type='submit' name='submit_values' value='Save'>";
echo "<input type='submit' name='store_values' value='Store'></form>";
The one I want to disable is the one with name='store_values'

Answer 1

There's something ambiguous in your question, do you mean empty like DOM empty (selects that contains no elements) or empty like selects with an empty value selected ?
If you mean empty like emtpy value, you can try this, handling change event like Shadow Wizard said:
$('document').ready(function(){
var submitButton = $('input[name="store_values"]');
/* Called to disable button on page load, done here but probably possible server-side */
checkValues()
/* Called on change event on dropdowns */
$('select.ownlevelselect').on('change',function(){
checkValues();
});
function checkValues(){
/* Disable button if found an empty <select> (mean, no <option> inside), or a select with an empty value selected */
submitButton.prop('disabled',$(".ownlevelselect > option:selected[value=''],.ownlevelselect:empty").length > 0);
}
});
If you mean empty like "Dom empty" (no option defined inside the select), you can try this (you can place it into a function and call it each time you dynamically add an element)
$('document').ready(function(){
var submitButton = $('input[name="store_values"]');
submitButton.prop('disabled',$(".ownlevelselect:empty").length > 0);
});
EDIT
Be carefull about your IDs, I don't have any relevant part of code to be sure, but you seem to reuse same ID for your selects, which is a bad idea :)
EDIT2
Here's a fiddle, so as you can see if I missed something:
http://jsfiddle.net/d8rb9/

Answer 2

you can use the event onBlur for each select to trigger a function that tests if all the other select are not empty, and then activate the submit button if so.
here is an exemple:
The select Tag :
<select class="ownLevelSelect" onBlur="checkSelects()">
<option></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
The Javascript function:
<script>
function checkSelects(){
// integer to count the number of select with a correct value
var nonEmpty = 0;
// loop on all the select in the page with the class attribute : "ownLevelSelect"
$('.ownLevelSelect').each(function(){
if($(this).val()) {
nonEmpty++;
}
});
//desactivate the submit button if the number of selects in the page <> nonEmpty
($('.ownLevelSelect').length == nonEmpty)? $('#theSubmit').removeAttr("disabled") : $('#theSubmit').attr("disabled","disabled");
}
</script>
and maybe you need to call this function on page load so the button is disabled by default if one of the fields are empty
<script>
$(document).ready(function() {
checkSelects();
});
</script>
Note :
The ID attribut must be unique on the page, so in your code change this :
<select class='ownlevelselect' id='ownlevelselect' name='level-".$compi['Competence_ID']."' >";
By this :
<select class='ownlevelselect' id='ownlevelselect-".$compi['Competence_ID']."' name='level-".$compi['Competence_ID']."' >";
I hope this helped.