CODEWITHSUNDEEP
htmlangularjs
Kalaiyarasi M
Kalaiyarasi M

Reputation: 93

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

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>

Upvotes: 0

Views: 1508

Answers (4)

Prakash Dharuman
Prakash Dharuman

Reputation: 37

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>

Upvotes: 0

user5730329
user5730329

Reputation:

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.

Upvotes: 1

Rahul Arora
Rahul Arora

Reputation: 4533

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>

Upvotes: 0

Marc_Alx
Marc_Alx

Reputation: 1441

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

Upvotes: 0

Related Questions