how do I enable the button if I select 2 from my two separate select options?

{{-- 1st Select Option --}}

<label >Language</label>
<select id="language"  name="language" onchange="changebutton()">
  <option value="" selected disabled>language</option>
  @foreach( $languages as $language )
  <option value="{{ $language->id }}">{{ $language->language }}</option>
  @endforeach
</select>

{{-- 2nd Select Option --}}

<label >Level</label>
<select id="level"  name="level" onchange="changebutton()">
  <option value="" selected disabled>Levels</option>
  @foreach( $levels as $level)
  <option value="{{ $level->id }}">{{ $level->level}}</option>
  @endforeach
</select>

{{-- Button --}}

<button type="submit"  id="savebtn" disabled>Save</button>

<script>
   function changebutton(){
     var language = document.getElementById('language')
     var level = document.getElementById('level ')
     var savebtn = document.getElementById('savebtn ')
     if(language.value == '' && level .value == '')
     {
       savebtn.disabled = true;
     }
     else
     {
       savebtn.disabled = false;
     }
  }
</script>

i need to select 1 from each select option to enable the button please help and the button should be disable if only 1 from select option is selected and it should be both to enable

CodePudding user response：

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) {
  if (select1 != "" && select2 != "") {
    $('button').prop('disabled', false);
  } else {
    $('button').prop('disabled', true);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Select 1
<select >
  <option></option>
  <option value="test">Test</option>
</select>
<br><br>
Select 2
<select >
  <option></option>
  <option value="test">Test</option>
</select>
<br><br><button disabled="disabled">Button</button>

CodePudding user response：

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;
     }
  }