JavaScript enable button if the two select option has value
You need to get the change event from your select then check if they are empty or not.
https://api.jquery.com/on/
https://api.jquery.com/prop/
$('.select1').on('change', function() {
checkSelects($(this).val(), $(".select2").val());
});
$('.select2').on('change', function() {
checkSelects($(this).val(), $(".select1").val());
});
function checkSelects(select1, select2) {
let buttonProp = select1 != "" && select2 != "" ? false : true;
$('button').prop('disabled', buttonProp);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Select 1
<select class="select1">
<option></option>
<option value="test">Test</option>
</select>
<br><br>
Select 2
<select class="select2">
<option></option>
<option value="test">Test</option>
</select>
<br><br><button disabled="disabled">Button</button>
your code is perfectly fine except a few minor issues. First of all on these two lines, remove the space after both id
var level = document.getElementById('level ')
var savebtn = document.getElementById('savebtn ')
And on the line that you're checking if either one is empty, that should be an OR statement
if(language.value == '' && level .value == ''){
//Since you're using an "AND" (&&) statement,
//it is evaluating to true on when both selects
//have an empty value. If either one has any
//value, the statement is returning to false, and
//`savebtn.disabled = true;` part is not getting executed
savebtn.disabled = true;
}
With all that being said, here's how I would rewrite the changebutton
function
function changebutton(){
var language = document.getElementById('language')
var level = document.getElementById('level') //Removed additional space after level
var savebtn = document.getElementById('savebtn') //Removed additional space after savebtn
if(language.value == '' || level.value == '') //Changed AND (&&) operator to OR (||) operator
{
//gets executed if language or level has empty value
savebtn.disabled = true;
}
else
{
savebtn.disabled = false;
}
}