How to make save button as disable when select dropdown value is "select"

Question

I have a form which i need to select one value and i am setting default value to the select dropdown as "select".

If dropdown selected value = "select" then save button should be disabled.

Other wise enabled.

My Html :

<select class="form-control" name="studymode" ng-model="data.studymode" ng-options="studymode.id as studymode.name for studymode in studymodes" ng-disabled="!eEditMode[$index]">
            <option value="">Select Mode of Study</option>
                 </select>

<button ng-show="saveButton && eEditMode[$index]" class="btn btn-primary" type="submit" ng-click="update('education',$index);" ng-disabled="eForm.$invalid || dataLoading">Save Changes </button>

Could you also post the angular code you have tried? – Clyde Lobo Jul 04 '16 at 12:23 — Clyde Lobo, Jul 04 '16 at 12:23

score 1 · Answer 1 · answered Jul 04 '16 at 12:42

You can do it this way as well:

function validate() {
  var submitbutton = document.getElementById("submitbutton");
  var ddl = document.getElementById("selector");
  
  var selectedValue = ddl.options[ddl.selectedIndex].value;
  if (selectedValue == "select") {
    submitbutton.disabled = true;
  } else {
   submitbutton.disabled = false;
  }
}

$( ".form-control" ).change(function() {
  validate();
});

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</head>
<body>
  
  
  <select id="selector" class="form-control" name="studymode" ng-model="data.studymode" ng-options="studymode.id as studymode.name for studymode in studymodes" ng-disabled="!eEditMode[$index]">
  <option value="select"></option>
  <option value="">Select Mode of Study</option>
</select>

<button id="submitbutton" disabled ng-show="saveButton && eEditMode[$index]" class="btn btn-primary" type="submit" ng-click="update('education',$index);" ng-disabled="eForm.$invalid || dataLoading">Save Changes </button>
html angularjs shareeditflag asked 1 min ago Kalaiyarasi M 408 add a comment | show 1 more comment

  
  
</body>
</html>

This works fine. BTW I needed to add some id for the selector and button to access them through javascript.

I hope this helps you.

It is not in angularjs. It is example in jquery. – Kalu Singh Rao Jul 04 '16 at 13:01 — Kalu Singh Rao, Jul 04 '16 at 13:01

score 0 · Answer 2 · edited May 23 '17 at 12:16

Instead of disabling your save button on a certain value, as you are using a form, mark your select as required. And use a placeholder for your select.

Then use ng-disabledin conjunction with $invalid to disable you button until it has a selected value.

Here's an example, apply this to your button :

ng-disabled="form.userForm.$invalid"

Where form.userForm is the nameof your form.

With this your button will be enabled only if a value is selected.

See this arcticle for information on `$invalid

score 0 · Answer 3 · answered Jul 04 '16 at 12:34

You can use data.studymode.length < 1 in your ng-disabled as shown below:

<select class="form-control" name="studymode" ng-model="data.studymode" ng-options="studymode.id as studymode.name for studymode in studymodes" ng-disabled="!eEditMode[$index]">
            <option value="">Select Mode of Study</option>
                 </select>

<button ng-show="saveButton && eEditMode[$index]" class="btn btn-primary" type="submit" ng-click="update('education',$index);" ng-disabled="eForm.$invalid || dataLoading || data.studymode.length < 1">Save Changes </button>

Prakash Dharuman · Accepted Answer · 2016-07-04T18:47:13.287

0

Try this

<form name="eForm">
<select class="form-control" name="eForm.studymode" ng-model="data.studymode" ng-options="studymode.id as studymode.name for studymode in studymodes" ng-disabled="!eEditMode[$index]" required> <option value="">Select Mode of Study</option> </select> <button ng-show="saveButton && eEditMode[$index]" class="btn btn-primary" type="submit" ng-click="update('education',$index);" ng-disabled="eForm.$invalid || dataLoading">Save Changes </button>

edited Jul 04 '16 at 18:47

answered Jul 04 '16 at 18:25

Prakash Dharuman

37
3

Thank you i got it – Kalaiyarasi M Jul 05 '16 at 04:55

How to make save button as disable when select dropdown value is "select"

4 Answers4