if i have this code:
<div><input type="checkbox" name="lista[]" value="3424"> 3424<br><input type="checkbox" name="lista[]" value="3333"> 3333<br></div>
I would like to have the checkbox value in the variable $valore without using any submit button
help me?
I'm very new with this. But it seems your case is similar to the one that I've found somewhere on the internet. Too bad, I don't remember that internet address.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery.js"></script>
<style>
</style>
</head>
<body>
<div>
<input class="calc" type="checkbox" name="lista[]" value="3424"> 3424<br>
<input class="calc" type="checkbox" name="lista[]" value="3333"> 3333<br>
</div>
<input type="text" name="sum"/>
<script>
function calcscore(){
var valore = 0;
$(".calc:checked").each(function(){
valore=parseInt($(this).val(),10);
});
$("input[name=sum]").val(valore.toLocaleString())
//alert(valore)
}
$().ready(function(){
$(".calc").change(function(){
calcscore()
});
});
</script>
</body>
</html>
Test Link in jsfiddle.net.
I don't understand at all the code because I just copied it from the internet, then I try to modify it with more miss than hit.
The original code is to sum the value of the checked checkbox, so it put plus (+) sign in this line : valore+=parseInt($(this).val(),10);
Related
I am new to Fuel UX and trying to make checkbox work. I have the following simple page:
<!DOCTYPE html>
<html lang="en" class="fuelux">
<head>
<meta charset="utf-8">
<title>Fuel UX 3</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="dist/css/fuelux.min.css" rel="stylesheet" type="text/css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//www.fuelcdn.com/fuelux/3.11.0/js/fuelux.min.js"></script>
</head>
<body>
<div class="checkbox" id="myCheckbox">
<label class="checkbox-custom" id="myCustomCheckbox1">
<input class="sr-only" type="checkbox" value="">
<span class="checkbox-label">Custom checkbox unchecked on page load 22234</span>
</label>
</div>
<script>
//javascript initialization goes here
</script>
</body>
</html>
I need to initialize the checkbox via Javascript. The following works:
$('#myCustomCheckbox1').checkbox();
The following are not working:
$('input[type="checkbox"]').each(function(index, item) {
$(this).checkbox();
});
or
$('input[type="checkbox"]').checkbox()
Could any expert confirm that checkboxes must have id if they are initialized via Javascript? Or I did it in a wrong way?
Please review the documentation. The checkbox jQuery plugin can only be bound to the label, not the wrapping div (if present), nor the input.
You might try:
$('.checkbox > label').each(function(index, item) {
$(this).checkbox();
});
Running this code by clicking checkbox returns true or false for {{isHidden}} as expected. But when the code is run for the very first time {{isHidden}} appear to be blank. How to fix this?
<!DOCTYPE html>
<html data-ng-app>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
Hidden: <input type="checkbox" ng-model="isHidden">{{isHidden}}
<script type="text/javascript" src="js/angular.js"></script>
</body>
</html>
use ng-init directive
<input type="checkbox" ng-model="isHidden" ng-init="isHidden= true">{{isHidden}}
use true or false in ng-init it will initialize the values on a scope
here is the working plunker
I am following a simple interpolation example but could not able to execute it properly. Here is my HTML code:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/angular.js"></script>
</head>
<body>
<div ng-app="email" ng-controller="EmailController">
To: <input type="email" ng-model="to" /> <br>
Comment: <textarea ng-model="emailBody"></textarea> <br>
<pre>__previewText__</pre>
</div>
<script src="js/app.js"></script>
</body>
</html>
My app.js is :
emailApp= angular.module('email',['emailParser']);
emailApp.controller('EmailController',['$scope','EmailParser',function($scope,EmailParser){
$scope.$watch('emailBody',function(body){
if(body){
$scope.previewText= EmailParser.parse(body,{
to:$scope.to
});
console.log("body: " + $scope.previewText);
}
})
}]);
emailParser= angular.module('emailParser',[]);
emailParser.config(['$interpolateProvider',function($interpolateProvider){
$interpolateProvider.startSymbol="__";
$interpolateProvider.endSymbol="__";
}]);
emailParser.factory('EmailParser',['$interpolate',function($interpolate){
return {
parse: function(text,context){
var template= $interpolate(text);
return template(context);
}
};
}]);
Please advise.
The documentation says
Methods
startSymbol([value]);
...
endSymbol([value]);
So, these are methods, not attributes. Your code should thus be
$interpolateProvider.startSymbol("__");
$interpolateProvider.endSymbol("__");
although I'm not sure it's a good idea to use the same sequence for end and for start.
Once this fix is done, your code works as expected (at least, as I expect it to work, since you didn't explain what your expectations were): type foo#bar.comin the to field, type __to__in the comment text area, and the preview will display foo#bar.com.
Working plunkr: http://plnkr.co/edit/om4ShlL29faYfdLXxIFV?p=preview
I'm just getting started with angularjs and noticed that forms within a ng-app directive won't submit. Any ideas of how I can make the form submit?
<!DOCTYPE html>
<html ng-app>
<!--<![endif]-->
<head>
<meta charset="utf-8" />
</head>
<body>
<form>
<input type="text" name="foo" />
<input type="submit" value="Submit" />
</form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</body>
</html>
According to the documentation :
Angular prevents the default action (form submission to the server) unless the <form> element has an action attribute specified.
I am looking for the javascript that change (image1) to (image2) and then back to (image1) right away when checkbox checked.
I have a code that swap the image when i checked the checkbox and going back to original image when checkbox is unchecked. But I want to change image and going back to original image right way when it checked. Can anyone help?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function changePic(){
if (document.form1.check.checked){
document.picture.src="Images/industry_mrt.jpg";
document.picture.src="Images/industry_ps.jpg";
}
else{
document.picture.src="Images/industry_mrt.jpg";
}}
</script>
</head>
<body>
<img src="Images/industry_ps.jpg" id="picture" name="picture">
<form name="form1" method="post" action="">
<input type="checkbox" name="check" value="checkbox" onClick="changePic();">
</form>
</body>
</html>
At the moment I believe your code does have the desired effect - changing the image and then going back to original image instantaneously when the checkbox is checked, but if you want to see this you will need to delay the return to the original image.
Try the below:
<form action="#" method="post">
<input type="checkbox" onchange="handleChange(this);" />
</form>
<script type="text/javascript">
function handleChange(checkbox)
{
if(checkbox.checked){
document.picture.src="Images/industry_mrt.jpg";
setTimeout(function(){document.picture.src="Images/industry_ps.jpg";}, 2000); // 2 Seconds.
} else{
document.picture.src="Images/industry_mrt.jpg";
}
}
</script>