Friday, May 17, 2024
 Popular · Latest · Hot · Upcoming
96
rated 0 times [  103] [ 7]  / answers: 1 / hits: 36023  / 8 Years ago, thu, june 23, 2016, 12:00:00

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


More From » jquery

 Answers
1

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


[#61666] Tuesday, June 21, 2016, 8 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
jazminuniquer

Total Points: 63
Total Questions: 121
Total Answers: 96

Location: Cambodia
Member since Thu, May 21, 2020
4 Years ago
;