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
Related
I have created a checkbox in Google sheet sidebar which has a form with a checkbox field.
Regardless of whether i check the checkbox or not, i get the value as "on".
I need to know whether the checkbox was checked or not
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form>
<div>
<p>
<label>
<input name="item" id="Agree" type="checkbox" class="red"/>
<span>Agree</span>
</label>
</p>
</div>
<div class="input-field col s12">
<button class="btn waves-effect waves-light" type="submit" name="action" id="btn">Generate
<i class="material-icons right">send</i>
</button>
</div>
</form>
<script>
var agreeValue = document.getElementById("Agree")
document.getElementById("btn").addEventListener("click", addRecord);
function addRecord() {
var data = {
agreeValue : Agree.value
};
google.script.run.appendData(data);
}
</script>
</body>
</html>
If you want to confirm the checkbox by on and off, how about modifying as follows?
From:
var data = {
agreeValue: Agree.value
};
To:
var data = {
agreeValue: agreeValue.checked ? "on" : "off" // or Agree.checked ? "on" : "off"
};
By this modification, when the checkbox is checked and unchecked, data becomes {agreeValue: "on"} and {agreeValue: "off"}, respectively.
Note:
When var data = {agreeValue: agreeValue.checked} is used, you can retrieve the value of checkbox as a boolean.
If I misunderstood your question and this was not the result you want, I apologize.
In your HTML file enter code like this. The checkbox is now a Boolean
function addRecord() {
var data = document.getElementsById("agree")[0].checked;
google.script.run.appendData(data);
}
Then in the server side script place the data parameter in the condition of the If statement like this, since the condition of a if statement is in essence a boolean which you are pulling from you're html checkbox input.
if (data) {
//code to execute if checkbox is checked
} else {
//code to execute if NOT checked
}
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
Note: I did look around here on SO for solutions, yet no one had the additional issue of the function being in an object.
I have a form in my Angular JS app:
<div ng-app="plunker">
<div ng-controller="PMTController as pmt">
<form name="myForm">
<div class="form-group">
<input type="text" class="form-control" />
</div>
<button class="btn btn-primary" ng-click="pmt.search.resetSearchForm()">Reset</button>
</form>
</div>
</div>
Further, I have a controller with an object:
app.controller('PMTController', function($log) {
var _this = this;
_this.search = {
resetSearchForm: function () {
$log.debug('test');
// how to target the form?
}
};
})
My ng-click works, as the log.debug works. But no amount of tweaking to target the form so that I can reset the entire thing (empty all the fields) works.
I can do $window.myForm.reset(); but how could I do this from angular?
Note please my main issue/question is how to correctly target the form from inside that resetSearchForm function in the search object.
Note I tried changing the form name to pmt.myForm or pmt.search.myForm to no avail.
I tried $setPristine and $setUntouched() but they don't seem to clear the fields.
I know I can assign a model and assign it to all the form controls, but this is for a prototype so I'd rather do a simple reset.
I made a pen: https://codepen.io/smlombardi/pen/YWOPPq?editors=1011#0
Here is my take on your codepen that will hopefully resolve the issue:
https://codepen.io/watsoncn/pen/YWOXqZ?editors=1011
Explanation:
Angular's documentation provides an example of a "Form Reset" button, but you can apply the same logic towards resetting after submission:
Documentation:https://docs.angularjs.org/guide/forms
with a plunker:
Live Example:https://plnkr.co/edit/?p=preview
The example shows the use of Angular's copy method that creates a deep copy of whatever you pass it as a parameter and assigns it to the ng-model that is put on a particular input field. In this case they simply pass it an empty master object.
You need to make sure to add an ng-model attribute to your inputs, then create a reset function that can run after submission. Another common option would be to simply set each input's ng-model to empty strings in the submission function, such as $scope.inputModel = ""
Is this what you were hoping for? I might have misunderstood the question. I will happily take another crack at it if there is still confusion.
To get the form in your controller you just need to name your form this way:
<form name="pmt.myForm">
Here's a complete demo:
(function() {
"use strict";
angular
.module('plunker', [])
.controller('PMTController', PMTController);
PMTController.$inject = ['$log'];
function PMTController($log) {
var _this = this;
_this.model = {};
_this.search = {
resetSearchForm: function() {
console.log(_this.myForm); // -> Form reference
_this.model = {};
}
};
}
})();
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body ng-controller="PMTController as pmt">
<div class="col-md-12">
<form name="pmt.myForm">
<div class="form-group">
<input type="text" ng-model="pmt.model.example" class="form-control" />
<input type="text" ng-model="pmt.model.example2" class="form-control" />
<input type="text" ng-model="pmt.model.example3" class="form-control" />
</div>
<button class="btn btn-primary" ng-click="pmt.search.resetSearchForm()">Reset</button>
</form>
<hr> All fields:
<pre ng-bind="pmt.model | json"></pre>
</div>
</body>
</html>
I'm trying to write a web page with various options that can be enabled/disabled.
However, it seems that those options are always enabled, regardless of whether the relevant check boxes are selected or not.
Here's the code:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<script type="text/javascript">
function check() {
var options = "";
if (document.form1.nocase.value) {
options = "1";
}
if (document.form1.ck2.value) {
options = options + "2";
}
alert (options);
}
</script>
<form name="form1">
<input type="checkbox" name="nocase">option 1
<input type="checkbox" name="ck2">option 2
<input type="button" value="Check" onclick="check();">
</form>
<div id="results"></div>
</body>
</html>
I really am having problems understanding where the fault lies. Can anyone point it out?
Thanks in advance.
You should use the checked property and not the value property of your input fields:
if (document.form1.nocase.checked) {
//code here
}
The value attribute is string value that is sent to the server for every checked checkbox and you can specify its value in the html tag:
<input type="checkbox" name="nocase" value="nocase">
The checked property gives you the desired boolean that shows whether or not the checkbox is checked.
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);
});
});