I want to display the number of checkboxes ticked in the span element.
How do i achieve this?
This is my code -
<script>
$(document).ready(function(){
var n =$("[type='checkbox']:checked").length;
$("span").text(n);
});
</script>
</head>
<body>
<input type="checkbox">Red
<input type="checkbox">Green
<div id="result">
<p><span>0</span> are checked </p></div>
</body></html>
You can add an event listener on each, and updated the number of checked inputs on change:
$(document).ready(function(){
$.each($("[type='checkbox']"), inp => {
$(this).on('change', getChecked)
});
function getChecked(){
var n = $("[type='checkbox']:checked").length;
$("span").text(n);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox">Red
<input type="checkbox">Green
<div id="result">
<p><span>0</span> are checked </p></div>
You must add change function to checkbox type.
The correct code is this:
$(document).ready(function(){
$("[type='checkbox']").change(function () {
var n =$("[type='checkbox']:checked").length;
$('span').text(n);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox">Red
<input type="checkbox">Green
<div id="result">
<p><span>0</span> are checked </p></div>
Related
$('#input1').on('click',function(){
$.msgbox({ 'message':'Msg' });
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id = "#input1" type = "text">
when clicked input1, I hope jquery msgbox can appear.
in the ID of input you must use id='input' then call it with your jquery code.
Example:
$('#input1').on('click',function(){
$( "#dialog" ).dialog();
})
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input id = "input1" type = "text">
<div id="dialog" title="Hello"></div>
I'm just little bit confused on my html code.
What I want just, when user click the circle image, it will call load / take picture and then assign the picture to the circle.
In my below code, it's only call the take picture function, the on change function (pictureselected) is not being called.
When it calls directly through "srcimagefile", all function are called correctly.
Please see my below code. Please advise, what did I miss ?
<html>
<head>
</head>
<body>
<form>
<div class="col-md-12 col-xs-12" align="center">
<div class="outter">
<input type="image" id="imagefile" src="http://lorempixel.com/output/people-q-c-100-100-1.jpg" class="image-circle" onclick="takePicture()"/>
<input type="file" id="srcimagefile" onchange="pictureSelected()" />
</div>
</div>
<div class="group">
<input type="text"><span class="highlight"></span><span class="bar"></span>
<label>Username</label>
</div>
<div class="group">
<input type="password"><span class="highlight"></span><span class="bar"></span>
<label>Password</label>
</div>
<button type="button" class="button buttonBlue">Login
<div class="ripples buttonRipples"><span class="ripplesCircle"></span></div>
</button>
</form>
<link href="userlogincss.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="userloginjs.js"></script>
<script>
function takePicture() {
$("#srcimagefile").click();
}
function pictureSelected() {
fileSelectHandler();
}
// Create variables (in this scope) to hold the Jcrop API and image size
var jcrop_api, boundx, boundy;
function fileSelectHandler() {
// get selected file
var oFile = $('#srcimagefile')[0].files[0];
alert('Hello');
// hide all errors
$('.error').hide();
// check for image type (jpg and png are allowed)
var rFilter = /^(image\/jpeg|image\/png)$/i;
if (! rFilter.test(oFile.type)) {
$('.error').html('Please select a valid image file (jpg and png are allowed)').show();
return;
}
// check for file size
if (oFile.size > 250 * 1024) {
$('.error').html('You have selected too big file, please select a one smaller image file').show();
return;
}
// preview element
var oImage = document.getElementById('imagefile');
var oReader = new FileReader();
oReader.onload = function(e) {
// e.target.result contains the DataURL which we can use as a source of the image
oImage.src = e.target.result;
}
// read selected file as DataURL
oReader.readAsDataURL(oFile);
}
</script>
</body>
<html>
You are trying to call the function which will trigger on Change Event. Change your event to "onclick", then your code will execute as expected.
Check the below code change,
<input type="file" id="srcimagefile" onclick="pictureSelected()"
onclick="pictureSelected()"
<html>
<script src="angular.min.js" type="text/javascript"></script>
<body ng-controller="firstController">
<div ng-app="">
FirstName <input type="text" ng-model="first"/>
LastName <input type="text" ng-model="last"/>
Welcome {{first + " " + last}}
</div>
<script> <!-- script for the controller
function firstController($scope){
$scope.first="HELLO";
$scope.last="ALL";
}
</script>
</body>
</html>
After running this code i m getting two text boxes with empty strings
(no "HELLO" & "ALL" in the text box)and if I writing anything in the text boxes it comes up along with the 'Welcome'.Also if I put ng-controller after ng-app it wont work.
I copied this code from some tutorial. There it works for them.
Please help me to find out my mistake.
The script runs after the page loads. Move the <script> outside the body, under the <script src="angular.min.js" type="text/javascript"></script>. This way, the script will execute before and the bindings may work.
EDIT:
Also: your app should be outside your controller (ng-app should be before ng-controller) because controllers are parts of apps.
And you need the following after your function declaration (in JS):
var app = angular.module('',[]);//This string must match the value of ng-app
app.controller('firstController',firstController);
//This string has to match the value of ng-controller.
You need to use the ng-init to call that method on page load like this
<body ng-controller="firstController"
ng-init="firstController()">
First: I think your ng-controller must be inside of your ng-app scope.
Second: Try to define your module and your controller like this:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="myApp">
<body>
<div ng-controller="firstController">
FirstName <input type="text" ng-model="first"/>
LastName <input type="text" ng-model="last"/>
Welcome {{first + " " + last}}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("firstController", function($scope) {
$scope.first="HELLO";
$scope.last="ALL";
});
</script>
</body>
</html>
Try this code
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="first"><br>
Last Name: <input type="text" ng-model="last"><br>
<br>
Welcome: {{first + " " + last}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.first= "HELLO";
$scope.last= "ALL";
});
</script>
</html>
I have disabled button in a.html and some xyz button in b.html.
When the xyz button in b.html is clicked then the disabled button in a.html should get enabled.
I have been trying this for two days but am not getting anywhere. Can you help me?
If it's just plain html pages, you can use jQuery/ JavaScript to do this. Here is a simple example:
a.html:
<body>
<input id="aButton" type="button" value="A Button">
<script type="text/javascript">
$(document).ready(function() {
var enableAButton=getUrlParameter("enable");
if(enableAButton == "true"){
$('#aButton').prop('disabled', false);
}else{
$('#aButton').prop('disabled', true);//disabled by default
}
});
function getUrlParameter(sParam)
{
var sPageURL = window.location.search.substring(1);
var sURLVariables = sPageURL.split('&');
for (var i = 0; i < sURLVariables.length; i++)
{
var sParameterName = sURLVariables[i].split('=');
if (sParameterName[0] == sParam)
{
return sParameterName[1];
}
}
}
</script>
</body>
b.html:
<body>
<input id="bButton" type="button" value="B Button">
<script type="text/javascript">
$("#bButton").click(function(){
window.location.href="a.html?enable=true"
});
</script>
</body>
If both are different files without any relation you cant disable it directly. instead you can maintain a flag variable in the database of the student to track the info . enable and dis-able based on its value.
you can test my code , when i click buton , we will get 2 link
click on first link , not alert
click on second link , show alert
why first link not alert, how to it can alert ?
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("mootools", "1.1.2");</script>
<script>
window.addEvent('domready', function(){
$('button').addEvent('click', function(){
$('content').innerHTML = $('test').innerHTML;
});
});
</script>
</head>
<body>
<input id="button" type="button" name="button" value="Click"/>
<div id="content">
</div>
<div id="test">
<script>
function test(){
$('a-content').addEvent('click', function(){
alert(1);
});
}
window.addEvent('domready', function(){
test();
});
</script>
<a id="a-content" href="#">CLICK HERE</a>
</div>
</body>
</html>
When injecting HTML on the fly events aren't carried over unless you use event delegation. If you don't use event delegation the event will only be on the original element. See http://mootools.net/docs/more/Element/Element.Delegation
You'll need to do something like this. $('body').addEvent('click:relay(#a-content)', function(){...}); Where the body would capture the click event and delegate it to any element with the id of "a-content".
Also by setting the content like this $('content').innerHTML = $('test').innerHTML; you will have duplicate elements with the id "a-content" this is wrong. HTML id's should be unique. Try classing stuff that you'll reuse instead.