Disable button when no option is selected from dropdown

Question

I have an input type button (it can not be submit type because it triggers a secondary action inside a form) that I need to maintain disabled if no selection made on a previous dropdown selector. I have unsuccessfuly tried: this, this, this, and some others...

here it is my form code :

echo "<select class='corpusname' id='corpusname' size='1' name='corpusname' required />
<option value=''>Select a corpus</option>";

// This query gives the other options from a database
$result = mysqli_query($db, "SELECT * FROM corpus_info") or die(mysqli_error($db));
while($cpsmlg = mysqli_fetch_array($result)){
echo "<option value='".$cpsmlg['corpus']."'>".$cpsmlg['title']."</option>";
}
echo "</select>
<a id='theLink' target='_blank'>

// This is the button to be disabled
<input type='button' id='seedoc' class='seedoc' value='See doc' /></a>";

Yes, the things I've tried are js, you can check the links I add — Andrés Chandía, Jan 09 '18 at 12:57
`if no selection made on a previous dropdown selector.` where is that-one (previous drop-down selector)? — Alive to die - Anant, Jan 09 '18 at 12:57
Yes, one drop down and one button, if nothing selected on the dropdown, button disabled — Andrés Chandía, Jan 09 '18 at 13:00

Vignesh Raja · Accepted Answer · 2018-08-20T13:03:16.640

7

Just add an onchange event to the select.

function enableButton()
{
    var selectelem = document.getElementById('corpusname');
    var btnelem = document.getElementById('seedoc');
    btnelem.disabled = !selectelem.value;
}

<select class='corpusname' id='corpusname' size='1' name='corpusname' required onchange="enableButton()"/>
<option value=''>Select a corpus</option>
<option value="1">1</option>
</select>
<input type="button" id="seedoc" disabled value="Submit">

edited Aug 20 '18 at 13:03

answered Jan 09 '18 at 13:00

Vignesh Raja

7,927
1
33
42

that way when he changes back to empty the button will remain enabled – Luis felipe De jesus Munoz Jan 09 '18 at 13:02
Thanks, I could realize now that the problem I had was about quotes, as I'm under php I had to write it this way to work: `onchange=\"document.getElementById('seedoc').disabled=false;\"` – Andrés Chandía Jan 09 '18 at 13:06
No. But before after selecting some item, btn got enabled. Then if you select `Select a corpus` it will be still be enabled. – Vignesh Raja Jan 09 '18 at 13:09

score 1 · Answer 2 · answered Jan 09 '18 at 13:01

Here is a little snippet without the php part, the php part is still the same.

function ValidateDropDwon(dd){
  var input = document.getElementById('seedoc')
  if(dd.value == '') input.disabled = true; else input.disabled = false;
}

<select class='corpusname' id='corpusname' size='1' name='corpusname' required onchange="ValidateDropDwon(this)">
     <option value=''>Select a corpus</option>
     <option value='test'>test</option>
</select>

<input type='submit' id='seedoc' class='seedoc' disabled value='See doc' />

score 0 · Answer 3 · answered Jan 09 '18 at 13:06

since you list jQuery I will use that here.

echo "<select class='corpusname' id='corpusname' size='1'
              name='corpusname' required onChange='enableButton()' />
      <option value=''>Select a corpus</option>";

// This query gives the other options from a database
$result = mysqli_query($db, "SELECT * FROM corpus_info") or die(mysqli_error($db));
while($cpsmlg = mysqli_fetch_array($result)){
    echo "<option value='".$cpsmlg['corpus']."'>".$cpsmlg['title']."</option>";
}
echo "</select>

<a id='theLink' target='_blank'>

// This is the button to be disabled
<input type='button' id='seedoc' class='seedoc' disabled value='See doc' /></a>";

then some javascript on the page to accomplish the onchange()

<script type="text/javascript">
    function enableButton(){
      $("#seedoc").prop('disabled', false);
    }
</script>

I would put in a check, if corpusname = ''... but it will not ever be changed back to a '', so onChange() should suffice.

score 0 · Answer 4 · answered Jan 09 '18 at 13:14

If You have Jquery Included , You Can use this (EASIEST) :

$('#corpusname').on("change",function(){
    if($(this).val() == ''){
        $('#seedoc').attr('disabled','disabled'); //Disables if Values of Select Empty
    }else{
        $('#seedoc').removeAttr('disabled');  
    }
});

Disable button when no option is selected from dropdown

4 Answers4

Linked