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

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

Related

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

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>

Greek letters aren't displayed in my web browser's page

I 've written the following code snippet in Eclipse html form which include headings and titles in greek characters.
My problem is that these characters can't be correctly displayed in my web browser's page although I've set UTF-8 Encoding. Instead, they are displayed like question symbols (????).
My code snippet:
var product = $scope.product = []; // Custom JavaScript creates a JavaScript Object and binds it to the current AngularJS $scope of the form as a variable named "product".
$scope.addProduct = function () { // We make a function named "addProduct".
var product = {}; // We add a new "product" to the Array.
product.Category = $scope.Category;
product.Description = $scope.Description;
if (!!$scope.camForm.fields[0].element[0].files[0]) {
product.Details = $scope.camForm.fields[0].element[0].files[0].name; // We check whether a file is uploaded.
} else {
return; // If no file is uploaded, it returns "undefined".
}
product.Price = $scope.Price;
$scope.product.push(product); // We use the value of the "product" input field to add a new "product" to the Array.
$scope.Category = ""; // We clear the TextBox "���������".
$scope.Description = ""; // We clear the TextBox "���������".
$scope.Details = ""; // We clear the TextBox "������������".
$scope.Price = ""; // We clear the TextBox "����".
};
$scope.removeProduct = function (index) { // We make a function named "removeProduct".
var category = $scope.product[index].Category; // We find product's Category using "index" from the Array and binds it to the current AngularJS $scope of the form as a variable named "category".
$scope.product.splice(index, 1); // We use an index to remove a "product" from the Array.
}
$scope.isAddFormValid = function () { // We make a function named "isAddFormValid".
return ($scope.Category &&
$scope.Description &&
$scope.camForm.fields[0].element[0].files[0] &&
$scope.Price) ? true : false; // If all of the 4 parameters of variable "product" are added, the value will be "true", otherwise the value will be "false".
}
camForm.on('form-loaded', function() { // We hook into the lifecycle of Camunda SDK JS Form.
camForm.variableManager.createVariable ({ // We "create" (declare) a new process variable
name:'product', // named 'product' and
type:'json', // provide as type information 'json' used for serialization.
value:product
});
});
camForm.on('submit', function(evt) { // We hook into the lifecycle of Camunda SDK JS Form.
if (product.length<1) { // If no "product" is added,
evt.submitPrevented = true; // an event handler prevents the form from being submitted by setting the property "submitPrevented" to 'true'.
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form role="form" name="insertForm" accept-charset="utf-8">
<h2><b>����� ���������</b></h2> <!-- We set the heading of the HTML Table. -->
<div>
<table style="width:100%;">
<thead> <!-- We group the header content in the HTML Table. -->
<tr> <!-- The header content of the HTML Table is not repeated. -->
<th style="width:140px;">���������</th>
<th style="width:305px;">���������</th>
<th style="width:250px;">������������</th>
<th style="width:75px;" >���� (�)</th>
<th></th>
</tr>
</thead>
<tbody ng-repeat="x in product track by $index"> <!-- The HTML Table is populated from the JSON Array "product", using a "ng-repeat" directive which is assigned to each row of the Table in order to repeat all the objects of the Array. -->
<tr> <!-- Each row of the HTML Table consists of 4 HTML Input Form fields and 1 button. -->
<td><input style="width:140px;" type="text" value="{{x.Category}}" /></td>
<td><input style="width:305px;" type="text" value="{{x.Description}}" /></td>
<td><input style="width:250px;" type="text" value="{{x.Details}}" /></td>
<td><input style="width:75px;" type="number" value="{{x.Price}}" /></td>
<td><input type="button" ng-click="removeProduct($index)" value="Remove" /></td> <!-- The "ng-click" directive is assigned to the "Remove" button and calls the function named "removeProduct" with the current "$index" when this button is clicked. -->
</tr>
</tbody>
</table>
</div>
<hr> <!-- We separate the HTML content. -->
<div>
<h2><b>���������� ��� ������</b></h2> <!-- We set the heading of the HTML Form. -->
<div class="row"> <!-- We set the "1st row" of the HTML Form. -->
<div class="col-md-6"> <!-- We use "md" for "medium" screen devices of width equal to or greater than 992px and "6" for adding 6 columns. -->
<div class="form-group"> <!-- We use "form-group" for optimum spacing. -->
<label class="control-label" for="category">���������</label>
<div class="controls">
<input style="width:140px;" id="category" type="text" ng-model="Category" /> <!-- The "ng-model" directive binds the value of the "���������" input field to the created variable "Category" in AngularJS. -->
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="Description">���������</label>
<div class="controls">
<input style="width:305px;" id="Description" type="text" ng-model="Description" /> <!-- The "ng-model" directive binds the value of the "���������" input field to the created variable "Description" in AngularJS. -->
</div>
</div>
</div>
</div>
<div class="row"> <!-- We set the "2nd row" of the HTML Form. -->
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="Details">������������</label>
<div class="controls">
<input style="width:250px;"
id="Details"
type="file"
cam-variable-name="Details"
cam-variable-type="File"
cam-max-filesize="10000000" ng-model="Details" /> <!-- The "ng-model" directive binds the value of the "������������" input field to the created variable "Details" in AngularJS. -->
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="price">���� (�)</label>
<div class="controls">
<input style="width:75px;" id="price" type="number" ng-model="Price" /> <!-- The "ng-model" directive binds the value of the "���� (�)" input field to the created variable "Price" in AngularJS. -->
</div>
</div>
</div>
</div>
<div class="row"> <!-- We set the "3rd row" of the HTML Form. -->
<div class="col-md-4"> <!-- We use "md" for medium screen devices of width equal to or greater than 992px and "4" for adding 4 columns. -->
<div class="controls">
<input type="button" ng-click="addProduct()" ng-show="isAddFormValid()" value="Add" /> <!-- The "ng-show" directive shows the input element ("Add" button) only if the "isAddFormValid()" expression (function) returns "true". The "ng-click" directive is assigned to the "Add" button and calls the function named "addProduct()" when this button is clicked. -->
</div>
</div>
</div>
</div>
<script src="insert-products-and-specifications.js" charset="utf-8" cam-script type="text/form-script"></script> <!-- We call the external script file ("insert-products-and-specifications.js"). -->
</form>
</body>
</html>
Does anyone have any idea on this please?
Thanks,
Steve
The following works :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form role="form" name="startForm" accept-charset="utf-8">
<h2>Ώρα για προμήθειες</h2>
</form>
</body>
</html>
Try this one:
<!doctype html>
<html lang="el">
<head>
<meta charset="utf-8">
<title>Hello, world!</title>
</head>
<body>
<form role="form" name="startForm" accept-charset="utf-8">
<h2>Ώρα για προμήθειες</h2>
</form>
</body>
</html>
I managed to solve my issue.
I didn't modify something in my code.
The solution was to change some general settings in my eclipse editor.
For anyone who may face the same encoding issue in eclipse, I wrote the following steps:
check and maybe change the following preferences in your eclipse.
The encoding of the text editor should be UTF-8.
– General -> Editors -> Text Editors -> Spelling -> Encoding -> Default UTF-8
The encoding for the HTML files should be UTF-8. For that, you can configure to use the workspace encoding.
– Web -> HTML-Files -> Use workspace encoding
The encoding of your workspace should be UTF-8.
– General -> Workspace -> Text file encoding -> Other -> UTF-8
You should also check the encoding of your resource. For that, please click with the right mouse button on your eclipse project and choose Properties. In the new opened window, click on Resource and check the value of the Text file encoding

How to dynamically change css style based on INPUT value?

We have some data that user enters and the result after calculation. Now I want depending on the value that the user gets after calculation to change css style.
My html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<style type="text/css">
.not_good { solid red; background:#eee;}
.good { solid green; background:#C0E9F6;}
</style>
<script type="text/javascript">
var BuckwheatCa = 4
function convcase(word) {
document.convert.Ca.value = BuckwheatCa * document.convert.Buckwheat.value
};
</script>
</head>
<body>
<FORM ACTION="#" NAME="convert">
Buckwheat, gramm
<INPUT TYPE=TEXT NAME="Buckwheat"
ONKEYUP="convcase(document.convert.Buckwheat.value)" >
<table>
<tr>
<td>Ca</td> <td><INPUT TYPE=TEXT NAME="Ca" DISABLED></td>
</tr>
</table>
</FORM>
</body>
</html>
so is there a way to create a function with if...else statement using document.convert.Ca.value variable value witch will change css style of text in <td> if the variable is < 10 for example?
You can do it using normal javascript using this in your code
if(value<10){
document.getElementById("sample").style.color="blue";
}
OR You can do it using jQuery:
if(value<10){
$("sample").css("color","blue");
}
Choose whichever appeals to you.
Of course you must have IDs as #Barmar suggested:
<td id='sample'>Ca</td> <td><INPUT TYPE=TEXT NAME="Ca" DISABLED></td>
The above code now changes the style of Ca alone as the id exists for that tag.
And you can make changes to any of the css properties: http://www.blooberry.com/indexdot/css/propindex/all.htm
function convcase(word) {
document.convert.Ca.value = BuckwheatCa * document.convert.Buckwheat.value
// now add css comparison
if(document.convert.Ca.value < 10){
// using jQuery to access the 'td' and set the css on it
$('td').css('font-family', 'arial');
} else {
// whatever you want
}
};

Conditional form not working

I am new to javascript and I am trying to add a conditional field to a form. I have looked at these posts:
How do you create a hidden div that doesn't create a line break or horizontal space??
conditional display of html element forms
I have come up with this little example so far which works fine.
<html>
<head>
<script language="javascript">
function cucu(form){
if(form.check.checked){
document.getElementById("cucu").style.visibility="visible";
}
else{
document.getElementById("cucu").style.visibility="hidden";
}
}
function load()
{
document.getElementById("cucu").style.visibility="hidden";
}
</script>
</head>
<body onload="load()">
<form id="form">
<input type="checkbox" name="check" onclick="cucu(this.form)" >
<div id="cucu">
CUCU
</div>
</form>
</body>
<html>
I have tried the same method on a larger side and the only change is that the hidden element is a text field but it just doesnt' work.
This is the part of the form:
Album: <INPUT TYPE="checkbox" NAME="checkAlbum" onclick="checkAlbum(this.form)" id="idAlbum">
<div id="divAlbum" >
Choisir un album : <input type="text" name="Album" list="Albums">
<datalist id="Albums">
<?php
$requete = 'SELECT DISTINCT titreAlbum FROM Album';
$resultat = mysqli_query($connexion, $requete);
while($row = mysqli_fetch_assoc($resultat)){
echo '<option value="'.$row['titreAlbum'].'">';
}
?>
</datalist> <br><br>
</div>
My head looks as follows:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html ; charset=UTF-8" />
<title>BLABLA</title>
<link rel="stylesheet" type="text/css" href="include/styles.css">
<script language="javascript" >
function hideElements(){
document.getElementById("divAlbum").style.visibility="hidden";
}
function checkAlbum(form){
if(form.checkAlbum.checked){
document.getElementById("divAlbum").style.visibility="visible";
}else{
document.getElementById("divAlbum").style.visibility="hidden";
}
}
</script>
</head>
I really don't know what the problem is. I've checked the functions again and again. Any suggestions for the possible error? Thanks
The reason your button is not working is that this refers to the clicked input itself. The form property on the input refers to the value of the form attribute, not the actual form. In reality you don't need the form attribute, you can simply use this.checked to see if the corresponding input is currently checked.
Album: <INPUT TYPE="checkbox" NAME="checkAlbum" onclick="checkAlbum(this)" id="idAlbum">
function checkAlbum(cb){
if(cb.checked){
document.getElementById("divAlbum").style.visibility="visible";
}else{
document.getElementById("divAlbum").style.visibility="hidden";
}
}
Beyond this I would suggest that you consider not applying your JavaScript inline. Keeping your code separate from your mark up improves readability and can help prevent errors. You might consider using the jQuery framework as it will make this sort of thing much easier.
$(function(){
$('#idAlbum').on('change', function() {
// use change instead of click in case there's a label involved
$('#divAlbum').toggle(this.checked);
});
});

getting the value of a textbox with jQuery

I have this html code
<html>
<head>
<title>JQuery Problem 2</title>
<script type="text/javascript" src="jquery-1.4.min.js"></script>
<script type="text/javascript" src="problem2.js"></script>
</head>
<body>
<div id="game">
<form onsubmit="return false">
<p>
Guess:
<input type="text"/>
<input type="submit" value="Go"/>
</p>
<p>
<strong>Number of guesses:</strong>
<span>0</span>
</p>
<p>
<strong>Last guess:</strong>
<span>None</span>
</p>
<table border="1" cellpadding="4" cellspacing="1" style="width: 400px">
<tr>
<th>Guess</th>
<th>Result</th>
</tr>
</table>
</form>
</div>
</body>
</html>
When the user enters his value i want to retrieve the numerical value that they entered in the textbox, with jQuery, how would i go about doing that?
You can select checkboxes using the :text selector but generally I would recommend using an ID or class, as appropriate.
The value of a text box can be obtained using val().
For example, this function listens for change events on all text boxes and alerts the new value:
$(":text").change(function() {
alert($(this).val());
});
First I would add either a class or an ID to your input. Once you do that, you can retrieve it very easily like so:
var value = $('.yourClass').val();
or if you give it an ID:
var value = $('#yourID').val();
For the unique control in the page, to assign an ID is a good practice.
For looped element such as table list, use position selector is better.

Categories