disable submit button until selecting a dropdown option without jquery

Question

I have a dropdown select box with "Select one" as a default option and the View report submit button

<select name="time" id="time" required>
 <option value="0" selected>Select one</option>
 <option value="1">Value 1</option>
 <option value="2">Value 2</option>
</select>
<input type="submit" name="act" value="View Report" disabled>

The submit button is disabled until either value 1 or 2 is chosen. How can I do this without using jquery? Thank you.

@Fusei i tried the if else statement if (time.options.value != "0") then document.getElementbyID("btn").disabled = true. I was setting id="btn" for the submit button — treepl, May 27 '21 at 10:12
i also tried if (time.options.length == 0) with the same statement but realized "select one" is a select option already :P — treepl, May 27 '21 at 10:14
Sorry. Then you should use addEventListner. Anyway, my code works fine. Thank you for your cooperation! — pullidea-dev, May 27 '21 at 11:02

score 3 · Accepted Answer · answered May 27 '21 at 10:12

3

As you can see i add an addEventListener to select, so when that change the script will check if value is different to 0

const select = document.getElementById('time');
const submitButton = document.getElementById('submit');
document.getElementById('time').addEventListener('change', () => {
  if (select.value === '0') {
    submitButton.disabled = true;
  } else {
    submitButton.disabled = false;
  }
});

<select name="time" id="time" required>
  <option value="0" selected>Select one</option>
  <option value="1">Value 1</option>
  <option value="2">Value 2</option>
</select>
<input type="submit" name="act" id='submit' value="View Report" disabled>

answered May 27 '21 at 10:12

Simone Rossaini

8,115
1
13
34

thank you so much!!! why is it "===" instead of "==" may I ask? – treepl May 27 '21 at 10:19
Take a look [here](https://stackoverflow.com/questions/523643/difference-between-and-in-javascript) :) – Simone Rossaini May 27 '21 at 10:44
Does anybody have the single Event Listener function? Cause I need to use JQuery V1 and this feature is not supportet in this version.Thanks. – Stan Mar 26 '23 at 11:36
Open a question @Stan – Simone Rossaini Mar 26 '23 at 19:02

score 0 · Answer 2 · answered May 27 '21 at 10:54

You can use .prop() method. Good Luck!

<html>
  <head>
    <title>
    Bottom Nav Bar
    </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <body>
    <select name="time" id="time" required>
     <option value="0" selected>Select one</option>
     <option value="1" >Value 1</option>
     <option value="2">Value 2</option>
    </select>
    <input type="submit" name="act" value="View Report" disabled>
    </body>
     <script>
    $("#time").click(function() {
             if($("select").val() == 0)
           $("input").prop( "disabled", true);
            else $("input").prop( "disabled", false);
        });
    </script>
    </html>

[You might not need jQuery](http://youmightnotneedjquery.com/) :) — Simone Rossaini, May 27 '21 at 10:58
thank you!! our teacher required us not to use jquery for this exercise. but I will start learning it real soon ;D — treepl, May 27 '21 at 13:22

disable submit button until selecting a dropdown option without jquery

2 Answers2