I am writing this code, but unable to get anything. Any help is appreciated.
<!DOCTYPE HTML>
<html>
<head>
<script>
function computeMarks() {
var inputElems = document.form1.getElementsByTagName("input");
var count = 0;
for (var i =0; i<=inputElems.length; i++) {
if(inputElems[i].type === "checkbox" && inputElems[i].checked) {
count++;
}
}
alert(count);
}
</script>
</head>
<body>
<form name="form1" id="form1">
<input type="checkbox" name="quiz" value=1 /> Hi
<input type="checkbox" name="quiz" value=1 /> Bye
<input type="checkbox" name="quiz" value=1 /> See ya
<input type="button" onClick="computeMarks()" value="Compute Marks"/>
</form>
</body>
</html>
I have tried to do getElementByName("quiz") but the same thing is happening.
Change i<=inputElems.length to i < inputElems.length. Array indexes run from 0 to length-1. You're getting an error when i is inputElements.length (when your scripts don't work, isn't the Javascript console the first place you look for help?).
DEMOenter link description here
Well what you need to do is just remove = sign from <= in your code.
<!DOCTYPE HTML>
<html>
<head>
<script>
function computeMarks() {
var inputElems = document.form1.getElementsByTagName("input");
var count = 0;
for (var i =0; i<inputElems.length; i++) {
if(inputElems[i].type === "checkbox" && inputElems[i].checked) {
count++;
}
}
alert(count);
}
</script>
</head>
<body>
<form name="form1" id="form1">
<input type="checkbox" name="quiz" value=1 /> Hi
<input type="checkbox" name="quiz" value=1 /> Bye
<input type="checkbox" name="quiz" value=1 /> See ya
<input type="button" onClick="computeMarks()" value="Compute Marks"/>
</form>
</body>
</html>
I recommand the JQuery to do this, it's way easier. Here is an example if you use JQuery in your code instead of plain javascript:
<!DOCTYPE HTML>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
function computeMarks() {
var counter = 0;
$('input[type="checkbox"]').each(function(){
if($(this).prop('checked'))
{
counter++;
}
});
alert(counter);
}
</script>
</head>
<body>
<form name="form1" id="form1">
<input type="checkbox" name="quiz" value=1 /> Hi
<input type="checkbox" name="quiz" value=1 /> Bye
<input type="checkbox" name="quiz" value=1 /> See ya
<input type="button" onClick="computeMarks()" value="Compute Marks"/>
</form>
</body>
</html>
You can get the reference of the form and loop through it's elements to see if they are checked or not, simply replace your function with this and it should work:
function computeMarks() {
var checked = 0;
var form = document.getElementById("form1");
var index, element;
for (index = 0; index < form.elements.length; ++index) {
element = form.elements[index];
// You may want to check `element.name` here as well
if (element.type.toUpperCase() == "CHECKBOX" && element.checked)
++checked;
}
alert(checked);
}
See the DEMO here
I would recommend you query the elements, and add the event in JavaScript, for example:
var form = document.form1
var button = form.querySelector('[type="button"]')
var checkboxes = form.querySelectorAll('[type="checkbox"]')
var computeMarks = function(els) {
return []
.map.call(els, function(x){return +x.checked})
.reduce(function(x, y){return x + y})
}
button.addEventListener('click', function() {
alert(computeMarks(checkboxes))
})
Demo: http://jsfiddle.net/u59c3d1L/2/
Related
So, basically i have a textbox and file upload button . What i want when user enter integer in textbox for eg :10 then i want to display file upload button 10 times.
Here is a working demo hope it will helpful for you.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function AppendRow(e) {
var val = e.value;
if (val !== "") {
var html ='';
for (var i = 0; i < val; i++) {
html +='<input type="file" id="file">';
}
$("#append").empty().append(html);
}
}
</script>
</head>
<body>
<input type="text" id="input1" onkeyup="AppendRow(this)"/>
<div id="append">
<div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("input").keyup(function(){
var val = $(this).val();
if (val !== "") {
var html;
for (var i = 0; i < val; i++) {
html = '<input type="file" id="file">';
$("#append").append(html);
}
}
});
});
</script>
</head>
<body>
<input type="text" id="input" />
<div id="append">
</div>
</body>
</html>
Please use the following code
<input [(ngModel)]="count" />
<div *ngFor="let item of [].constructor(count); ">
<input type='file'>
</div>
i need to do six checkboxes for one image , and this image need to change if one or more checkboxes is cheked , how i can do it? please help me , i attach my code.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<img src="img/fotodiente/1.jpg" width="78" height="107" alt="1" id="diente1" onclick="changeImage1()"/>
<form name="form1" onsubmit="checkBoxValidation()">
<p><input type="checkbox" name="chbdiente1" value="1"/>Vestibular</p>
<p><input type="checkbox" name="chbdiente1" value="2"/>Mesial</p>
<p><input type="checkbox" name="chbdiente1" value="3"/>Oclusal</p>
<p><input type="checkbox" name="chbdiente1" value="4"/>Distal</p>
<p><input type="checkbox" name="chbdiente1" value="5"/>Palatino</p>
<p><input type="checkbox" name="chbdiente1" value="6"/>Lingual</p>
<p><input type="submit" value="submit"/>
</form>
<%String chbdiente1[] = request.getParameterValues("chbdiente1");
if (chbdiente1 != null) {%>
<script>
function changeImage1() {
var image = document.getElementById('diente1');
image.src = "img/fotodiente/1.1.jpg";
}
;
</script>
<ul><%for (int i = 0; i < chbdiente1.length; i++) {%>
<li><%=chbdiente1[i]%></li><%}%>
</ul><%}%>
</body>
</html>
i have this code and send me the value of selected checkboxes , but the image not change. help please. thanks
If you want to change the image after click of checkboxes you need to call changeImage1() into onchange or onclick method of checkbox.
Example:
<script>
$('document').ready(function(){
$('input[type="checkbox"]').click(function(){
changeImage1();
});
});
function changeImage1() {
var image = document.getElementById('diente1');
image.src = "img/fotodiente/1.1.jpg";
}
</script>
function changeImage1() {
var image = document.getElementById('diente1');
var checkboxes = document.getElementById("form1");
var cont = 0;
try {
for (var x = 0; x < checkboxes.length; x++) {
if (checkboxes[x].checked) {
cont = cont + 1;
}
}
} catch (e) {
}
try {
if (cont > 0) {
image.src = "img/fotodiente/1.1.jpg";
d1 = 2;
array.push("Pieza 1");
var chb2 = document.getElementsByName("form1");
} else if (cont === 0) {
image.src = "img/fotodiente/1.jpg";
d1 = 1;
array.splice(1, 1);
}
} catch (e) {
}
}
;
<img src="img/fotodiente/1.jpg" class="item_thumb" width="78" height="107" alt="1" id="diente1" onclick="changeImage1()"/>
<form id="form1" method="post" action="">
<input type="checkbox" id="chbdiente1" value="1" onclick="changeImage1();" /><label>Vestibular</label>
<input type="checkbox" id="chbdiente1" value="2" onclick="changeImage1();" /><label>Mesial</label>
<input type="checkbox" id="chbdiente1" value="3" onclick="changeImage1();" /><label>Oclusal</label>
<input type="checkbox" id="chbdiente1" value="4" onclick="changeImage1();" /><label>Distal</label>
<input type="checkbox" id="chbdiente1" value="5" onclick="changeImage1();" /><label>Palatino</label>
<input type="checkbox" id="chbdiente1" value="6" onclick="changeImage1();" /><label>Lingual</label>
<input type="button" name="Submit" value="Contar" hidden="">
</form>
Well, this changes the image when there are 1 or more checkboxes clicked, if all the checkboxes are unchecked the image returns to the first one.
I hope also I can help others and thanks
When I click on back button of next page the check box value should not be reset.
It should be same as I checked or unchecked. The code from the first and next page is below.
First Page
<!DOCTYPE html>
<html>
<body>
<form>
<input type="checkbox" name="code" value="ECE">ECE<br>
<input type="checkbox" name="code" value="CSE">CSE<br>
<input type="checkbox" name="code" value="ISE">ISE<br>
<br>
<input type="button" onclick="dropFunction()" value="save">
<br><br>
<script>
function dropFunction() {
var branch = document.getElementsByName("code");
var out = "";
for (var i = 0; i < branch.length; i++) {
if (branch[i].checked == true) {
out = out + branch[i].value + " ";
window.location.href="next.html";
}
}
}
</script>
</form>
</body>
</html>
Next Page
<html>
<head>
<title>Welcome to </title>
</head>
<body color="yellow" text="blue">
<h1>welcome to page</h1>
<h2>here we go </h2>
<p> hello everybody<br></p>
</body>
<image src="D:\images.jpg" width="300" height="200"><br>
<button onclick="goBack()">Go Back</button>
<script>
function goBack() {
window.location.href="first.html";
}
</script>
</body>
</html>
Full solution: example. First add ids to your checkboxes:
<input type="checkbox" name="code" value="ECE" id='1'>ECE<br>
<input type="checkbox" name="code" value="CSE" id='2'>CSE<br>
<input type="checkbox" name="code" value="ISE" id='3'>ISE<br>
<input id="spy" style="visibility:hidden"/>
Then change your dropFunction:
function dropFunction() {
var branch = document.getElementsByName("code");
var out = "";
localStorage.clear();
for (var i = 0; i < branch.length; i++)
if (branch[i].checked == true)
localStorage.setItem(branch[i].id, true);
for (var i = 0; i < branch.length; i++) {
if (branch[i].checked == true) {
out = out + branch[i].value + " ";
window.location.href="next.html";
}
}
}
And add some new javascript code to first.html:
window.onload = function() {
var spy = document.getElementById("spy");
if(spy.value=='visited')
for(var i=1;i<=3;i++)
if(localStorage.getItem(i))
document.getElementById(i).checked=true;
spy.value = 'visited';
}
I'm trying to get the number of checkBoxes checked with using the information from an array but I keep getting undefined. I have to use an array, a switch, and must be in JavaScript for this project. I can't use any other programming Language.
How can I get my function to correctly add the checked boxes?
I am also not sure on how I could implement a switch into this function.+
Please help, I've been working on this for about 4 hours, searching everywhere to find a helpful answer.
My HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Project</title>
</head>
<body>
<form id="frmCareer" method="get" action="prjFormEvent.js">
<table id="tblCareer">
<th>Directions: Check of the items you think you would enjoy in each section.<br /> Mark as many items that apply.</th>
<tr><td><strong><label id="lblRealistic">
"R" Section</label></strong>
<div id="realisticTotal"></div>
<br />
<input type="checkbox"
name="chkRealistic"
onclick="getRealistic()"
value="chkRealistic1">Repair a car
<br />
<input type="checkbox"
name="chkRealistic"
onclick="getRealistic()"
value="chkRealistic2">Do wood working
<br />
<input type="checkbox"
name="chkRealistic"
onclick="getRealistic()"
value="chkRealistic3">Refinish furniture
<br />
<input type="checkbox"
name="chkRealistic"
onclick="getRealistic()"
value="chkRealistic4">Explore a forest
<br />
</tr></td>
</table><!--End of tblWhichCareer-->
</form><!--End of frmWhichCareer-->
</body>
</html>
My JavaScript
Global Variables
var getCareer = new Array();
getCareer["chkRealistic1"] = 1;
getCareer["chkRealistic2"] = 1;
getCareer["chkRealistic3"] = 1;
getCareer["chkRealistic4"] = 1;
function getRealistic()
{
var rTotal = 0;
var selectedRealistic = document.forms["frmCareer"]["chkRealistic"];
rTotal = getCareer[selectedRealistic.value]
document.getElementById("lblRealistic").innerHTML = rTotal+ "/9 Checked"
}//End of function getRealisticCareer()
You missed the fact that this line
var selectedRealistic = document.forms["frmCareer"]["chkRealistic"];
returns an array of checkboxes with the name chkRealistic (in your example, all four of them).
Instead of assigning the result of the getCareer function to rTotal, you should iterate through the array of HTMLInput in selectedRealistic checking for the .checked property.
var rTotal = 0;
var selectedRealistic = document.forms["frmCareer"]["chkRealistic"];
for (var sel = 0; sel < selectedRealistic.length; sel++)
{
if (selectedRealistic[sel].checked)
rTotal += getCareer[selectedRealistic[sel].value]
}
document.getElementById("lblRealistic").innerHTML = rTotal+ "/9 Checked"
You can check a running example here: http://codepen.io/pabloapa/pen/jPNPNg
Try using:
document.getElementById("lblRealistic").innerHTML = document.querySelectorAll('input[name="chkRealistic"]:checked').length + "/9 Checked";
Try this:
function getRealistic()
{
var rTotal = 0;
for(i=0; i<document.forms[0].chkRealistic.length; i++){
if(document.forms[0].chkRealistic.item(i).checked){
rTotal++;
}
}
document.getElementById("lblRealistic").innerHTML = rTotal+ "/9 Checked"
}
Here try this also on Plunker: http://plnkr.co/edit/085ZtojBgvumktHwQSGf?p=preview
<form id="frmCareer" method="get" action="prjFormEvent.js">
<table id="tblCareer">
<tr>
<th>Directions: Check of the items you think you would enjoy in each section.
<br />Mark as many items that apply.</th>
</tr>
<tr>
<td><strong><label id="lblRealistic">
"R" Section</label></strong>
<div id="realisticTotal"></div>
<br />
<input type="checkbox" name="chkRealistic" onchange="getRealistic(this)" value="chkRealistic1">Repair a car
<br />
<input type="checkbox" name="chkRealistic" onchange="getRealistic(this)" value="chkRealistic2">Do wood working
<br />
<input type="checkbox" name="chkRealistic" onchange="getRealistic(this)" value="chkRealistic3">Refinish furniture
<br />
<input type="checkbox" name="chkRealistic" onchange="getRealistic(this)" value="chkRealistic4">Explore a forest
<br />
</td>
</tr>
</table>
<!--End of tblWhichCareer-->
</form>
<!--End of frmWhichCareer-->
<script language="JavaScript">
var getCareer = new Array();
getCareer["chkRealistic1"] = 0;
getCareer["chkRealistic2"] = 0;
getCareer["chkRealistic3"] = 0;
getCareer["chkRealistic4"] = 0;
function getRealistic(cbox) {
var rTotal = 0;
var key = cbox.value;
getCareer[key] = cbox.checked ? 1 : 0;
for (var key in getCareer) {
rTotal += getCareer[key];
}
document.getElementById("lblRealistic").innerHTML = rTotal + "/9 Checked"
} //End of function getRealisticCareer()
</script>
I'm trying to multiply the entered text input value with the sum of check box values clicked. So far when you click the check boxes the sumof their avues is displayed instantly on the span emlement with id="Totalcost"....i need some help figuring out how i could multiply the sum of check box selected with the value entered in the text input field.
If it can be easily done using JQuery i will really appreciate
Thanks in advance.
Here is my code
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
var total = 0;
inputBox.onkeyup = function(){
document.getElementById('Totalcost').innerHTML = inputBox.value;
}
function test(item){
var inputBox = document.getElementById('chatinput');
if(item.checked){
total+= parseInt(item.value);
}else{
total-= parseInt(item.value);
}
//alert(total);
document.getElementById('Totalcost').innerHTML = total ;
}
</script>
</head>
<body>
<input type="text" id="chatinput" onchange="myFunction()"><br>
<p id="printchatbox"></p>
<div id="container">
<p id="printc"></p>
<input type="checkbox" name="channcost" value="10" onClick="test(this);" />10<br />
<input type="checkbox" name="chanlcost" value="20" onClick="test(this);" />20 <br />
<input type="checkbox" name="chancost" value="40" onClick="test(this);" />40 <br />
<input type="checkbox" name="chanlcost" value="60" onClick="test(this);" />60 <br />
</div>
Total Amount : <span id="Totalcost"> </span><BR><BR><BR>
</body>
</html>
You have many incongruences in your code.....
Replace it with this:
<!DOCTYPE HTML>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
var total = 0;
function test(){
var checkboxes = document.getElementById('container').getElementsByTagName("input");
var box_value = parseInt(document.getElementById('chatinput').value);
var new_total = 0;
for(var i=0; i<checkboxes.length; i++){
var item = checkboxes[i];
if(item.checked){
new_total += parseInt(item.value);
}
}
if(box_value>0){ total = (new_total>0?new_total:1) * box_value; }
else{ total = new_total; }
document.getElementById('Totalcost').innerHTML = total ;
}
</script>
</head>
<body>
<input type="text" id="chatinput" onchange="test()"><br>
<p id="printchatbox"></p>
<div id="container">
<p id="printc"></p>
<input type="checkbox" name="channcost" value="10" onClick="test();" />10<br />
<input type="checkbox" name="chanlcost" value="20" onClick="test();" />20 <br />
<input type="checkbox" name="chanlcost" value="40" onClick="test();" />40 <br />
<input type="checkbox" name="chanlcost" value="60" onClick="test();" />60 <br />
</div>
Total Amount : <span id="Totalcost"> </span><BR><BR><BR>
</body>
</html>
I changed your script to make these changes
var total = 0;
function test(item){
var inputBox = document.getElementById('chatinput');
if(item.checked){
total+= parseInt(item.value);
}else{
total-= parseInt(item.value);
}
inputValue = $("#chatinput").val();
textValue = (isNaN(inputValue)) ? 1 : parseInt(inputValue);
if(textValue == "NaN"){
textValue = 1;
}
totalAfterMul = total*textValue;
console.log(totalAfterMul);
document.getElementById('Totalcost').innerHTML = totalAfterMul ;
}
It will do what is desired.
It takes the input value and then multiply it with the sum of the check boxes. If the input value is not a number then it will consider it as 1
inputValue = $("#chatinput").val();
textValue = (isNaN(inputValue)) ? 1 : parseInt(inputValue);
if(textValue == "NaN"){
textValue = 1;
}
totalAfterMul = total*textValue;