Populate Input field value based on selected dropdown - javascript

I am stuck trying to simplify the user inputs by automatically populating the input value based on the above selection box in a model.
Context:
I am trying to populate the account payments by using standard items.
In my DB I have the following:
item | value
item 1 | Value 1
item 2 | Value 2
item 3 | value 3
I would have the following in my modal code
<div class="modal-body">
<label class="label-control">Membership Number:</label>
<div class="input-group">
<input type = "text" class = "form-control" name = "membership" value="">
</div>
<label class="label-control">Rank:</label>
<div class="input-group">
<select type="text" class="selectpicker" data-sytle="select-with-transition" name="item" data-size="6">
#foreach ($payments as $p)
<option value ={{$p->item}}>{{$p->item}}</option>
#endforeach
</select>
</div>
<label class="label-control">Amount</label>
<div class="input-group">
<input type="text" class="form-control" name = "amount" value="xxxx">
</div>
I would like to populate the value="xxxx" based is what selected in the item drop down.
So if Item 3 is selected from the drop down, the value 3 is populated in the value field.
I understand that I require an onchange javascript, but I am a little lost.
Saving this to the DB will not be an issue, just the javascript to update the value field is where I get stuck


Give an ID "selectBox" to selectbox And "textField" to the text box. By using Jquery then you can populate its value.
$(document).on('change', 'select#selectBox', function(){
$('#textField').val();
});
Also make small change in your loop, add quotes " " to value.
#foreach ($payments as $p)
<option value ="{{$p->item}}">{{$p->item}}</option>
#endforeach

Related

Get selected value of dynamically created multiple dropdown using jquery

I want to ask 2 questions.
I have created dynamic dropdown (class and section) using jquery and
assign the id's like [myclass0, myclass1] [mysection0, mysection1]
etc. Now I want to retrieve the values of both and store in a
variable or array then I will use these variable for sending it to
database. I have done the following code but it's not working and
even it's not showing the ID of dynamic created dropdown.
How to select the values of classes and sections and how to loop them so that valid data will be sent to database?
here is my code
<div class="row">
<div class="col-sm-12" id="dynamic_select">
</div>
</div>
<input type="button" name="" value="Add Class" class="btn btn-primary" id="addclass" style="margin-top: 50px;" onclick="addMore();">
here is my JS:
function addMore(){
var inps = $('#dynamic_select > div:last').data('count')+1 || 0;
$('#dynamic_select').append('<div data-count="'+inps+'"><div class = "col-sm-5"><label>Select Class</label> <select id="childclass'+inps+' " class="form-control"> <option value="9">IX</option><option value="10">X</option><option value="11">FSC I</option><option value="12">FSC II</option></select> </div> <div class = "col-sm-5"><label>Select Section</label> <select id="childsection'+inps+' " class="form-control"> <option value="A">A</option><option value="B">B</option><option value="C">C</option></select></div> <a class=remove>X</a>');
}

Try this (example for #dynamic_select):
$('#dynamic_select select').val();
or
$('#dynamic_select).on('change', function() {
$('#dynamic_select select').val();
});

How to get selected record in AngularJS?

For e.g.
<select class="form-control" id="group_id" name="group_id"
ng-model="form.group_id" ng-options="match_group.id as match_group.name for match_group in match_groups"
required="" ng-change="getGroupWiseMatches()">
....some code
</select>
But match_group instance will have id, name and xyz columns.
Now on the select of match_group, I also want value of xyz column.
How can we get it?
Any help will be appreciated.

Your ng-options expression has the following format: "select as label for value in array".
The select-part is the result that is bound to your ng-model. So if you change your code to the following:
<select class="form-control" id="group_id" name="group_id"
ng-model="form.group"
ng-options="match_group as match_group.name for match_group in match_groups"
required="" ng-change="getGroupWiseMatches()">
....some code
</select>
your variable form.group would contain the entire group object, instead of just the id.
Check this plunker to see it in action

I found the work around for this,
My html will be as it is,
<select class="form-control" id="group_id" name="group_id"
ng-model="form.group_id" ng-options="match_group.id as match_group.name for match_group in match_groups"
required="" ng-change="getGroupWiseMatches()">
....some code
</select>
And in js I am fetching selected entry as,
var found_record = $scope.match_groups.find(obj => obj.id === selected_id);
$scope.form.xyz = found_record.xyz;

angularjs two select with same model

I am not sure if this is possible or not, i am having single data list (ng-model) which is getting passed to more then 4 select as below HTML code. When i select some option in one select box then all another selected value in all select box get un-selected, i guess because of same ng-model is used in more then 4 select box.
Controller :-
angular.module('App').controller('RoleDialogController',
['$scope','entity', 'RoleType',
function($scope, entity,RoleType) {
$scope.role = entity;
$scope.roletypelist = RoleType.query();
});
HTML :-
<div class="form-group">
<label translate="App.role.role" for="field_regions">role</label>
<select class="form-control" id="field_regions" multiple
name="roletype" ng-model="role.roletypelist"
ng-options="roletype as roletype.roleTypeName for roletype in froletypelist = (roletypelist | filter:search | rolelistfilter:120:130) track by roletype.id "></select>
</div>
<div class="form-group">
<label translate="App.role.products" for="field_regions">products</label>
<select class="form-control" id="field_regions" multiple
name="roletype" ng-model="role.roletypelist"
ng-options="roletype as roletype.roleTypeName for roletype in froletypelist = (roletypelist | filter:search | rolelistfilter:130:140) track by roletype.id "></select>
</div>

Creating dropdown at runtime and bind dropdown values after that - not working ngOptions

I am generating dropdown at runtime using AngularJs. I also want to bind corresponding options with it which will be generated based on dropdown type being created.
<div class="form-group" ng-repeat="attrib in col1Attribs">
<label class="control-label" for="txtCode">{{attrib.displayText}}</label>
<select class="form-control"
ng-options="item.configValue for item in configOptions(attrib.configType)" />
</div>
My controller has following method.
$scope.configOptions = function (type){
return SmartCache.get(type); //SmartCache is my cacheFactory
}
EDIT:
Here is my data when parameter type = 'Status'
[{"$id":"1","people":[],"configId":"STAT001","configValue":"Active","startDate":"2014-01-31T00:00:00","endDate":"9999-01-01T00:00:00","description":"Active","status":1,"parentId":null,"isSelectable":true,"timestamp":"AAAAAAAAKHM=","isSystemData":true,"children":[],"parent":null,"personAttributes":[],"items1":[]},{"$id":"2","people":[],"configId":"STAT002","configValue":"Suspended","startDate":"2014-01-31T00:00:00","endDate":"9999-01-01T00:00:00","description":"Suspended","status":1,"parentId":null,"isSelectable":true,"timestamp":"AAAAAAAAKHQ=","isSystemData":true,"children":[],"parent":null,"personAttributes":[],"items1":[]},{"$id":"3","people":[],"configId":"STAT003","configValue":"Terminated","startDate":"2014-01-31T00:00:00","endDate":"9999-01-01T00:00:00","description":"Terminated","status":1,"parentId":null,"isSelectable":true,"timestamp":"AAAAAAAAKHU=","isSystemData":true,"children":[],"parent":null,"personAttributes":[],"items1":[]},{"$id":"4","people":[],"configId":"STAT004","configValue":"Deleted","startDate":"2014-01-31T00:00:00","endDate":"9999-01-01T00:00:00","description":"Deleted","status":1,"parentId":null,"isSelectable":true,"timestamp":"AAAAAAAAKHY=","isSystemData":true,"children":[],"parent":null,"personAttributes":[],"items1":[]}]
I am able to achieve my task using code below but not using ngOptions.
<div class="form-group" ng-repeat="attrib in col1Attribs">
<label class="control-label" for="txtCode">{{attrib.displayText}}</label>
<select class="form-control">
<option ng-repeat="c in configOptions(attrib.configType)" value="{{c.configId}}">
{{c.configValue}}</option>
</div>
</div>
Try this jsFiddle

I can't see the rest of your code. Here is a snippet of how to create the dropdown:
<select data-ng-options="e.description for e in configOptions" data-ng-model="selectedOption" />
Demo:http://plnkr.co/edit/YcuqZ1gs4iDAAgfLrZPO?p=preview

Probably you are trying this
Use as
<select class="form-control"
ng-options="item.configId as item.configValue for item in configOptions(attrib.configType)" />
configId adds as option value and configValue as display value.

Select tag not changing to selected value when being watched

I'm having an issue with the select tag's title not changing when a new value is selected. I have another div which only appears when a certain value is chosen from the select.
register.html
<label class="item item-input item-select">
<span class="input-label">
</span>
<select name="idselect" ng-model="data.idType" class="pretty-select">
<option value="">
{{ "select-id-type" | translate }}
</option>
<option
ng-repeat = "idType in idTypes"
value = "{{ idType.shortcode }}">
{{ idType.name }}
</option>
</select></label>
A little later in the code...
<label
class = "item item-input item-stacked-label inherit-bgc"
ng-show = "data.idType === 'passport'">
<span class="input-label">
{{ "expiration-date" | translate }}
</span>
<input type="date" ng-model="data.idExpiry" name="expirydate"></label>
config.js
config.idTypes = {
1: {
name: "ID Card",
shortcode: "idcard"
},
2: {
name: "Passport",
shortcode: "passport"
}
};
It DOES hide and show the expiration date input correctly (ie when "passport" is the selected value). What it does not do is have the word "Passport" show up in the selector when selected, unless you select Passport --> ID --> Passport --> ID --> Passport in that order (and exactly 3 times), or change the focus to the input element.
Any ideas? I already tried using $watch and a global variable, and while it also shows and hides the input, the selector still isn't updating.

Categories