Using ng-submit I have a form submission callback namely submitFN. Have 2 buttons:
Fund my startup!
Reset
My desirable output is on clicking the reset button, the input field gets 0. And on clicking "Fund my startUp" it shows an alert. How to attain this?
Problem:
Both the buttons are triggering the submitFN. Unable to reset.
Code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js">
</script>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller('startUpController', function($scope) {
$scope.funding = {
startingEstimate: 0
};
$scope.calculate = function () {
$scope.funding.needed = $scope.funding.startingEstimate * 10;
};
$scope.submitFN = function () {
window.alert('Go and find more customers.')
}
$scope.resetFN = function () {
$scope.startingEstimate = 0;
}
});
</script>
</head>
<body>
<div ng-app='mainApp'>
<form ng-submit="submitFN()" ng-controller="startUpController">
Starting: <input type="text" ng-change="calculate()" ng-model="funding.startingEstimate"/>
Recommended: {{funding.needed}}
<button>Fund my startup!</button>
<button ng-click="resetFN()">Reset</button>
</form>
</div>
</body>
</html>
I am entirely novice in angularJS and any help is highly appreciable. Thanks in advance.
UPDATE
One of code I tried:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js">
</script>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller('startUpController', function($scope) {
$scope.funding = {
startingEstimate: 0
};
$scope.calculate = function () {
$scope.funding.needed = $scope.funding.startingEstimate * 10;
};
$scope.submitFN = function () {
window.alert('Go and find more customers.')
}
$scope.resetFN = function () {
$scope.startingEstimate = 0;
}
});
</script>
</head>
<body>
<div ng-app='mainApp'>
<form ng-submit="submitFN()" ng-controller="startUpController">
Starting: <input type="text" ng-change="calculate()" ng-model="funding.startingEstimate"/>
Recommended: {{funding.needed}}
<button>Fund my startup!</button>
<button type = "button" ng-click="resetFN()">Reset</button>
</form>
</div>
</body>
</html>
By default the button type is submit, so you the 2nd button also has button type submit. If you don't want to submit a form on that button, you should explicitly make that button type as a button
type="button"
Also you had mistake in resetFN code, It should be modify a value which is assigned to ng-model
$scope.resetFN = function () {
$scope.funding.startingEstimate = 0;
}
corrected code below:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js">
</script>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller('startUpController', function($scope) {
$scope.funding = {
startingEstimate: 0
};
$scope.calculate = function () {
$scope.funding.needed = $scope.funding.startingEstimate * 10;
};
$scope.submitFN = function () {
window.alert('Go and find more customers.')
}
$scope.resetFN = function () {
$scope.funding.startingEstimate = 0;
}
});
</script>
</head>
<body>
<div ng-app='mainApp'>
<form ng-submit="submitFN()" ng-controller="startUpController">
Starting: <input type="text" ng-change="calculate()" ng-model="funding.startingEstimate"/>
Recommended: {{funding.needed}}
<button>Fund my startup!</button>
<button type="button" ng-click="resetFN()">Reset</button>
</form>
</div>
</body>
</html>
You miss funding
$scope.resetFN = function () {
$scope.funding.startingEstimate = 0;
}
Related
I'm using a WorldPay JS function to create a payment form. This function creates a TOKEN that can be reusable or not. I need to update the 'reusable' flag based on a form input (checkbox) but I can't get the global variable (reuse) to update. I've created a function CHECKED that updates the variable but the WorldPay JS just ignores it. I think is due the window.onload status, but I don't know how to fix it. Any help would be greatly appreciated.
<?php
include('./header.php');
require_once('./init.php');
?>
<html>
<head>
<title></title>
<meta charset="UTF-8" />
<script src="https://cdn.worldpay.com/v1/worldpay.js"></script>
<script type='text/javascript'>
var reuse = false;
function Checked(){
reuse = document.getElementById('check').checked;
Worldpay.submitTemplateForm();
}
window.onload = function() {
Worldpay.useTemplateForm({
'clientKey':'ENTER CLIENT KEY',
'form':'paymentForm',
'paymentSection':'paymentSection',
'display':'inline',
'type':'card',
'reusable': reuse,
'saveButton':false,
'callback':function(obj){
if (obj && obj.token && obj.paymentMethod) {
var _el = document.createElement('input');
_el.value = obj.token;
_el.type = 'hidden';
_el.name = 'token';
document.getElementById('paymentForm').appendChild(_el);
var _name = document.createElement('input');
_name.value = obj.paymentMethod.name;
_name.type = 'hidden';
_name.name = 'customer';
document.getElementById('paymentForm').appendChild(_name);
document.getElementById('paymentForm').submit();
}
}
});
}
</script>
</head>
<body>
<form action="./test.php" id="paymentForm" method="post">
<!-- all other fields you want to collect, e.g. name and shipping address -->
<div id='paymentSection'></div>
<div>
<input type="checkbox" id='check'>
<input type="submit" value="Place Order" onclick="Checked()" />
</div>
</form>
</body>
</html>
NOTE: I've removed the client ID so the code won't run.
Have you tried to use function "checked" on window.onload like this:
window.onload = function() {
Worldpay.useTemplateForm({
//code....
)}
function Checked(){
//code....
}
I have an input field which is for both setting and readback. I would like to have the following behavior:
No focus: update the field with readback
Focus: no update, if enter is pressed call send with the value written in the field.
I have a mwe which is a start but does update when focused.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
<script>
angular.module('App', []).controller('world', function ($scope) {
$scope.value1 = 0;
$scope.value2 = 0;
$scope.send = function(value) {
alert(value);
}
let readback = function() {
$scope.value1 += 1;
$scope.value2 += 1;
$scope.$apply();
setTimeout(readback, 100);
};
setTimeout(readback, 1);
});
</script>
</head>
<body ng-app="App" ng-controller="world">
<input type="text" ng-model="value1" ng-keyup="$event.keyCode == 13 && send(value1)" />
<input type="text" ng-model="value2" ng-keyup="$event.keyCode == 13 && send(value2)" />
</body>
Edit: Sorry I was a bit unclear and cut down my mwe too much. I have about ten such input fields. The unfocused fields should still update while only the one which is selected does not.
you can detect ng-focus and ng-blur, using separate controller instances for each input:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js">
</script>
<script>
angular.module('App', []).controller('world', function ($scope) {
let isFocus = false;
$scope.value = 0;
$scope.send = () => alert($scope.value);
$scope.focus = () => isFocus = true;
$scope.blur = () => isFocus = false;
let readback = function() {
if (!isFocus) {
$scope.value += 1;
$scope.$apply();
}
setTimeout(readback, 100);
};
setTimeout(readback, 1);
});
</script>
</head>
<body ng-app="App">
<input type="text"
ng-controller="world"
ng-model="value"
ng-keyup="$event.keyCode == 13 && send()"
ng-focus="focus()"
ng-blur="blur()" />
<input type="text"
ng-controller="world"
ng-model="value"
ng-keyup="$event.keyCode == 13 && send()"
ng-focus="focus()"
ng-blur="blur()" />
</body>
In process of learning JS. Trying to learn how to loop through an entire form, and have errors pointed out.
This is a hodgepodge that I cobbled together from various tutorials online.
Clearly it's not working.
What I am trying to do is to get the forms' entire collection of its elements, and loop through it, and anything that's blank, to have its error message printed somewhere on the same screen, be it above the form or underneath the textboxes itself.
This is what I have so far. Any help in getting this to work, or at least the concept of what I outlined? Simple and bite-size explanations if possible would be appreciated.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<form method="post" action="" id="myForm">
<div id="validation"></div>
<p><label>Name<br><input type="text" name="Name"></label></p>
<p><label>Email<br><input type="text" name="Email"></label></p>
<p><input type="submit" value="Submit"></p>
</form>
<script>
var formsCollection = document.forms[0];
for (var i = 0; i < formsCollection.elements.length; i++) {
if (formsCollection.elements.value.length == 0) {
form.elements.input.border = "1px solid red";
form.Name.style.backgroundColor = "#FFCCCC";
}
return true;
}
document.getElementById("myForm").onsubmit = function () {
return Validate(this);
};
</script>
</body>
</html>
EDIT
<script>
function Validate() {
var formsCollection = document.forms[0];
for (var i = 0; i < formsCollection.elements.length; i++) {
if (formsCollection.elements[i].value.length == 0) {
form.elements.input.border = "1px solid red";
form.Name.style.backgroundColor = "#FFCCCC";
}
return true;
}
document.getElementById("myForm").onsubmit = function () {
return Validate(this);
};
}
</script>
Full ans:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<form method="post" action="" id="myForm">
<div id="validation"></div>
<p><label>Name<br><input type="text" name="Name"></label></p>
<p><label>Email<br><input type="text" name="Email"></label></p>
<p><input type="submit" value="Submit"></p>
</form>
<script>
document.forms[0].onsubmit= function() {
var form = document.forms[0];
for (var i = 0; i < form.elements.length; i++) {
if (form.elements[i].value.length == 0) {
console.log(form.elements[i]);
form.elements[i].border = "1px solid red";
form.elements[i].style.backgroundColor = "#FFCCCC";
return false;
}
}
}
</script>
</body>
</html>
Several problems.
There seems to be no i in your for loop usage.
Try if (formsCollection.elements.value.length == 0) {
to if (formsCollection.elements[i].value.length == 0) {
Where is your Validate function?
Wrap var formsCollection ... END_OF_FOR_LOOP with function Validate(){ and }
i have 10 more ng-click events, but i want to show only clicked element value where i have to change, but i updated in code there was so many true or false duplicates i have to write, pls help me that have to show only clicked ng-show values without using 'true or false' booleen functions in each click event.
var app = angular.module('myapp', ['ngSanitize']);
app.controller('AddCtrl', function ($scope, $compile) {
$scope.field = {single: 'untitled',single2:'default',single3:'enter'};
$scope.addName1 = function (index) {
var name1html = '<fieldset id="name1" ng-click="selectName1($index)"><label ng-bind-html="field.single"></label><input type="text" placeholder="Enter name"><button ng-click="removeName1($index)">-</button></fieldset>';
var name1 = $compile(name1html)($scope);
angular.element(document.getElementById('drop')).append(name1);
};
$scope.removeName1 = function (index) {
var myEl = angular.element(document.querySelector('#name1'));
myEl.remove();
};
$scope.selectName1 = function (index) {
$scope.showName1 = true;
$scope.showName2 = false;
$scope.showName3 = false;
};
$scope.addName2 = function (index) {
var name2html = '<fieldset id="name2" ng-click="selectName2($index)"><label ng-bind-html="field.single2"></label><input type="text" placeholder="Enter name"><button ng-click="removeName2($index)">-</button></fieldset>';
var name2 = $compile(name2html)($scope);
angular.element(document.getElementById('drop')).append(name2);
};
$scope.removeName2 = function (index) {
var myEl = angular.element(document.querySelector('#name2'));
myEl.remove();
};
$scope.selectName2 = function (index) {
$scope.showName2 = true;
$scope.showName1 = false;
$scope.showName3 = false;
};
$scope.addName3 = function (index) {
var name3html = '<fieldset id="name3" ng-click="selectName3($index)"><label ng-bind-html="field.single3"></label><input type="text" placeholder="Enter name"><button ng-click="removeName3($index)">-</button></fieldset>';
var name3 = $compile(name3html)($scope);
angular.element(document.getElementById('drop')).append(name3);
};
$scope.removeName3 = function (index) {
var myEl = angular.element(document.querySelector('#name3'));
myEl.remove();
};
$scope.selectName3 = function (index) {
$scope.showName3 = true;
$scope.showName1 = false;
$scope.showName2 = false;
};
});
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.0-rc.0/angular-sanitize.min.js"></script>
</head>
<body ng-controller="AddCtrl">
<div id="drop"></div>
<button ng-click="addName1($index)">Name1</button>
<button ng-click="addName2($index)">Name2</button>
<button ng-click="addName3($index)">Name3</button>
<form ng-show="showName1">
<div class="form-group">
<label>Field Label(?)</label>
<br/>
<input ng-model="field.single">
</div>
</form>
<form ng-show="showName2">
<div class="form-group">
<label>Field Label(?)</label>
<br/>
<input ng-model="field.single2">
</div>
</form>
<form ng-show="showName3">
<div class="form-group">
<label>Field Label(?)</label>
<br/>
<input ng-model="field.single3">
</div>
</form>
</body>
</html>
here is plunkr http://plnkr.co/edit/oFytWlQMIaCaeakHNk71?p=preview
You will need "ng-repeat" in the HTML. Set an Array on $scope and let the template determine what HTML elements to add. Typically, $index is only set by ng-repeat.
Read more here: https://docs.angularjs.org/api/ng/directive/ngRepeat
<HTML>
<HEAD>
<TITLE>counter </TITLE>
</head>
<body>
<script type="text/javascript">
var clicks = 0;
function linkClick(){
document.getElementById('clicked').value = ++clicks;
}
document.write('Add');
</script>
<input id="clicked" size="3" onfocus="this.blur();" value="0" >
<script type="text/javascript">
function linkClick1(){
document.getElementById('clicked').value = --clicks;
}
document.write('Subtract');
</script>
</BODY>
</HTML>
This on adds and subtracts depending on how many times its clicked i want the value not to go below 0 how to do it??
Replace:
document.getElementById('clicked').value = ++clicks;
on:
document.getElementById('clicked').value = clicks >= 0? --clicks : clicks;
This might work, if it doesn't add a comment :)
This is a more practical:
function linkClick1(){
if (clicks > 0) {
document.getElementById('clicked').value = --clicks;
}
}
function linkClick1(){
if (clicks > 0) {
document.getElementById('clicked').value = --clicks;
}
}