I want to limit how many checkbox clicked. When it reaches to the limit I want to trigger an action. Let's say max limit is 3 and min limit is 1. Here's my html.
<div class="ingredients">
<span class="border-bottom"></span>
<div class="row cf">
<label tabindex="1" class="mnf-checkbox" for="tuzCheck">
<span class="ck"></span>
<input id="tuzCheck" type="checkbox"
name="information" value="1" />
<span class="name">Tuz</span>
</label>
<label tabindex="2" class="mnf-checkbox" for="karnibaharCheck">
<span class="ck"></span>
<input id="karnibaharCheck" type="checkbox"
name="information" value="2" />
<span class="name">Karnıbahar</span>
</label>
<label tabindex="3" class="mnf-checkbox" for="biberCheck">
<span class="ck"></span>
<input id="biberCheck" type="checkbox"
name="information" value="3" />
<span class="name">Biber</span>
</label>
<label tabindex="4" class="mnf-checkbox" for="sosisCheck">
<span class="ck"></span>
<input id="sosisCheck" type="checkbox"
name="information" value="4" />
<span class="name">Sosis</span>
</label>
<label tabindex="5" class="mnf-checkbox" for="prasaCheck">
<span class="ck"></span>
<input id="prasaCheck" type="checkbox"
name="information" value="5" />
<span class="name">Prasa</span>
</label>
</div>
</div>
I tried to use this code but that doesn't help me.
var maxCheckedCount = 3;
jQuery('input[type=checkbox]').click(function () {
var n = jQuery('input:checked').length;
if (n >= maxCheckedCount) {
$(this).prop('checked', false);
$(".counter").text("hakkın kalmadı :(").css("color", "#cd1212");
}
});
What I want to do is: when it reaches its limit I want to trigger an action and the user can't continue to check. I'm beginner so please don't judge me :)
Try this one...
http://jsfiddle.net/ZpqQ2/3/
var max = 3;
jQuery('input[type=checkbox]').click(function () {
var n = jQuery('input:checked').length;
if (n > max) {
// here your code
$(this).prop('checked', false);
alert('Minimum of 3');
}
});
try the Fiddle
jQuery('input[type=checkbox]').click(function() {
var n = jQuery('input[type=checkbox]:checked').length;
if (n >= 1 && n <= 3) {
// here your code
}
});
var countChecked = function () {
var n = $("input:checked").length;
alert("n>>>" + n);
$("div").text(n + (n === 1 ? " is" : " are") + " checked!");
if(n == 2){
$("input:checkbox:not(:checked)").attr("disabled", true);
} else {
$("input:checkbox:not(:checked)").attr("disabled", false);
}
};
countChecked();
$("input[type=checkbox]").on("click", countChecked);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
<input type="checkbox" name="newsletter" class="newsletter" value="Hourly">
<input type="checkbox" name="newsletter" class="newsletter" value="Daily">
<input type="checkbox" name="newsletter" class="newsletter" value="Weekly">
<input type="checkbox" name="newsletter" class="newsletter" value="Monthly" >
<input type="checkbox" name="newsletter" class="newsletter" value="Yearly">
</p>
The problem is I still contunie to check after an alert. That doesn't restrict me to check.
Related
I have a poll for my mock website where I need to vote for one of three contestants. I need to store the vote in local storage and then after each additional vote, I need to update the vote in local storage and display it beside the contestants. My main problem is with updating the vote in local storage. I have to do it with only javaScript, HTML and CSS
<html>
<body>
<fieldset>
<legend> <h3>Vote For Your Favorite Chef! </h3></legend>
<form onsubmit="getChoice()" id="pollForm"> <!-- do js for the getCHoice-->
<input type="radio" id="Nominee1" name="Nominee" value="Reynold Poernomo" required/>
<label for="Nominee1"> Reynold Poernomo </label>
<span id="nom1" class="vote"></span>
<br/>
<input type="radio" id="Nominee1.1" name="Nominee" value="Christine Tania" required>
<label for="Nominee1.1"> Christine Tania </label>
<span id="nom2" class="vote"></span>
<br/>
<input type="radio" id="Nominee1.2" name="Nominee" value="Christina Tosi" required>
<label for="Nominee1.2"> Christina Tosi </label>
<span id="nom3" class="vote"></span> <br />
<br/>
<input type="submit">
</form>
<script src="js/localStorage.js"></script>
</fieldset>
</body>
</html>
<script>
function incrementPoll() {
let nominee1 = document.getElementById('Nominee1').value;
let nominee2 = document.getElementById('Nominee2').value;
let nominee3 = document.getElementById('Nominee3').value;
if (nominee1.checked == true) {
updatePoll("Nominee1");
} else if (nominee2.checked == true) {
updatePoll("Nominee2");
} else if (nominee3.checked == true) {
updatePoll("Nominee3");
}
}
function updatePoll(entry) {
let voteUpdate = parseInt(localStorage.getItem(entry),10) + 1;
return localStorage.setItem(entry, (Number(voteUpdate)).toString()); //how to convert to string
}
These two functions are supposed to check which button is being selected and updates the vote in local storage. But it doesn't actually work.
Here's a working version of your code. I hope this helps.
const nominee1 = document.getElementById('Nominee1');
const nominee2 = document.getElementById('Nominee2');
const nominee3 = document.getElementById('Nominee3');
function incrementPoll(e) {
e.preventDefault();
if (nominee1.checked == true) {
updatePoll("Nominee1");
} else if (nominee2.checked == true) {
updatePoll("Nominee2");
} else if (nominee3.checked == true) {
updatePoll("Nominee3");
}
}
function updatePoll(entry) {
const voteUpdate = (parseInt(localStorage.getItem(entry), 10) || 0) + 1;
localStorage.setItem(entry, voteUpdate);
document.querySelector(`#${entry.replace('Nominee', 'nom')}`).innerText = voteUpdate;
}
<fieldset>
<legend>
<h3>Vote For Your Favorite Chef! </h3>
</legend>
<form onsubmit="incrementPoll(event)" id="pollForm">
<input type="radio" id="Nominee1" name="Nominee" value="Reynold Poernomo" required/>
<label for="Nominee1"> Reynold Poernomo </label>
<span id="nom1" class="vote"></span>
<br/>
<input type="radio" id="Nominee2" name="Nominee" value="Christine Tania" required>
<label for="Nominee1.1"> Christine Tania </label>
<span id="nom2" class="vote"></span>
<br/>
<input type="radio" id="Nominee3" name="Nominee" value="Christina Tosi" required>
<label for="Nominee2"> Christina Tosi </label>
<span id="nom3" class="vote"></span> <br />
<br/>
<input type="submit">
</form>
</fieldset>
Since the snippet won't work because localStorage is not accessible in an SO snippet, here is a fiddle
let opinions = [];
if (localStorage.myTreesComments) {
opinions = JSON.parse(localStorage.myTreesComments);
}
console.log(opinions);
const myFrmElm = document.getElementById("opnFrm");
myFrmElm.addEventListener("submit", processOpnFrmData);
function processOpnFrmData(event) {
const nopName = document.getElementById("menoapriezvisko").value.trim();
const nopEmail = document.getElementById("email").value.trim();
const nopUrl = document.getElementById("url").value.trim();
const nopComm = document.getElementById("komentar").value.trim();
const nopStar1 = document.getElementById("star-rating").value.trim();
const nopStar2 = document.getElementById("star-rating2").value.trim();
const nopScale = document.getElementById("scale-rating").value.trim();
const nopWillReturn = document.getElementById("willReturnElm").checked;
if (nopName == "" || nopEmail == "" || nopUrl == "" || nopComm == "") {
window.alert("Prosím, zadajte všetky údaje.");
return;
}
const newOpinion = {
name: nopName,
email: nopEmail,
url: nopUrl,
comment: nopComm,
gdpr: nopWillReturn,
created: new Date()
};
console.log("Nový názor návštevníka:\n " + JSON.stringify(newOpinion));
opinions.push(newOpinion);
localStorage.myTreesComments = JSON.stringify(opinions);
//4. Notify the user
window.alert("Tvoj názor bol uložený! Pre viac info nahliadni do konzole.");
console.log("Nový názor bol pridaný!");
console.log(opinions);
//5. Reset the form
myFrmElm.reset();
}
<form id="opnFrm">
<label for="menoapriezvisko">Meno a priezvisko</label>
<input type="text" id="menoapriezvisko" name="menoapriezvisko">
<label for="email">Kontaktný email</label> <input type="email" id="email">
<label>1. Celková spokojnosť s dizajnom a funkcionalitou stránky ?</label><br>
<span class="star-rating">
<input type="radio" name="rating1" value="1"><i></i>
........................
<input type="radio" name="rating1" value="5"><i></i>
</span>
<div class="clear"></div>
<hr class="survey-hr">
<label>2. Celková spokojnosť s obsahom.</label><br>
<span class="star-rating2">
<input type="radio" name="rating2" value="1"><i></i>
..........................
<input type="radio" name="rating2" value="5"><i></i>
</span>
<div class="clear"></div>
<hr class="survey-hr">
<label style="color: red;"><b>3. Celkové hodnotenie stránky (1-10)</b></label>
<span class="scale-rating">
<label value="1">
<input type="radio" name="rating" >
<label style="width:100%;"></label>
</label>
<label value="2">
<input type="radio" name="rating" >
<label style="width:100%;"></label>
</label>
..................
<label value="10">
<input type="radio" name="rating" value="10">
<label style="width:100%;"></label>
</label>
</span>
<div class="clear"></div>
<input style="background:#43a7d5;color:#fff;padding:12px;border:0" type="submit" value="Odoslať">
<button type="submit">Odošli</button>
<input style="background:#43a2d1;color:#fff;padding:12px;border:0" type="reset" value="Resetuj">
</form>
</div>
</article>
I need to write values from 3 spans of radio buttons to my JS script into const Opinions.
In first 2 spans I have star rating from 1-5 and in the third span I have points (1-10).. I need to read these values and write them into my script. Please if u can help me i would be really pleased. It is hard for me.
I am using jQuery and Javascript.
Thanks for any help.
I am doing a simple online form to calculate BMR using Harris–Benedict equation with the imperial measurements. I don't know where the error is inside my code but right now only the Clear the form button works. I didn't post the entire HTML code for the webpage because it looks just like I want it and it's only the calculation that I am having the problem with.
<form>
<fieldset id="ImpCalcInfo">
<label for="ageinput">
Age
<input tabindex="1" type="text" id="ageinput" name="age" />
</label>
<label for="heightinput">
Height
<input tabindex="3" type="text" id="heightinput" name="heigh" />
</label>
<label for="weightinput">
Weight
<input tabindex="5" type="text" id="weightinput" name="weight" />
</label>
<label for="genderinput">
<input name="gender" tabindex="7" type="radio" id="maleinput" value="1" checked>Male
<input name="gender" tabindex="9" type="radio" id="femaleinput" value="0">Female
</label>
</fieldset>
<input tabindex="11" type="button" id="submit" value="Submit" />
<input tabindex="13" type="reset" value="Clear fields" />
</form>
function impCalc() {
var bmrIm = 0;
var ageIm = document.getElementById("ageinput").value;
var heightIm = document.getElementById("heightinput").value;
var weightIm = document.getElementById("weightinput").value;
var genderIm = document.getElementById("gender").value;
if (genderIm.value = "1") {
bmrIm = 66 + (6.2 * weightIm) + (12.7 * heightIm) - (6.76 * ageIm);
}
else {
bmrIm = 655 + (4.35 * weightIm) + (4.7 * heightIm) - (4.7 * ageIm);
}
(ageIm && heightIm && weightIm) ? alert("Your BMR is: " + bmrIm) : alert("Please fill in all fields");
}
document.getElementById("button").addEventListener("submit", impCalc, false);
The radio button were not working because you were taking them as an ID but the id does not exist in the input. You have get them via getElementsByName()[0]
Also you event listener did not know where button is clicked so the button id is is unique and it will listen to that click only when you click submit.
Here is working demo: https://jsfiddle.net/usmanmunir/tjsnaz4w/10/
function impCalc() {
var bmrIm = 0;
var ageIm = document.getElementById("ageinput").value;
var heightIm = document.getElementById("heightinput").value;
var weightIm = document.getElementById("weightinput").value;
var genderIm = document.getElementsByName("gender")[0].value
if (genderIm.value == "1") {
bmrIm = 66 + (6.2 * weightIm) + (12.7 * heightIm) - (6.76 * ageIm);
}
else {
bmrIm = 655 + (4.35 * weightIm) + (4.7 * heightIm) - (4.7 * ageIm);
}
(ageIm && heightIm && weightIm) ? alert("Your BMR is: " + bmrIm) : alert("Please fill in all fields");
}
var el = document.getElementById('submit');
el.addEventListener("click", impCalc, false);
HTML
<form>
<fieldset id="ImpCalcInfo">
<label for="ageinput">
Age
<input tabindex="1" type="text" id="ageinput" name="age" />
</label>
<label for="heightinput">
Height
<input tabindex="3" type="text" id="heightinput" name="heigh" />
</label>
<label for="weightinput">
Weight
<input tabindex="5" type="text" id="weightinput" name="weight" />
</label>
<label for="genderinput">
<input name="gender" tabindex="7" type="radio" id="gender" value="1" checked>Male
<input name="gender" tabindex="9" type="radio" id="gender" value="0">Female
</label>
</fieldset>
<input tabindex="11" type="button" id="submit" value="Submit" />
<input tabindex="13" type="reset" value="Clear fields" />
</form>
Hope this helps.
Im using angular.
I have Three checkboxes in a Group and i want to make sure only one of them can be checked. So if one is checked the other two has to bee unchacked. I can Think of doing this several ways with native JS or jQuery but i want to know if there is a typical Angular way of doing it.
Here is Plunker with a set up of the checkboxes and angular controll.
http://plnkr.co/edit/IZmGwktrCaYNyrWjfSqf?p=preview
<body ng-controller="MainCtrl">
<div>
{{vm.Output}}
<br>
<br>
<br>
<label>
<input type="checkbox" name="groupA" ng-model="vm.a1" ng-change="vm.changeGroupA()"> A1 </label>
<label>
<input type="checkbox" name="groupA" ng-model="vm.a2" ng-change="vm.changeGroupA()"> A2 </label>
<label>
<input type="checkbox" name="groupA" ng-model="vm.a3" ng-change="vm.changeGroupA()"> A3 </label>
<br>
<br>
<br> {{vm.Output}}
</body>
Since you can't use radio buttons, I've made this plnkr when you check one the others are deselected:
http://plnkr.co/edit/apSE3cIXA7DIvulBfNGX?p=preview
<label> <input type="checkbox" name="groupA" ng-model="vm.a1" ng-change="vm.a2 = false; vm.a3 = false; vm.changeGroupA()" > A1 </label>
<label> <input type="checkbox" name="groupA" ng-model="vm.a2" ng-change="vm.a1 = false; vm.a3 = false; vm.changeGroupA()" > A2 </label>
<label> <input type="checkbox" name="groupA" ng-model="vm.a3" ng-change="vm.a2 = false; vm.a1 = false; vm.changeGroupA()" > A3 </label>
Hope it helps =)
Edit: You can probably change the state of the other checkboxes in the controller for best practice, made in the html just to demonstrate more quickly..
Another way to do it would be: http://plnkr.co/edit/kH12pYkXfY6t6enrlSns
<br><br><br>
<label> <input type="checkbox" name="groupA" ng-model="vm.groupA[0]" ng-change="vm.changeGroupA(0)" > A1 </label>
<label> <input type="checkbox" name="groupA" ng-model="vm.groupA[1]" ng-change="vm.changeGroupA(1)" > A2 </label>
<label> <input type="checkbox" name="groupA" ng-model="vm.groupA[2]" ng-change="vm.changeGroupA(2)" > A3 </label>
<br><br><br>
The controller would look like this:
$scope.vm = {
groupA: [false, true, false],
count : 0,
changeGroupA : function (index)
{
for (i = 0, len = this.groupA.length; i < len; ++i) {
this.groupA[i] = ((1 << index) & (1 << i)) > 0;
}
this.Output = '(' + this.count + ')' + this.Output;
this.count ++;
},
Output : 'Here we go'
}
You might want to do it the hard way out. http://plnkr.co/edit/A53w4IJMRXQmvRsxa8JA and it should work
changeGroupA : function (x)
{
if (x === 'A1'){
$scope.vm.a1 = true;
$scope.vm.a2 = false;
$scope.vm.a3 = false;
}
else if (x === 'A2') {
$scope.vm.a2 = true;
$scope.vm.a1 = false;
$scope.vm.a3 = false;
}
else if (x === 'A3') {
$scope.vm.a3 = true;
$scope.vm.a1 = false;
$scope.vm.a2 = false;
}
this.Output = '(' + this.count + ')' + this.Output;
this.count ++;
},
This works perfectly fine for angular 6 or 8
HTML:
<div class="custom-control custom-checkbox custom-control-inline">
<input type="checkbox" class="custom-control-input" id="check1id"
[(ngModel)]="check1" (change)="onlyOneValue($event)"/>
<label for="check1id" class="custom-control-label">Checkbox 1</label>
</div>
<div class="custom-control custom-checkbox custom-control-inline">
<input type="checkbox" class="custom-control-input" id="check2id"
[(ngModel)]="check2" (change)="onlyOneValue($event)" />
<label for="check2id" class="custom-control-label"> Checkbox 2 </label>
</div>
.ts code:
check1=false;
check2=false;
onlyOneValue(e)
{
if (e.target.id == "Check1id") {
this.Check1= true;
this.Check2 = false;
}
else if (e.target.id == "Check1id") {
this.Check1= true;
this.Check2 = false;
}
}
Why don't you just use a radio button?
<label>
<input type="radio" name="groupA" ng-model="vm.a1" ng-change="vm.changeGroupA()"> A1 </label>
<label>
<input type="radio" name="groupA" ng-model="vm.a2" ng-change="vm.changeGroupA()"> A2 </label>
<label>
<input type="radio" name="groupA" ng-model="vm.a3" ng-change="vm.changeGroupA()"> A3 </label>
Here is my code:
<form id="F2" onsubmit="return false;">
Which do you want?<br />
<input name="a" onclick="TotalCheckedValues()" type="checkbox" value="10" />New (10.00)<br />
<input name="b" onclick="TotalCheckedValues()" type="checkbox" value="0" />Broken (Free)<br />
<input name="c" onclick="TotalCheckedValues()" type="checkbox" value="55" />Antique (55.00)<br />
<input name="d" onclick="TotalCheckedValues()" type="checkbox" value="4.95" />Refurbished (4.95)<br />
Total: <input name="T" readonly="readonly" size="5" type="text" /><br />
<input onclick="TotalCheckedValues()" type="button" value="Click" /> </form>
function TotalCheckedValues() {
var total = 0;
if(document.getElementById("F2").a.checked == true) { total += parseFloat(document.getElementById("F2").a.value); }
if(document.getElementById("F2").b.checked == true) { total += parseFloat(document.getElementById("F2").b.value); }
if(document.getElementById("F2").c.checked == true) { total += parseFloat(document.getElementById("F2").c.value); }
if(document.getElementById("F2").d.checked == true) { total += parseFloat(document.getElementById("F2").d.value); }
var ts = new String(total);
if(ts.indexOf('.') < 0) { ts += '.00'; }
if(ts.indexOf('.') == (ts.length - 2)) { ts += '0'; }
document.getElementById("F2").T.value = ts;
document.getElementById("F3").innerHTML = ts;
}
I want to show the updated result whenever I click and untick the checkbox.
Just add "script" tag in your html before function start which indicate javascripts code.