button did not disable correctly angular js javascript - javascript

I need to disable my reset button if form field empty. I am trying to do it using below code. Please check this sample
<div class="col-sm-3">
<select class="form-control" ng-model="SelectedYear"
ng-options="label for label in Years" ng-
change="UpdateNumberOfDays()">
<option value="">--Year--</option>
</select>
</div>
<div class="col-sm-3">
<select class="year-text form-control" ng-model="SelectedMonth"
ng-disabled="!SelectedYear" ng-options="label for label in Months"
ng-change="UpdateNumberOfDays()">
<option value="">--Month--</option>
</select>
</div>
<div class="col-sm-3">
<select class="form-control" ng-model="SelectedDay"
ng-disabled="!SelectedMonth || !SelectedYear"
ng-options="label for label in Days | limitTo:NumberOfDays">
<option value="">--Day--</option>
</select>
</div>
<div class="form-group">
<label for="name" class="col-sm-3 control-label">NIC/NIN </label>
<div class="col-sm-9">
<input type="text" class="form-control" ng-model="san.nic"
placeholder="NIC/NIN">
</div>
</div>
<div class="form-group">
<label for="name" class="col-sm-3 control-label">Adds </label>
<div class="col-sm-9">
<input type="text" class="form-control" ng-model="san.adds"
>
</div>
</div>
I am trying to disable button using below code
<button type="button" ng-disabled="!san.nic || !san.adds || !SelectedMonth || !SelectedYear || !SelectedDay">Reset</button>
Above button is did not disabled correctly. But when i remove month,year,day its working. according to my requirement i can not change that month,year,day model names.
below button is working well. how i disable reset button using all the models
<button type="button" ng-disabled="!san.nic || !san.adds">Reset</button>

Related

Set text field min and max value based on the option selected in previous dropdown

I have a drop down and a text box next to it.
When some value is selected in the dropdown, the textbox should allow min and max characters based on the selected option.
Suppose I select option 1, then the textbox next to it should allow minimum 10 characters and max 16 characters.
How to achieve it?
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label class="required">Select Type</label>
<select class="form-control" id="prooftype">
<option value="0" disabled> </option>
<option value="name1">name1</option>
<option value="name2">name2</option>
<option value="name3">name3</option>
<option value="name4">name4</option>
</select>
</div>
</div>
<div class="col-sm-6">
<div class="form-group md-form">
<label class="required" for="id" data-error="wrong" data-success="right">
<i class="fa fa-info pr-2"></i>
Enter Identity Card Number
</label>
<input id="id" type="number" minlength="3" class="form-control validate" autocomplete="off" onkeypress="return blockSpecialChar(event)" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" maxlength="20" />
</div>
</div>
</div>
you have to change a little your code
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label class="required">Select Type</label>
<select class="form-control" id="prooftype">
<option value="0/0" disabled> </option>
<option value="10/16">name1</option>
<option value="20/32">name2</option>
<option value="30/48">name3</option>
<option value="40/64">name4</option>
</select>
</div>
</div>
<div class="col-sm-6">
<div class="form-group md-form">
<label class="required" for="id" data-error="wrong" data-success="right">
<i class="fa fa-info pr-2"></i>
Enter Identity Card Number
</label>
<input id="id" type="text" minlength="3" class="form-control validate" autocomplete="off" onkeypress="return blockSpecialChar(event)" maxlength="20" />
</div>
</div>
</div>
and jQuery
$('#prooftype').change(function(){
var tmp = $(this).val().split('/');
$('input#id').attr('minlength',tmp[0]).attr('maxlength',tmp[1]);
})
If you pass the the option value of 12/16 to the backend, obviously the data will reflect. I think you need something like this:
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label class="required">Select Type</label>
<select class="form-control" id="prooftype">
<option value="0/0" disabled> </option>
<option value="name1">name1</option>
<option value="name2">name2</option>
<option value="name3">name3</option>
<option value="name4">name4</option>
</select>
</div>
</div>
<div class="col-sm-6">
<div class="form-group md-form">
<label class="required" for="id" data-error="wrong" data-success="right">
<i class="fa fa-info pr-2"></i>
Enter Identity Card Number
</label>
<input id="inputid" type="text" minlength="3" class="form-control validate" autocomplete="off" onkeypress="return blockSpecialChar(event)" maxlength="20" />
</div>
</div>
</div>
And your JQuery
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
var selectedopt;
$('#prooftype').change(function(){
selectedopt= $(this).val();
//Add your condition here, and check the selected option value:
if(selectedopt== "name1")
{
//Set input min and max value based on the selected option value.
$('#inputid').attr('minlength','10').attr('maxlength','16');
}
elseif(selectedopt== "name2")
{
$('#inputid').attr('minlength','20').attr('maxlength','25');
}
// And so on........
})
</script>

grey out a field until a certain drop down option is selected

I am doing a school task and I'm stuck.
I want to gray out the input field based on what is selected in the drop-down menu.
https://jsfiddle.net/xdvan6vf/
function ccGrey() {
if (document.getElementById("creditcard").onchane){
alert("this doesnt work very well")
}
}
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-16 control-label" for="payment-method">Payment Method</label>
<div class="col-md-16">
<select id="payment-method" name="payment-method" class="form-control order-form">
<option value="1">Online</option>
<option value="2">In Store</option>
</select>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-16 control-label" for="creditcard">Credit Card Number</label>
<div class="col-md-16">
<input id="creditcard" name="creditcard" type="text" placeholder="CC Number" class="form-control input-md order-form" onclick="ccGrey">
</div>
</div>
I didn't understand what was your purpose but for handling select selected index changing,you must work on onChange on SELECT element not INPUT event like this:
function selectChanged() {
var x = document.getElementById("payment-method").value;
document.getElementById("creditcard").disabled = (x == 1);
}
//Checking for initial run
selectChanged();
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-16 control-label" for="payment-method">Payment Method</label>
<div class="col-md-16">
<select id="payment-method" name="payment-method" class="form-control order-form" onChange="selectChanged()">
<option value="1">Online</option>
<option value="2">In Store</option>
</select>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-16 control-label" for="creditcard">Credit Card Number</label>
<div class="col-md-16">
<input id="creditcard" name="creditcard" type="text" placeholder="CC Number" class="form-control input-md order-form">
</div>
</div>

Fill the form with the HTTP response

This is the HTML form of a hospital, of which the fields has to be filled using an API GET call when the page is loaded.
I am using HTML, Javascript, AngularJS, and my API is coded in java.
I could fill all the input fields via GET request API, except the select.
My problem is in select the option in the form based on the API response . There are 4 select tags in the form, which are co-related.
Here is the HTML code:
<form role="form">
<div class="form-group">
<label class="control-label">Name of Hospital</label>
<input type="text" class="form-control" id="name" ng-model="hospital.name" required="true">
<!-- <p class="help-block">Name of the hospital</p> -->
</div>
<div class="form-group">
<label>Address</label>
<textarea class="form-control" rows="3" ng-model="hospital.address" id="address"></textarea>
<!-- <p class="help-block">Address of the hospital</p> -->
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label>Country</label>
<select class="form-control" id="countries" onchange="countries(this.value)" ng-model="hospital.countryItemSelected">
<option ng-repeat="country in countries" value="{{country.id}}">{{country.name}}</option>
</select>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label>State</label>
<select class="form-control" id="states" onchange="states(this.value)" ng-model="hospital.stateItemSelected">
<option ng-repeat="state in states" value="{{state.id}}">{{state.name}}</option>
</select>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label>City</label>
<select class="form-control" id="cities" onchange="cities(this.value)" ng-model="hospital.cityItemSelected">
<option ng-repeat="city in cities" value="{{city.id}}">{{city.name}}</option>
</select>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label>Locality</label>
<select class="form-control" id="localities" onchange="localities(this.value)" ng-model="hospital.localityItemSelected">
<option ng-repeat="locality in localities" value="{{locality.id}}">{{locality.name}}</option>
</select>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label>PIN</label>
<input type="text" class="form-control" id="pin" ng-model="hospital.pin">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label>General Timings</label>
<input type="text" class="form-control" id="generalTimings" ng-model="hospital.timings">
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<label>Website</label>
<input type="text" class="form-control" id="website" ng-model="hospital.website">
<!-- <textarea class="form-control" rows="6"></textarea> -->
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<label>Email ID</label>
<input type="email" class="form-control" id="emailID" required="true" ng-model="hospital.emial">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label>Mobile No.</label>
<input type="text" class="form-control" id="mobile" required="true" ng-model="hospital.mobile">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label>Phone No.</label>
<input type="text" class="form-control" id="phone" ng-model="hospital.phone">
</div>
</div>
</div>
<button type="submit" class="btn btn-primary" id="formSubmit" disabled>Save</button>
Country options is loaded during page load, via API call, he gets respective states of that country. By choosing a state, he gets the respective cities, and same with the locality. Again this happens via API call.
This is the API call which is made to get the result.
All other input fields are filled, except the select ones.
hospital.countryItemSelected = response.data.success_Result.hospital.country;
hospital.stateItemSelected = response.data.success_Result.hospital.state;
hospital.cityItemSelected = response.data.success_Result.hospital.city;
hospital.localityItemSelected = response.data.success_Result.hospital.locality;
I get the names of country, state, city, locality in this result.
On load of page, the select options with respect to these result has to be selected, with all other fields.
The names of each select field is stored in different tables.
How to solve this problem of selecting the items ?? Is there a need to get the ID's of these names to solve this problem ??
There is an option to edit the the details in the form as well. So, the select options are loaded via GET APIs.

How to get show text box, When change the dropdown list

I have one drop down list which has two options
<div class="form-group">
<span class="col-sm-4 control-span">Member Type</span>
<div class="col-sm-8">
<select class="form-control" id="membertype" name="membertype" ng-model="membertype">
<option value="">-- Select Member Type --</option>
<option value="owner">Owner</option>
<option value="member">Member</option>
</select>
</div>
</div>
When i select the owner, I have to show one text box section
<div class="form-group">
<span class="col-sm-4 control-span">Your Membership Number</span>
<div class="col-sm-8">
<input type="text" class="form-control" id="membernumber" name="membernumber" placeholder="Membership Number">
</div>
</div>
When i select the member, I have to show one text box section
<div class="form-group">
<span class="col-sm-4 control-span">Owner Membership Number</span>
<div class="col-sm-8">
<input type="text" class="form-control" id="ownernumber" name="ownernumber" placeholder="Owner Membership Number">
</div>
</div>
It is happening at onchange event.
If i not selecting no one, These two text box sections will be hide.
How to make this functionality
you can user ng-show or ng-hide to do this, here is a demonstration,
when ng-model="membertype" is equals to 'owner' it will show the below div;
<div class="form-group" ng-show="(membertype == 'owner')">
<span class="col-sm-4 control-span">Your Membership Number</span>
<div class="col-sm-8">
<input type="text" class="form-control" id="membernumber" name="membernumber" placeholder="Membership Number">
</div>
</div>
when ng-model="membertype" is equals to 'member' it will show the below div;
<div class="form-group" ng-show="(membertype == 'member')">
<span class="col-sm-4 control-span">Owner Membership Number</span>
<div class="col-sm-8">
<input type="text" class="form-control" id="ownernumber" name="ownernumber" placeholder="Owner Membership Number">
</div>
</div>
<div class="form-group">
<span class="col-sm-4 control-span">Member Type</span>
<div class="col-sm-8">
<select class="form-control" id="membertype" name="membertype" ng-model="membertype">
<option value="">-- Select Member Type --</option>
<option value="owner">Owner</option>
<option value="member">Member</option>
</select>
</div>
</div>
<div class="form-group" ng-show="membertype == 'member'">
<span class="col-sm-4 control-span">Your Membership Number</span>
<div class="col-sm-8">
<input type="text" class="form-control" id="membernumber" name="membernumber" placeholder="Membership Number">
</div>
</div>
divs to show on event change in dropdown
<div class="form-group" ng-if="membertype == 'owner'">
<span class="col-sm-4 control-span">Owner Membership Number</span>
<div class="col-sm-8">
<input type="text" class="form-control" id="ownernumber" name="ownernumber" placeholder="Owner Membership Number">
</div>
</div>
On page load set textbox visibility to none using style
<div class="col-sm-8">
<input type="text" class="form-control" id="ownernumber" name="ownernumber" placeholder="Owner Membership Number" style="display:none" >
</div>
OnChange of dropdownlist call the script
<script>
yourfunction(value)
{
if(value === "owner")
{
document.getElementById("ownernumber").style.display="block";
}
}
</script>

enable textbox based on dropdown select do not work

enable textbox based on dropdown select do not work
Somehow my textbox is still disabled regardless any selection from the dropdown
can anyone help me on this problem. the code is stated as below.
<div class ="container">
<script>
function changeTextBox()
{
var val=$('#category').val();
if(val==='option1' || val==='option2'|| val==='option3' || val==='option4')
{
$('#subcategory').removeAttr("disabled");
}
else{$('#subcategory').prop('disabled', true);}
}
</script>
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="category" class="col-sm-2 control-label" id ="category">Category</label>
<div class="col-sm-3">
<select class="form-control" id="category" name="category" onChange="changeTextBox();">
<option value="select">--select--</option>
<option value="Option1">Option1</option>
<option value="Option2">Option2</option>
<option value="Option3">Option3</option>
<option value="Option4">Option4</option>
</select>
</div>
</div>
<div class="form-group">
<label for="sub" class="col-sm-2 control-label">Sub Category Type</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="subcategory" disabled/>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-1">
<button type="submit" class="btn btn-default">Add</button>
</div>
<div class="col-sm-1">
<button type="submit" class="btn btn-default">Edit</button>
</div>
<div class="col-sm-1">
<button type="submit" class="btn btn-default">Delete</button>
</div>
</div>
</form>
</div>
The reason it doesn't work is because you have set the id="category" for both the label and the select. Your id has to be unique! Remove the id from the label and all will work well. See this fiddle for example. Cheers!

Categories