CODEWITHSUNDEEP
javascripthtml
treepl
treepl

Reputation: 35

disable submit button until selecting a dropdown option without jquery

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.

Upvotes: 1

Views: 2133

Answers (2)

pullidea-dev
pullidea-dev

Reputation: 1803

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>

Upvotes: 0

Simone Rossaini
Simone Rossaini

Reputation: 8162

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>

Upvotes: 3

Related Questions