JavaScript enable button if the two select option has value

user_16293071 0
Viewed 388

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

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

<label class="up-label">Language</label>
<select id="language" class="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 class="up-label">Level</label>
<select id="level" class="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" class="btn btn-primary" 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

laravel php jquery javascript
2 Answers

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>

user_4012780

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