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
}
Related
I am new to jQuery.
Simply I want to build a password show/hide program.
I have written some code (below), and the first time the program works correctly - the password is showing after clicking on "Show" button. But then the "Hide" feature is not working.
In my code the if part is running each time but the else part never executes. What's wrong here?
$("#btn").click(function() {
if ($("#pass").attr("type", "password")) {
$("#pass").attr("type", "text");
$("#btn").attr("value", "Hide")
} else {
$("#pass").attr("type", "password");
$("#btn").attr("value", "Show")
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Password : <input type="password" id="pass">
<input type="button" id="btn" value="Show">
The problem is this line:
if($("#pass").attr("type","password")){
$("#pass").attr("type","password") is setting the value of the "type" attribute, not comparing it to anything. What you need to do is get the value, and then compare it to the value you're checking for:
if($("#pass").attr("type") == "password")) {
Here is a full working example:
N.B. I also added variables to represent the button and textbox, because it's inefficient to repeatedly invoke the jQuery constructor on the same elements.
$(document).ready(function() {
var btn = $("#btn");
btn.click(function() {
var pass = $("#pass");
if (pass.attr("type") == "password") {
pass.attr("type", "text");
btn.attr("value", "Hide")
}
else {
pass.attr("type", "password");
btn.attr("value", "Show")
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Password show/hide in Jquery</title>
</head>
<body>
Password : <input type="password" id="pass">
<input type="button" id="btn" value="Show">
</body>
</html>
You may also wish to review the jQuery documentation to help your understanding: http://api.jquery.com/attr/
I am working on a sharepoint 2013 edit aspx form. now I have the following checkbox:
<span title="Yes" class="ms-RadioText">
<input id="UpdateOrder_0e0052d6-9924-4774-b50d-d7ef364d744a_MultiChoiceOption_0" required="" type="checkbox">
<label for="UpdateOrder_0e0052d6-9924-4774-b50d-d7ef364d744a_MultiChoiceOption_0">Yes</label>
</span>
now I want under certain conditions to set this checkbox as required, so users can not submit the form unless they check this checkbox. so I wrote the following javascript:
var orderstatus0 = $('select[id^="OrderStatus_"]').val();
if (orderstatus0 == "Invoiced")
{
$('input[id^="UpdateOrder_"]').required;
var x = document.getElementById('UpdateOrder_0e0052d6-9924-4774-b50d-d7ef364d744a_MultiChoiceOption_0').required;
document.getElementById('UpdateOrder_0e0052d6-9924-4774-b50d-d7ef364d744a_MultiChoiceOption_0').required= true;
alert(x);
}
but currently no validation will be applied, even inside the alert i was excepting to get true, but I am getting false.. so can anyone advice on this please?
Add the code below into a script editor web part in the editform page.
<script src="//code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
function PreSaveAction(){
var orderstatus0 = $('select[id^="OrderStatus_"]').val();
$("#updateordermsg").remove();
if (orderstatus0 == "Invoiced"){
if($('input[id^="UpdateOrder_"]').is(':checked')){
return true;
}else{
$('input[id^="UpdateOrder_"]').closest("td").append("<span id='updateordermsg' style='color:red'><br/>Please check the UpdateOrder.</span>");
return false;
}
}else{
return true;
}
}
</script>
You should use .att() jQuery function to set the attribute to the element.
var orderstatus0 = $('select[id^="OrderStatus_"]').val();
$('input[id^="UpdateOrder_"]').attr("required", "required");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<span title="Yes" class="ms-RadioText">
<input id="UpdateOrder_0e0052d6-9924-4774-b50d-d7ef364d744a_MultiChoiceOption_0" type="checkbox">
<label for="UpdateOrder_0e0052d6-9924-4774-b50d-d7ef364d744a_MultiChoiceOption_0">Yes</label>
</span>
<input type="submit" value="Submit">
</form>
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
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.