I want to save the boolean values of my checkbox for a longer period. Also I need to store the values of each checkbox in an array to read them out later. I´ve tried some example code and tutorials about cookies but nothing seems to work.
With checklist_1s.html i access checklistRequest.js to store the values of each checkbox in my array. Later I´ll need to use this array for another js function in another window, but the moment I open this window, my array is gone.
I´m looking for an easy solution here, if possible.
Note: I know using the same name for every checkbox is an violation, but it seems to work so far and I couldn´t find any other way to get it to work for every checkbox (I´ll need like 200 later)
checklist_1s.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="../../style.css"></link>
<script src="checklistRequest.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/json2/20110223/json2.js"></script>
<script src="https://raw.github.com/andris9/jStorage/master/jstorage.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.cookie/1.4.0/jquery.cookie.min.js"></script>
<style>
</style>
</head>
<body class="main">
<div class="main_2">
<p>
<h1>Checklist</h1>
<form>
<input type="checkbox" name="remember" id="remember" onclick="checkboxFunction(value, 0)" value="F-Card geholt">F-Card geholt<br>
<input type="checkbox" name="remember" id="remember" onclick="checkboxFunction(value, 1)" value="Ersti Rally">Ersti Rally <br>
<input type="checkbox" name="remember" id="remember" onclick="checkboxFunction(value, 2)" value="TEST">TEST<br>
</form>
<input type="button" name="alert" value="Aktualisieren" onclick="alertFunction()">
<!-- Example Code-->
<script>
$("#checkAll").on("change", function(){
$(':checkbox').not(this).prop('checked', this.checked);
});
$(":checkbox").on("change", function(){
var checkboxValues = {};
$(":checkbox").each(function(){
checkboxValues[this.id] = this.checked;
});
$.cookie('checkboxValues', checkboxValues, { expires: 7, path: '/' })
});
function repopulateCheckboxes(){
var checkboxValues = $.cookie('checkboxValues');
if(checkboxValues){
Object.keys(checkboxValues).forEach(function(element){
var checked = checkboxValues[element];
$("#" + element).prop('checked', checked);
});
}
}
$.cookie.json = true;
repopulateCheckboxes();
</script>
</p>
</div>
</body>
</html>
checklistRequest.js
var checkbox = document.getElementsByName("remember");
var checkboxArray = [];
function checkboxFunction(value, index)
{
if(checkbox[index].checked == true)
{
checkboxArray[index] = value;
}
if (checkbox[index].checked == false && value == checkboxArray[index])
{
checkboxArray[index] = null;
}
}
function alertFunction()
{
for(var i=0; i<99; i++)
{
if (typeof checkboxArray[i] != 'undefined' && checkboxArray[i] != null)
{
alert(checkboxArray[i]);
}
}
alert("TEST");
}
Related
I have items being stored in an array then the array stored in local memory.
i am printing out the items to the screen for the users to see with check boxes attached to each item.
I allow the user to clear all of the items in the localStorage like this,
$('#clear').click( function() {
window.localStorage.clear();
location.reload();
return false;
});
I want to allow the user to clear any one check boxed item they want. How can I implement a function to remove the selected check boxed item from the array.
$(document).ready(function () {
localArray = [];
loadKeyWords();
function loadKeyWords() {
$('#keyWords').html('');
localArray = JSON.parse(localStorage.getItem('keyWords'));
for(var i = 0; i < localArray.length; i++) {
$('#keyWords').prepend('<li><input id="check" name="check" type="checkbox">'+localArray[i]+'</li>');
}
}
$('#add').click( function() {
var Description = $('#description').val();
if($("#description").val() === '') {
$('#alert').html("<strong>Warning!</strong> You left the to-do empty");
$('#alert').fadeIn().delay(1000).fadeOut();
return false;
}
$('#form')[0].reset();
var keyWords = $('#keyWords').html();
localArray.push(Description);
localStorage.setItem('keyWords', JSON.stringify(localArray));
loadKeyWords();
return false;
});
if(localStorage.getItem('keyWords')) {
$('#keyWords').JSON.parse(localStorage.getItem('keyWords'));
}
$('#clear').click( function() {
window.localStorage.clear();
location.reload();
return false;
});
$('#clearChecked').click( function() {
if ($(this).is(':unchecked')) {
localArray.push($(this).val());
}
else {
if ((index = localArray.indexOf($(this).val())) !== -1) {
localArray.splice(index, 1);
}
$('#form')[0].reset();
var keyWords = $('#keyWords').html();
localArray.push(Description);
localStorage.setItem('keyWords', JSON.stringify(localArray));
loadKeyWords();
window.location.reload();
return false;
}
});
}); // End of document ready function
My HTML
<!doctype html>
<html>
<head>
<title>Wuno Zensorship</title>
<script src="jquery-1.11.3.min.js"></script>
<script src="popup.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<img src="icon48.png">
<section>
<form id="form" action="#" method="POST">
<input id="description" name="description" type="text" />
<input id="add" type="submit" value="Add" />
<button id="clearChecked">Clear Checked Items</button>
<button id="clear">Clear All</button>
</form>
<div id="alert"></div>
<ul id="keyWords"></ul>
</body>
</html>
You should iterate over the ul looking for the li elements whosecheckbox are checked, then remove them from localArray. Try this:
$('#clearChecked').click( function() {
$('#keyWords > li > input:checked').each(function(){
var desc = $(this).parent().text();
var index = localArray.indexOf(desc);
localArray.splice(index, 1);
});
...
});
I have looked through a lot of the already asked questions and cannot find it. I need the previous appended message to be deleted once you hit the submit button again. So this will let you choose your character that you type into the input field and then it will append a message bellow telling you that you choose x character. After that you can resubmit another character which I want, but I do not want the previous append to be there.
I tried to do a search function in javascript and if it was not equal to -1 then delete the first p in the div, but that did not work=/
Thanks for your help in advance.
html:
<!DOCTYPE html>
<html>
<head>
<title>Result</title>
<link rel='stylesheet' type='text/css' href='styles/main.css'/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type='text/javascript' src='jquery/script.js'></script>
</head>
<body>
<form class="" action="index.html" method="post">
Chose your character (human, orc, elf) : <br><br><input id='text' type="text" name="mess" value="">
<button id='button1' type="button" name="button" onclick="chooseChar()">Submit</button>
</form>
<br>
<div id="box_holder"></div>
<br><br>
<button id='button2' type='button' name='button2' onclick="redirect()">Start Your Adventure</button>
</body>
</html>
JS:
$(document).ready(function() {
$('#button1').click(function(){
var send = $("input[name=mess]").val();
$('#box_holder').append('<p>'+ 'You have chosen your character to be: '+send+'</p>');
});
$('input').css("color","blue");
});
chooseChar = function () {
var text = document.getElementById('text').value;
var text = text.toLowerCase();
if(text == 'human') {
$(document).ready(function() {
$('#button1').click(function(){
var div = $("#box_holder p").val();
var searchTerm = "You";
var searchDiv = div.search(searchTerm);
if (searchDiv != -1) {
$('div p').first().remove();
}
});
});
window.alert("HUMAN YOU ARE! (You may change your character at anytime)");
return;
} else if (text == 'orc') {
window.alert("ORC YOU ARE! (You may change your character at anytime)");
return;
} else if (text == 'elf') {
window.alert("ELF YOU ARE !(You may change your character at anytime)");
return;
} else {
window.alert("Start over! Please choose one of the characters above!");
$(document).ready(function(){
$('div').remove();
});
return;
}
$(document).ready(function() {
});
};
redirect = function() {
var text = document.getElementById('text').value;
var url = text+".html";
window.location.href = url;
}
So your variable send gets sent and then it clears out the input field with either of those functions
$(document).ready(function() {
$('#button1').click(function(){
$('#box_holder').children('p').remove(); <===========
or Either of these should work
$('#box_holder').empty(); <===========================
var send = $("input[name=mess]").val();
$('#box_holder').append('<p>'+ 'You have chosen your character to be: '+send+'</p>');
});
$('input').css("color","blue");
});
Instead of using append, try using html as follows
$('#box_holder').html('<p>'+ 'You have chosen your character to be: '+send+'</p>');
Here is a Plunkr to explain it a little better
$(document).ready(function() {
$('#button1').click(function() {
var send = $("input[name=mess]").val();
$('#box_holder').html('<p>' + 'You have chosen your character to be: ' + send + '</p>');
});
$('input').css("color", "blue");
});
chooseChar = function() {
var text = document.getElementById('text').value;
text = text.toLowerCase();
if (text == 'human') {
$(document).ready(function() {
$('#button1').click(function() {
var div = $("#box_holder p").val();
var searchTerm = "You";
var searchDiv = div.search(searchTerm);
if (searchDiv != -1) {
$('div p').first().remove();
}
});
});
window.alert("HUMAN YOU ARE! (You may change your character at anytime)");
return;
} else if (text == 'orc') {
window.alert("ORC YOU ARE! (You may change your character at anytime)");
return;
} else if (text == 'elf') {
window.alert("ELF YOU ARE !(You may change your character at anytime)");
return;
} else {
window.alert("Start over! Please choose one of the characters above!");
$(document).ready(function() {
$('div').remove();
});
return;
}
$(document).ready(function() {
});
};
redirect = function() {
var text = document.getElementById('text').value;
var url = text + ".html";
window.location.href = url;
}
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#2.1.4" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<form class="" action="index.html" method="post">
Chose your character (human, orc, elf) :
<br />
<br />
<input id="text" type="text" name="mess" value="" />
<button id="button1" type="button" name="button" onclick="chooseChar()">Submit</button>
</form>
<br />
<div id="box_holder"></div>
<br />
<br />
<button id="button2" type="button" name="button2" onclick="redirect()">Start Your Adventure</button>
</body>
</html>
You have to remember, the append() function appends the content on the selected component. The html() function replaces all content inside of it.
Hope it helps
I want to know how to detect if a textbox does not contain certain words. For example if the textbox did not contain 'who', 'what', 'why', 'when' or 'where' some sort of function would run.
JavaScript:
function command() {
var srchVar = document.getElementById("srch");
var srch = srchVar.value;
var t = srch;
if (srch == '') {
alert('Please do not leave the field empty!');
}
else if (srch.indexOf('time') != -1) {
alert('The current time according to your computer is' + ShowTime(new Date()));
}
else if (srch.indexOf('old are you') != -1) {
alert("I am as old as you want me to be.");
}
else {
if (confirm('I am sorry but I do not understand that command. Would you like to search Google for that command?') == true) {
window.open('https://google.co.uk/#q=' + srch, '_blank');
}
else { /* Nothing */ }
}
}
HTML:
<!DOCTYPE html>
<html>
<head>
<script src="script.js" type="text/javascript"></script>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<div class="ui-widget">
<input class="search-field" id="srch" onkeypress="searchKeyPress(event);" placeholder="ask me anything" spellcheck="false">
</div>
</body>
</html>
You will want to call that function when you press a button.
Try something in your HTML like:
<input class="info" onclick="contains();" type="button">
And in your JS
function contains() {
var srchVar = document.getElementById("srch");
var srch = srchVar.value;
if (
(srch.indexOf('who')==-1) &&
(srch.indexOf('what')==-1) &&
(srch.indexOf('why')==-1) &&
(srch.indexOf('when')==-1) &&
(srch.indexOf('where')==-1)
) {
alert("That is not a question");
}
}
You will want to merge this with your command() function in the future.
Also, what does info(); do ?
I have a script that takes in the value of input tags on a click event and I need to compare them to see if they are the same value. Iam still learning Javascript and JQuery so I really need to find some help. Here is my code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#swapCard_0").click(function(){
var phpval = document.getElementById('swapCard_0').value;
});
$("#swapCard_1").click(function(){
var phpval = document.getElementById('swapCard_1').value;
});
$("#swapCard_2").click(function(){
var phpval = document.getElementById('swapCard_2').value;
});
$("#swapCard_3").click(function(){
var phpval = document.getElementById('swapCard_3').value;
});
});
</script>
</head>
<body>
<input type="image" id="swapCard_0" src="image/image0.jpg" value="0">
<input type="image" id="swapCard_1" src="image/image1.jpg" value="1">
<input type="image" id="swapCard_2" src="image/image2.jpg" value="0">
<input type="image" id="swapCard_3" src="image/image3.jpg" value="1">
</body>
</html>
So Say a user clicks image 0 and then clicks image 2 which both have the value of 0, how can I compare them in the function then execute more code? I am sure I would need an if statement but I am not sure how to properly test it in my code. I would like to play a sound when the user clicks two different images that have the same value.
You can have a global variable and set it when user clicks on the first image like this.
$(document).ready(function(){
var selectedImageValue;
$("#swapCard_0").click(function(){
CheckValue($(this).val());
});
$("#swapCard_1").click(function(){
CheckValue($(this).val());
});
$("#swapCard_2").click(function(){
CheckValue($(this).val());
});
$("#swapCard_3").click(function(){
CheckValue($(this).val());
});
function CheckValue(value)
{
if(selectedImageValue != '')
{
selectedImageValue = value;
}
else
{
if(selectedImageValue === value)
{
//Your logic when image contains the same value
}
}
}
});
What i would do if i was you is the following:
Pass a class to all images so you can handle them with one click listener. e.g. class: .image
var phpval;
$('.image').on('click', function() {
if (phpval && phpval === this.value) {
//play sound here
} else {
phpval = this.value; //set php to this value
}
});
I would make several changes. First, I would put a class on all of your cards so that you can target all of them with a single selector. Then I would use the following code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
var prev_click;
$(function(){
$('.swapCard').click(function(){
var this_click = this.value;
if(prev_click === this_click){
playSound();
}
else{
prev_click = this_click;
}
});
});
</script>
</head>
<body>
<input type="image" id="swapCard_0" class="swapCard" src="image/image0.jpg" value="0">
<input type="image" id="swapCard_1" class="swapCard" src="image/image1.jpg" value="1">
<input type="image" id="swapCard_2" class="swapCard" src="image/image2.jpg" value="0">
<input type="image" id="swapCard_3" class="swapCard" src="image/image3.jpg" value="1">
</body>
</html>
This code listens for a click. It then compares the previous click value with the current click value. If they match, it plays a sound. If they don't, it stores the current click value for the next comparison. I think this accomplishes what you're trying to do.
I have a script that checks and check all boxes in a form, my problem is that I only want it to affect only my checkboxes but it also affecting my radio buttons.
This is my JavaScript:
<script>
checked=false;
function checkedAll (frm1) {
var aa= document.getElementById('frm1');
if (checked == false)
{
checked = true
}
else
{
checked = false
}
for (var i =0; i < aa.elements.length; i++)
{
aa.elements[i].checked = checked;
}
}
</script>
This is my html:
<form id ="frm1">
<input type="checkbox" name="chk1">
<input type="radio" name="chk1">
<input type="checkbox" name="chk2">
<input type='checkbox' name='checkall' onclick='checkedAll(frm1);'>
</form>
I was wondering whether there was a way to check only the checkboxes not the radio button?
for (var i =0; i < aa.elements.length; i++)
{
if (aa.elements[i].type == "checkbox") {
aa.elements[i].checked = checked;
}
}
You can loop through the form elements and check for the "type" property. Alternately, you can use a javascript library like jQuery, which makes it easier to select elements of certain type.
var elLength = document.MyForm.elements.length;
for (i=0; i<elLength; i++)
{
var type = MyForm.elements[i].type;
if (type=="checkbox" && MyForm.elements[i].checked){
alert("Form element in position " + i + " is of type checkbox and is checked.");
}
else if (type=="checkbox") {
alert("Form element in position " + i + " is of type checkbox and is not checked.");
}
else {
}
}
In jQuery it would be:
$("input[type='checkbox']).each(function(chk) {
chk.checked = !chk.checked;
});
You can use jquery. use the html code below in your editor. it works correctly!
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.js"> </script>
</head>
<form id="myform">
<input type="checkbox" />chk1
<input type="checkbox" />chk2<br/>
<input type="radio" />radio1<br/>
<a style="cursor:pointer" onclick="ch()">check/uncheck</a>
</form>
</body></html>
and this script:
<script>
function ch(){
$("form#myform input[type='checkbox']").each(function(chk) {
this.checked = !this.checked;
});
}
</script>