How to get information from select options and input, another input? - javascript

How to copy input, select in other input all together ?
I have image please check for more information.

I don't know if I can properly answer to your question. Here is the following code, written in Angular.JS
Script.js
var myApp = angular.module("myModule",[])
myApp.controller("myController",function($scope){
$scope.cartype="";
$scope.caryear="";
$scope.carcolor="";
$scope.carvalue="";
});
demo.html
<html ng-app="myModule">
<head>
<title>welcome</title>
<script src="./angular.min.js"></script>
<script src="./script.js"></script>
</head>
<!-- ng-app is an directive which autobootstraps angularjs application
its a starting point of angularjs application -->
<body ng-controller="myController">
car type: <input type="text", ng-model="cartype"/>
car year model: <input type="text", ng-model="caryear"/>
car color: <input type="text" , ng-model="carcolor"/>
car value: <input type="text", ng-model="carvalue"/>
final : {{cartype}}
{{caryear}}
{{carcolor}}
{{carvalue}}
</body>
</html>

Related

Angularjs Radio button is not giving default value in json

I am implementing below radio button in my project. I am using angularjs tech.
Once I am loading the page on browser but value is not coming in JSON object.I already i given as attribute in the tag as checked="true".
when i am clicking once again on the radio button that time json object coming with value.
<input type="radio" ng-model="formModel.internationalClient" ng-value="1">Yes
<input type="radio" ng-model="formModel.internationalClient" ng-value="0" ng-checked="true">No
json object before clicking radio button
{}
after click the radio button
{
"internationalClient": 0
}
So, ActuallyI want the value once i am loading the page on browser.
I want below result once i am opening my page on browser.
{
"internationalClient": 0
}
If this is a single form model (not repeated), just initialize in your controller:
$scope.formModel.internationalClient = $scope.formModel.internationalClient || 0;
It's shorthand for: "Set ..internationalClient to itself, unless ..internationalClient is null". That way, if it is an international client and the value is returned, this operation is idempotent.
If it's a form in ng-repeat, etc:
<form ng-init="formModel.internationalClient = 0">
Reference: https://docs.angularjs.org/api/ng/directive/ngInit
Here's the plnkr for your case.
https://plnkr.co/edit/TPbYAr0h3BIXQ1RzuMrv?p=preview
Hope this helps.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-radio-input-directive-production</title>
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
</head>
<body ng-app="radioExample">
<script>
angular.module('radioExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.formModel = {
internationalClient : 0
}
}]);
</script>
<form name="myForm" ng-controller="ExampleController">
<label>
<input type="radio" ng-model="formModel.internationalClient" ng-value="1">
Yes
</label><br/>
<label>
<input type="radio" ng-model="formModel.internationalClient" ng-value="0" ng-checked="true">
No
</label><br/>
<tt>json = {{formModel}}</tt><br/>
</form>
</body>
</html>
In your Javascript file you can set the default value
$scope.formModel.InternationalClient = 0;
Then have your radio buttons change the value

Angular js remove leading & trailing spaces from the input textbox

See this Plunkr : http://plnkr.co/edit/YAQooPn0UERDI5UEoQ23?p=preview
Type text as "_______what___ever_____"
(without quotes & _ represents spaces.)
Angular is removing spaces (from front & back & not in between) from the model (which is my desired behavior), but my textbox is keeping the spaces.
how can I remove the spaces from the textbox also ? i.e. I want the textbox also to reflect the value in model.
Edit: Better explanation of my needs.
For Eg:
If I typed "___What_Ever____" ( without quote & _ is space),
1) my textbox will show me same what i have typed i.e. "___What_Ever____"
2) while my model will show me "What Ever".
I want my textbox's value also to be as "What Ever".
HTML :
<!DOCTYPE html>
<html ng-app="app">
<head>
<link rel="stylesheet" href="style.css" />
<script data-require="jquery#1.9.0" data-semver="1.9.0" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.js"></script>
<script data-require="angular.js#1.0.7" data-semver="1.0.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="MyCtrl">
<input type="text" ng-model="modelVal">
<br>
model value is "{{modelVal}}"
</body>
</html>
JS :
angular.module('app', [])
.controller('MyCtrl', function($scope) {
$scope.modelVal="";
})
Would this work? - Plunker
ng-blur doesn't work with your Plunker because the version of AngularJS you are loading (1.0.7) is quite old. I replaced it with the latest version (1.5.6). I also use ng-trim="false" to get the correct text input by the user.
Markup
<body ng-controller="MyCtrl">
<input type="text" ng-model="modelVal" ng-change="change()" ng-blur="blur()" ng-trim="false">
<br>
model value is "{{newModelVal}}"
</body>
JS
angular.module('app', [])
.controller('MyCtrl', function($scope) {
$scope.modelVal="";
$scope.change = function () {
$scope.newModelVal = $scope.modelVal;
}
$scope.blur = function () {
$scope.modelVal = $scope.newModelVal.trim();
}
})
You can do this,
<body ng-controller="MyCtrl">
<input type="text" ng-change="modelVal = modelVal.split(' ').join('')" ng-model="modelVal">
<br>
model value is "{{modelVal}}"
</body>
DEMO
EDIT:
You can use ngTrim which is provided by Angular itself
<input type="text" ng-trim="true" ng-model="modelVal">
<br> model value is "{{modelVal}}"
DEMO

Sync two textboxes with different models

I have a simple angular app with two textboxes with different models
First Email: <input ng-model="firstEmail"/>
Second Email: <input ng-model="secondEmail"/>
Now, if something is typed in first email, I want it to get populated in second email but if second email is manually edited, then this binding should stop i.e. further changes in first email should't affect second email.
My code:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.1/angular.min.js"></script>
<script>
var emailApp = angular.module('emailApp', []);
emailApp.controller('EmailCtrl', ['$scope', function ($scope) {
}]);
</script>
</head>
<body ng-app="emailApp">
<div ng-controller="EmailCtrl">
First Email: <input ng-model="firstEmail"/>
<br>
Second Email: <input ng-model="secondEmail"/>
</select>
</div>
</body>
</html>
You need to use watch to bind the content in secondEmail from the firstEmail.
$scope.$watch('firstEmail',function(newVal,oldVal){
$scope.secondEmail=newVal;
})
Plunker
Use ng-change directive to update the value.
<body ng-app="emailApp">
<div ng-controller="EmailCtrl">
First Email: <input ng-model="firstEmail" ng-change="secondEmail=firstEmail"/>
<br>
Second Email: <input ng-model="secondEmail"/>
</div>
</body>
Working Plunkr
This could help you. Thanks.

how to set code on input text field in angular js?

I make a auto complete .First I download my data from server and then write anything on text field it filter with my stationCode.I have two thing in my json array stationCode and stationName array .Now I need to set the selected station code on input text field .Can you please tell me what is better way to set the value of station code on input text field whenever user select any row of autosuggest.
here is my code.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/foundation.css" />
</head>
<body ng-app="myapp">
<div ng-controller="cnt">
<input type="text" ng-model="searchText.stationCode">
<table ng-show="searchText.stationCode && searchText.stationCode.length != 0">
<tr id="$index"ng-repeat= "a in d.data | filter:searchText" ng-click="getselectedRow(searchText)">
<td> {{a.stationCode}} </td>
<td> {{a.stationName}} </td>
</tr>
</table>
</div>
</body>
<script src="js/angular.js" type="text/javascript"></script>
<script src="js/app.js" type="text/javascript"></script>
</html>
function cnt($scope,$http){
$http.get("http://184.106.159.143:8180/FGRailApps/jservices/rest/stationList")
.success(function (data) {
//alert(data);
$scope.d=data;
}).error(function(data){
alert("error")
});
$scope.getselectedRow=function(obj){
alert(obj.stationCode)
}
}
fiddle
http://jsfiddle.net/66z4dxsy/1/
Please disable web security of browser

javascript on change using while loop

Error:
TypeError: d.options is undefined while(i<=d.options.length){
Hi i have this javascript of mine which has the select option to choose from. and from choosing from the select options it will display to the textbox field im using this onchange and using it while loop. can someone help me how to figure this out?? using while loop code?
Here's my code below
<!DOCTYPE html>
<html>
<head>
<title>Activity 2 while loop</title>
<script type="text/javascript">
function tellMe(d){
var i = 0;
while(i<=d.options.length){
if(d.listbox1.options[i].selected == true){
d.choose.value = d.listbox1.options[i].text;
}
}
}
</script>
</head>
<body>
<form name="form1">
<p>Girl's qualities you want?</p>
<select name="listbox1" size="5" onchange="tellMe(this.form)">
<option>Pretty</option>
<option>Sexy</option>
<option>Hot</option>
<option>Intelligent</option>
<option>Funny</option>
</select>
<br />
<p>
You Choose: <input type="text" name="choose" />
</p>
</form>
</body>
</html>
any help is muchly appreciated! thanks
Fiddle
Fixed it:
<!DOCTYPE html>
<html>
<head>
<title>Activity 2 while loop</title>
<script type="text/javascript">
function tellMe(d){
document.getElementById("choose").value = d.value;
}
</script>
</head>
<body>
<form name="form1">
<p>Girl's qualities you want?</p>
<select name="listbox1" size="5" onchange="tellMe(this)">
<option>Pretty</option>
<option>Sexy</option>
<option>Hot</option>
<option>Intelligent</option>
<option>Funny</option>
</select>
<br />
<p>
You Choose: <input type="text" id="choose" name="choose" />
</p>
</form>
</body>
</html>
You were trying to get this.form but it should have been this, then the value of this (this.value).
Then, all you had to do was set the input type with name='choose', however I gave it an ID of choose to make it easier to select, then gave that value d.value, which was the value of listbox1.
You are passing the form element, which doesn't have options. Change d.options to d.listbox1.options
while(i<=d.listbox1.options.length){
After that is fixed your second problem will become apparant, whch is that you fail to increment i:
while(i<=d.listbox1.options.length){
...
i++;
}
You aren't incrementing i. You need to add i++ at the end of your while loop. You also need to target listbox1 in your while loop.
function tellMe(d){
var i = 0;
while(i<=d.listbox1.options.length){ // <-- use d.listbox1.options.length
if(d.listbox1.options[i].selected == true){
d.choose.value = d.listbox1.options[i].text;
}
i++; // <-- add increment here
}
}

Categories