I am learning angular and use radio button in my program. I found a problem that I can't explain it.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<script src="bower_components/angular/angular.min.js"></script>
</head>
<body ng-app = "myApp">
<div class="container" ng-controller="myController">
<div><p style="margin: 30px auto"></p></div>
<label class="radio-inline" ng-repeat = "name in names" for = "{{name}}">
<input type="radio" ng-model="my.favorite" ng-value="name" id="{{name}}" name="favorite"></input>
{{name}}
</label>
<p>Your favorite is {{my.favorite}}</p>
<div>
<select ng-model="choosenone" ng-options="method.value as method.label for method in contactMethods">
<option value="">Tel or Email</option>
</select>
<p>You choose {{choosenone}}</p>
</div>
</div>
<script type="text/javascript">
angular.module('myApp',[])
.controller("myController",['$scope','$log',function ($scope,$log) {
//radio choices
$scope.names = ['pizza', 'unicorns', 'robots'];
$scope.my = { favorite: 'unicorns' };
//select chocices
$scope.contactMethods = [{value:"tel",label:"Tel."},{value:"email",label:"Email"}];
$scope.choosenone;
}]);
</script>
</body>
</html>
This code works fine, but if I make $scope.my in the javascript code equal to an empty string or undefined, and make the ng-model on the radio input HTML tag equal to "my", then the radio buttons can be mutiple selected. What's the reason?
<label class="radio-inline" ng-repeat="name in names" for="{{name}}">
<input type="radio" ng-model="my.favorite" ng-value="name" id="{{name}}" name="favorite" />
{{name}}
</label>
Probably because they all have the same id - change that. So for example id="{{name}}-$index" and it will work the way you want. If you keep the same name, only one of them can be selected.
Related
I'm trying to publish form template to my main page which sits in different location:
my Code looks like this:
<!DOCTYPE HTML>
<html>
<head>
<script src="js/Jquery.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Test</title>
<style>
html
{
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
</style>
</head>
<body>
<select name="Template_Picker" id="Template_Picker">
<option value="payment">payment</option>
<option value="identity">identity</option>
</select>
<br>
<div id="Templates_Pages">
<button class="Template" value="Send" id="Template_Button">Show selected</button>
</div>
<form action="test/submit.php" method="post" id="submit_template">
<input type="hidden" id="payment" name="payment" value="payment">
<center id="output">
</center>
</form>
</body>
<script src="test/template.js"></script>
</html>
I'm trying to take my form template which looks like this:
<div id="template" class="template">
<input type="text" placeholder="Full Name" name="Full_Name">
<input type="text" placeholder="Credit Card" name="Credit_Card">
</div>
and place her on my main page, so the JS looks like this:
$(".Template").click(function(){
template_p = ($('#Template_Picker').val());
$.get("test\\"+template_p+".php",function(output){
$("#template_p").append(output);
//template_p = payment when choosing
});
});
when on my JS i choose "template_p" it doesnt work, but when i'm using the center id "output" it works, why?
Thanks in Advance.
It appears like you cannot append an output to an "input" tag.
so i kept using the "center" tag instead.
I have 3 files. a1.js, a2.js.& main.jsp. Main.jsp has two tabs each having its own functions. a1.js can access 1st tab elements which has multiple checkboxes and a text area where the options selected in the check boxes would be added to the text area. a2.js can access 2nd tab elements which has two radio buttons (yes / no). Depending on the input of the radio buttons, I want some check boxes to checked or unchecked in the 1st tab. How can I acheive this using javascript or jquery? Here is the code:
a1.jsp
<html>
<head>
<meta charset="ISO-8859-1">
<title>Sample Web page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
function changeTA() {
var inputElements = document.getElementsByName("favorite_pet");
for(var i=0; inputElements[i]; ++i){
if(inputElements[i].checked){
$('#ta').val($('#ta').val()+inputElements[i].value);
}
}
}
</script>
</head>
<body>
<form>
<legend>What is Your Favorite Pet?</legend>
<input type="checkbox" name="favorite_pet" id="check_cat" value="Cats" onchange="changeTA()">Cats<br>
<input type="checkbox" name="favorite_pet" id="check_dog" value="Dogs" onchange="changeTA()">Dogs<br>
<input type="checkbox" name="favorite_pet" id="check_bird" value="Birds" onchange="changeTA()">Birds<br>
<br>
<textarea id="ta" rows="4" cols="50">
</textarea>
</form>
</body>
</html>
a2.jsp
<html>
<head>
<meta charset="ISO-8859-1">
<title>Sample Web page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
function changeTA() {
///code to make changes in a2.jsp
}
</script>
</head>
<body>
<form>
<legend>Do you want Cat?</legend>
<input type="radio" name="CatLover" id="cat_yes" value="yes" onclick="changeTA()">Yes<br>
<input type="radio" name="CatLover" id="cat_no" value="no" onclick="changeTA()">No<br>
<input type="submit" value="Submit"
<br>
</form>
</body>
</html>
What I want to when yes is checked in the second jsp page, cats should be added in the text are in the first html and clicking on submit should submit the data from both jsp's/ Also, something t be noted both jsp s are included in another jsp page on different tabs. How can I acheive this?
I have a controller name say "CtrlABC", in which I have two forms namely, formA and formB. I want to access one $scoepe varialbe name $scope.var1's value in both the forms at the same time, I am able to access and change var1 value in first form but when trying to make change or access it in another form(which is below) then completely its not changing or accessing.
Here is my sample code.
angular.module("MyApp").controller("test", ['$scope',function ($scope) {
$scope.StartDate;
$scope.generateChart=function(SelectedProduct){
//updated date should be here on click/submit of the form
console.log($scope.StartDate);
};
});
<div ng-controller="test"><form name="A" ng-submit="generateChart(selectedProduct)" novalidate> <md-input-container><label>From</label>
<md-datepicker required ng-model="StartDate"></md-datepicker>
</md-input-container></form>
<form name="B" ng-submit="generateChart(selectedProduct)" novalidate> <md-input-container><label>From</label>
<md-datepicker required ng-model="StartDate"></md-datepicker>
</md-input-container></form></div>
</div>
If I try to change the date from one to another the ng-modal variable is not updating itself.
It should work according to your code, here is a demo. Probably you can check for other parts,
Make sure you are using the angular-material version v1.1 and above
// Code goes here
var app = angular.module('app', ["ngMaterial"]);
app.controller('AppCtrl', function($scope) {
$scope.StartDate;
$scope.generateChart = function(SelectedProduct) {
//updated date should be here on click/submit of the form
console.log($scope.StartDate);
};
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<link data-require="angular-material#0.11.0" data-semver="0.11.0" rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.0/angular-material.min.css" />
<script data-require="jquery#*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script data-require="angular.js#*" data-semver="1.4.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script data-require="angular-material#0.11.0" data-semver="0.11.0" src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.1/angular-material.js"></script>
<script data-require="angular-animate#1.4.1" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular-animate.js"></script>
<script data-require="angular-aria#1.4.1" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular-aria.js"></script>
<script src="script.js"></script>
</head>
<body >
<div ng-controller="AppCtrl">
<form name="A" ng-submit="generateChart(selectedProduct)" novalidate>
<md-input-container>
<label>From</label>
<md-datepicker required ng-model="StartDate"></md-datepicker>
</md-input-container>
</form>
<form name="B" ng-submit="generateChart(selectedProduct)" novalidate>
<md-input-container>
<label>From</label>
<md-datepicker required ng-model="StartDate"></md-datepicker>
</md-input-container>
</form>
</div>
</body>
</html>
The radio button does not show up as checked by default. am trying to make my first option as checked by default. But it is not working.. any idea or suggestion?
<div Class ="form-group">
<label>Select your Email Hierarchy</label>
<div class="radio" ng-switch="deliveryMethod">
<div ng-switch-when="email">
<label>
<input type="radio" id="delivery-email" name="delivery-email"
ng-model="generated.delivery" ng-change="checkValidGenerate()"
class="check" value="EE/ER" checked="checked"/>
EE/ER
</label><br/>
<!-- some code--other option listed -->
Well, at first there's no necessity of the use of checked. It should work if you attribute the value to your ngModel, otherwise it won't work:
$scope.generated.delivery = 'EE/ER';
See the example below:
(function() {
'use strict';
angular
.module('app', [])
.controller('MainCtrl', MainCtrl);
MainCtrl.$inject = ['$scope'];
function MainCtrl($scope) {
$scope.deliveryMethod = 'email';
$scope.generated = {};
$scope.generated.delivery = 'EE/ER';
}
})();
<!doctype html>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="MainCtrl">
<div Class="form-group">
<label>Select your Email Hierarchy</label>
<div class="radio" ng-switch="deliveryMethod">
<div ng-switch-when="email">
<label>
<input type="radio" id="delivery-email" name="delivery-email" ng-model="generated.delivery" ng-change="checkValidGenerate()" value="EE/ER"> EE/ER
</label>
<br/>
</div>
</div>
</div>
</body>
</html>
Html:
<!DOCTYPE html>
<html>
<head>
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="radioButtonSet">
<input type="radio" id="radio-value" name="dataChange" value="value" checked="checked" ><label for="radio-value">Value</label>
<input type="radio" id="radio-percentage" name="dataChange" value="percent" ><label for="radio-percentage">Percentage</label>
</div>
</body>
</html>
Javascript:
$("input[type=radio][name=dataChange]").on("change", function(){
console.log($("input[type=radio][name=dataChange]").filter(":checked").index())
});
I expect the indices to be 0 and 1, but they are 0 and 2. Why?
Demo: http://jsbin.com/xifutarumu/edit?html,js,console,output
From the docs: "If no argument is passed to the .index() method, the return value is an integer indicating the position of the first element within the jQuery object relative to its sibling elements."
<div id="radioButtonSet">
<input type="radio" id="radio-value" name="dataChange" value="value" checked="checked" >
<label for="radio-value">Value</label>
<input type="radio" id="radio-percentage" name="dataChange" value="percent" >
<label for="radio-percentage">Percentage</label>
</div>
The radio-percentage input is the third of its siblings, and therefore has an index of two.
Passing this as the context for index() seems to produce the desired results. shrug
$("input").index(this);
See http://jsbin.com/wuzoxocura/1/edit?html,js,console,output
It is showing correctly index as
0:first input
1:label just after 1 input
2:second input