I am trying to change my textbox value after click on a button using javascript and change ng-model value of angular js.
The Javascript code working fine and change the textbox value, but I also want to change my ng-model value according to the text box.
<!doctype html>
<html ng-app>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular-resource.min.js"></script>
<script>
function tryi()
{
document.getElementById('newtry').value="any value";
}
</script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" id="newtry">
<input type="button" onclick="tryi();"value="click here">
<hr>
<h1>Hello {{yourName}}!</h1><hr>
</div>
</body>
</html>
I think you have included angular-resource and not included angularjs
add this line
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
the code is working fine
Here is the plunkr link: http://plnkr.co/edit/CPX1Mhn2CkmY6wZWHvya?p=preview
Related
I just finished the W3 Schools certification course on JavaScript.
Can somebody explain why the returnValue() function works for the inField element, but not for the output element.
I'm guessing I have to create a variable and then reference the variable with the output element. Even if that is the solution I'd like to understand the logic behind this necessity.
Any assistance is appreciated.
HTML
<html>
<head>
<script src="script.js"></script>
</head>
<body>
<div id='output'>Output: </div>
<div> Enter a value: <input type="text" id="inField"> </div>
<button onclick="returnValue()" id="submit">Submit</button>
</body>
</html>
JavaScript
function returnValue() {
document.getElementById("inField").value="Test";
document.getElementById("output").value="Test";
}
I tried doing some input validation on my inputs at my ejs template using angular, but it doesn't seem to be working correctly, this is the code i used (from w3schools):
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="">
<p>Try writing in the input field:</p>
<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>
<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>
</body>
</html>
It's supposed to ouput something like this:
The input's valid state is: false
But instead it just returns this:
The input's valid state is: {{myForm.myInput.$valid}}
So is it in any way possible to use ejs and angular together?
You need to have a module and a controller defined, script should be loaded inside the body/head
HTML
<!DOCTYPE html>
<html ng-app="store">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="">
<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>
<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>
</body>
</html>
Controller
var app = angular.module('store', []);
app.controller('StoreController', function($scope) {
});
DEMO
<html ng-app="insert_app_name_here">
<body ng-controller="insert_controller_name_here">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
</body>
</html>
I would set up my angular app like the above code. Also, including the script at the end of your body tag is good practice. Moreover, removing the .min from your script tag to just angular.js instead of angular.min.js helps you debug your code better since you will be using it for development and not for production.
In setting up your app, I would include an app.js file where the code goes like this:
angular.module('insert_app_name_here', [])
In setting up your controller, I would include a controller file (i.e. mainCtrl.js) where the code goes like this:
angular.module('insert_app_name_here').controller('insert_controller_name_here, function($scope) {
});
As to linking angular with ejs, i am unfamiliar with ejs, therefore i cannot provide a solution for that.
My team is using Recurly.js to build a payments page into our website. We've been following the docs from https://docs.recurly.com/js. According to the docs,
Build a form however you like. Use the data-recurly attribute to identify input field targets to Recurly.js. To identify where Recurly.js will inject card data fields, we recommend using simple div elements.
The problem is that the div elements don't actually show in the form. Here's a short reproducible example based off of the docs:
<!doctype html>
<html lang="en">
<head>
<!-- Recurly.js script and API key config -->
<script src="https://js.recurly.com/v4/recurly.js"></script>
<script>recurly.configure('... API Key here...');</script>
</head>
<body>
<form>
<input type="text" data-recurly="first_name">
<input type="text" data-recurly="last_name">
<div data-recurly="number"></div>
<div data-recurly="month"></div>
<div data-recurly="year"></div>
<div data-recurly="cvv"></div>
<input type="hidden" name="recurly-token" data-recurly="token">
<button>submit</button>
</form>
</body>
</html>
This is what it looks like:
As you can see, the two inputs show fine, but none of the divs show correctly.
What are we doing wrong and how do we build a Recurly.js form with div elements?
The javascript code that calls configure cannot be in the head tag and should be located in the body tag
<script>recurly.configure('... API Key here...');</script>
This example should show you how to set it up properly. Notice where they put the javascript in the body: https://github.com/recurly/recurly-js-examples/blob/master/public/minimal/index.html
<!doctype html>
<html lang="en">
<head>
<!-- Recurly.js script and API key config -->
<script src="https://js.recurly.com/v4/recurly.js"></script>
</head>
<body>
<form>
<input type="text" data-recurly="first_name">
<input type="text" data-recurly="last_name">
<div data-recurly="number"></div>
<div data-recurly="month"></div>
<div data-recurly="year"></div>
<div data-recurly="cvv"></div>
<input type="hidden" name="recurly-token" data-recurly="token">
<button>submit</button>
</form>
<script>recurly.configure('... API Key here...');</script>
</body>
</html>
The browser loads javascript in the head, which loads up recurly, and then in the body you can use recurly.
I am trying to update the value of a hidden input field called id_0-instruction_task_one_image with the file name of a particular image file when the page is loaded using java script and <img onload="
This is the script I am using to update the hidden field:
<script type="text/javascript">
function updateInput(ish) {
document.getElementById("id_0-instruction_task_one_image").value = ish;
}
</script>
This is the file path for the image, note I am also loading the file name into the value field:
<div class="image_rating">
<img src="{% static "survey/images/instruction_task_one/" %}{{display_image}}" value={{display_image}} onload="updateInput(this.value)"/>
</div>
When I load the page the image is getting shown and the same file name is in the value field e.g. value="ITI1.jpg"
However the hidden form field does not update correctly and instead shows value="undefined" as below
<input id="id_0-instruction_task_one_image" name="0-instruction_task_one_image" type="hidden" value="undefined"/>
Can anybody tell me what I am doing wrong? I have been working on this for a while and I am convinced it should work. Thanks
I think there's a problem with the way you're accessing and setting the html element attributes. Try using getAttribute and setAttribute on the elements like so:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Set Attribute Value</title>
</head>
<body>
<div class="image_rating">
<img id="myImage" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/JosephBazalgettePortrait.jpg/100px-JosephBazalgettePortrait.jpg"
value="myValue" onload="updateInput(this)" />
</div>
<input id="id_0-instruction_task_one_image" name="0-instruction_task_one_image" type="hidden"
value="undefined" />
<script type="text/javascript">
function updateInput(ish) {
var valueAttribute = ish.getAttribute("value");
document.getElementById("id_0-instruction_task_one_image").setAttribute(
"value", valueAttribute);
}
</script>
</body>
</html>
I have following ng-repeat
<div ng-repeat="page in pages">
<input type="text" ng-model="page.name"
</div>
Basically this will show page.name multiple times for same name. Problem is my data being returned is in collection so I cant just use the name property.
Can you please tell me how can i just show page.name only once.
I'd still say your better off pulling this data into it's own property but here's a lazy way to achieve the goal:
HTML
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#*" data-semver="1.2.14" src="http://code.angularjs.org/1.2.14/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="myApp" ng-controller="MyCtrl">
<input type="text" ng-model="pages[0].name"/>
</body>
</html>
JS
// Code goes here
angular.module("myApp", []).controller("MyCtrl", function($scope){
$scope.pages = [{name:"Page1"},{name:"Page2"}];
})
Plunkr: http://plnkr.co/edit/UmRSVek3psKoklxVKBfI?p=preview