I have a dropdown menu, two input text box, and a submit button. I want the submit button to be disabled until dropdown item is selected AND both input boxes are filled. I looked at several examples including this one and this one but none of these are working for me. Below is my code. Thanks

<form name="myForm">
  Select an option:
  <select id="dropDown" name="dropDown" ng-model="data.dropDown" >
    ** content for dropDown menu, populating it by using Django
  </select>
  From Date:
  <input type="text" id="dateFrom" ng-model="data.date1" />
  To Date:
  <input type="text" id="dateTo" ng-model="data.date2"   />

  <button id="submit" ng-click="submitRequest()" ng-disabled="!(!!data.dropDown && !!data.date1  && !!data.date2)">Submit </button>
</form>

I also tried this method below:

<form name="myForm">
  Select an option:
  <select id="dropDown" name="dropDown" ng-model="data.dropDown" >
    ** content for dropDown menu, populating it by using Django
  </select>
  From Date:
  <input type="text" id="dateFrom" ng-model="data.date1" required/>
  To Date:
  <input type="text" id="dateTo" ng-model="data.date2" required />
  <button id="submit" ng-click="submitRequest()" ng-disabled="myForm.$invalid">Submit </button>
</form>

So initially when the page loads and all fields are empty by default, the Submit button is disabled and the problem is that after all three fields are filled, it doesn't get enabled. Thanks

I have a dropdown menu, two input text box, and a submit button. I want the submit button to be disabled until dropdown item is selected AND both input boxes are filled. I looked at several examples including this one and this one but none of these are working for me. Below is my code. Thanks

<form name="myForm">
  Select an option:
  <select id="dropDown" name="dropDown" ng-model="data.dropDown" >
    ** content for dropDown menu, populating it by using Django
  </select>
  From Date:
  <input type="text" id="dateFrom" ng-model="data.date1" />
  To Date:
  <input type="text" id="dateTo" ng-model="data.date2"   />

  <button id="submit" ng-click="submitRequest()" ng-disabled="!(!!data.dropDown && !!data.date1  && !!data.date2)">Submit </button>
</form>

I also tried this method below:

<form name="myForm">
  Select an option:
  <select id="dropDown" name="dropDown" ng-model="data.dropDown" >
    ** content for dropDown menu, populating it by using Django
  </select>
  From Date:
  <input type="text" id="dateFrom" ng-model="data.date1" required/>
  To Date:
  <input type="text" id="dateTo" ng-model="data.date2" required />
  <button id="submit" ng-click="submitRequest()" ng-disabled="myForm.$invalid">Submit </button>
</form>

So initially when the page loads and all fields are empty by default, the Submit button is disabled and the problem is that after all three fields are filled, it doesn't get enabled. Thanks

• javascript
• jquery
• html
• angularjs
• forms

• Did you try this on the button: ng-disabled="data.dropDown.length < 1 || data.date1.length < 1 || data.date2.length < 1"? It should work because your models are strings. You should also do data validation in submitRequest() afterwards. – Aleksandar Bencun Commented Jun 23, 2016 at 17:53
• I tried that but the button just stays disabled even after I the fields are filled. Could it be because of the dropdown? – Parth Bhoiwala Commented Jun 23, 2016 at 18:03
• 1 Here's a Fiddle that works: jsfiddle.net/U3pVM/25802 Also, provide us with the controller code if you can. Are you declaring scope variables properly? – Aleksandar Bencun Commented Jun 23, 2016 at 18:10
• Thanks for the fiddle, I know what was causing the problem. So for those dateFrom and dateTo textbox fields, I was using jQuery's datepicker UI to create a popup calendar for user to choose date. And when user selects a date, the value of ng-model wasn't updated. How do I fix that? – Parth Bhoiwala Commented Jun 23, 2016 at 18:26
• 1 I'm not really sure if you can bind that like that. Google for JQuery date component in Angular, you should be able to find a solution. – Aleksandar Bencun Commented Jun 23, 2016 at 21:34

2 Answers 2

Your second method works for me (utilizing myForm.$invalid) if I add required to the dropdown element. I've created a plunkr you can play with here.

<form name="myForm">
  Select an option:
  <select id="dropDown" name="dropDown" ng-model="data.dropDown" required>
    <option>red</option>
    <option>blue</option>
    <option>green</option>
  </select><br/>
  From Date:
  <input type="text" id="dateFrom" ng-model="data.date1" required/><br/>
  To Date:
  <input type="text" id="dateTo" ng-model="data.date2" required /><br/>
  <button id="submit" ng-click="submitRequest()" ng-disabled="myForm.$invalid">Submit</button>
</form>

Note: I used Angular 1.4 in the plunkr as you did not specify which version of Angular you are working with.

Edit: OP stated that issue was created by using JQuery's datepicker. May I suggest using angular-ui boostrap datepicker? Plunker example - Angular-UI Bootstrap docs

Why dont you use ng-disabled="myForm.myName.$pristine" because pristine will check for each variable inserted in textboxes

please check small example here.. ng pristine example