Html Question posted in
Some basic documentation can be found here.

Html – Disable submit button if any of option from the list not selected from the drop down list

I am trying to link the submit button with the option list. If there is any one item of the from the option list of both list got selected from the drop down list then only the submit button will enabled.

Example – User have to select one option from category {ABC,DEF,GHI} and one option from category {XYZ,MNO,PQR} then the tag submit will activate. If one option from these two was missing then tag submit

const dropdown1 = document.getElementById("dropdown");
const dropdown2 = document.getElementById("dropdown");
const submitbutton = document.getElementById("btn");

dropdown1.addEventListener("input", function() {
  submitbutton.disabled = dropdown1.value = dropdown2.value === "";
});
<form>
  <select id="dropdown1">
    <option>ABC</option>
    <option>DEF</option>
    <option>GHI</option>
  </select>

  <select id="dropdown2">
    <option>XYZ</option>
    <option>MNO</option>
    <option>PQR</option>
  </select>

  <input type="submit" id="btn" disabled>
</form>

willn’t activate.

Find below code.

Try with above code but not happen.

Tags:

5

Answers


  1. 0

    Update your javascript code, the code has Incorrect Assignment in Condition, incorrect getElementById. Here is the code that will enable button only when both dropdown are selected.

    const dropdown1 = document.getElementById("dropdown1");
const dropdown2 = document.getElementById("dropdown2");
const submitbutton = document.getElementById("btn");

function checkDropdowns() {
    submitbutton.disabled = dropdown1.value === "" || dropdown2.value === "";
}

dropdown1.addEventListener("input", checkDropdowns);
dropdown2.addEventListener("input", checkDropdowns);
    Login or Signup to reply.
  2. 0

    The code has several errors. Below is a proposal about how to fix it.

    1. Added empty options to selectors. This way, the selector starts with a value equal to an empty string.
    2. Changed IDs in document.getElementById.
    3. Use a Array.prototype.forEach to add an event listener to each selector.
      • The benefit of doing this is that it will no matter which dropdown is used first.
    4. Change the expression assigned to the button’s disabled attribute.
      • Use the option text instead because the select options don’t explicitly include a value attribute. This doesn’t follow the "best practices" but has the advantage that the logic could later use other values to enable / disable the button without setting the value properties for the option elements.
    const dropdown1 = document.getElementById("dropdown1");
const dropdown2 = document.getElementById("dropdown2");
const submitbutton = document.getElementById("btn");

[dropdown1, dropdown2].forEach(function(e) {
  e.addEventListener("input", function() {
    submitbutton.disabled = dropdown1[dropdown1.selectedIndex].text === "" 
      || dropdown2[dropdown2.selectedIndex].text === "";
  });
});
    <form>
  <select id="dropdown1">
    <option></option>
    <option>ABC</option>
    <option>DEF</option>
    <option>GHI</option>
  </select>

  <select id="dropdown2">
    <option></option>
    <option>XYZ</option>
    <option>MNO</option>
    <option>PQR</option>
  </select>

  <input type="submit" id="btn" disabled>
</form>

    Below is the same code with a couple of changes.

    1. It uses the value property to satisfy the "best practices" evangelists.
    2. Instead of using the strict equality operator, it uses the Logical Not operator as an empty string that is falsy, and any other string is truthy.
    const dropdown1 = document.getElementById("dropdown1");
const dropdown2 = document.getElementById("dropdown2");
const submitbutton = document.getElementById("btn");

[dropdown1, dropdown2].forEach(function(e) {
  e.addEventListener("input", function() {
    submitbutton.disabled = !dropdown1.value  
      || !dropdown2.value;
  });
});
    <form>
  <select id="dropdown1">
    <option></option>
    <option>ABC</option>
    <option>DEF</option>
    <option>GHI</option>
  </select>

  <select id="dropdown2">
    <option></option>
    <option>XYZ</option>
    <option>MNO</option>
    <option>PQR</option>
  </select>

  <input type="submit" id="btn" disabled>
</form>
    Login or Signup to reply.
  3. 0

    This is a workaround that you may try:

    const dropdown1 = document.getElementById("dropdown1");
const dropdown2 = document.getElementById("dropdown2");
const submitButton = document.getElementById("btn");

dropdown1.addEventListener("input", () => {
  submitButton.disabled = dropdown1.value === "" || dropdown2.value === "";
});

dropdown2.addEventListener("input", () => {
  submitButton.disabled = dropdown1.value === "" || dropdown2.value === "";
});
    <form>
  <select id="dropdown1">
    <option value=""></option>
    <option>ABC</option>
    <option>DEF</option>
    <option>GHI</option>
  </select>

  <select id="dropdown2">
    <option value=""></option>
    <option>XYZ</option>
    <option>MNO</option>
    <option>PQR</option>
  </select>

  <input type="submit" id="btn" disabled>
</form>

    I’ve added <option value=""></option> to be the default option together with another EventTarget: addEventListener() method for dropdown2 so that the User have to select one option from category, and that’s when the Submit button will only be enabled.

    OUTPUT

    OUTPUT

    This output is a Web Apps based on the tag that was previously in the question.

    Login or Signup to reply.
  4. 0

    The issue is that you are using wrong operator in the event listener logic.

    Ensure the dropdown elements are referenced correctly with dropdown1 and dropdown2 IDs.

        const dropdown1 = document.getElementById("dropdown1");
    const dropdown2 = document.getElementById("dropdown2");
    const submitbutton = document.getElementById("btn");
    
    function updateSubmitButtonState() {
      submitbutton.disabled = dropdown1.value === "" || dropdown2.value === "";
    }
    
    dropdown1.addEventListener("input", updateSubmitButtonState);
    dropdown2.addEventListener("input", updateSubmitButtonState);
           <form>
        <select id="dropdown1">
          <option value="">Select a category</option>
          <option>ABC</option>
          <option>DEF</option>
          <option>GHI</option>
        </select>
      
        <select id="dropdown2">
          <option value="">Select a category</option>
          <option>XYZ</option>
          <option>MNO</option>
          <option>PQR</option>
        </select>
      
        <input type="submit" id="btn" disabled>
      </form>

    and in this script the updateSubmitButtonState function checks whether either dropdown has not selected a value (""). The submit button is disabled if either dropdown is unselected.

    Login or Signup to reply.
  5. 0

    the normal HTML5 way for coding this with required attribute:
    (nothing will be submitted if required forms element are missing)
    and there no needs in JS code
    HTML5 form engine will show a corresponding warning for required information

    select { 
  width   : 18em; 
  display : block;
  margin  : .7em;
  }
    <form id="my-form">
  <select name="dropdown1" required >
    <option value="" selected disabled> please select dropdown1 value </option> 
    <option>ABC</option>
    <option>DEF</option>
    <option>GHI</option>
  </select>

  <select name="dropdown2" required >
    <option value="" selected disabled>please select dropdown2 value </option> 
    <option>XYZ</option>
    <option>MNO</option>
    <option>PQR</option>
  </select>

  <button type="reset">reset</button>
  <button type="submit">submit</button>
</form>

    If you really want to see a disabled button:

    const myForm = document.querySelector('#my-form');

myForm.addEventListener('submit', e =>
  {
  e.preventDefault(); // disable form submission (just for this test)
  
  // get data  
  let formInputs = Object.fromEntries( new FormData(myForm) );

  console.clear();
  console.log(formInputs);
  })
myForm.onreset =_=> 
  {
  console.clear();
  myForm['bt-submit'].disabled = true;
  }
myForm.addEventListener('input', e =>
  {
  myForm['bt-submit'].disabled = (myForm.dropdown1.value==='') 
                              || (myForm.dropdown2.value==='');
  })
    select { 
  width   : 18em; 
  display : block;
  margin  : .7em;
  }
    <form id="my-form">
  <select name="dropdown1" required >
    <option value="" selected disabled> please select dropdown1 value </option> 
    <option>ABC</option>
    <option>DEF</option>
    <option>GHI</option>
  </select>

  <select name="dropdown2" required >
    <option value="" selected disabled>please select dropdown2 value </option> 
    <option>XYZ</option>
    <option>MNO</option>
    <option>PQR</option>
  </select>

  <button type="reset">reset</button>
  <button name="bt-submit" type="submit" disabled>submit</button>
</form>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search