I am setting a value checked using localstorage.setitem and using window.location.href to redirect to another page. When page loads and I am trying to acess the saved value using localstorage.getitem, it is not working.
Here is my code:
<input type="checkbox" name="names" onchange="submit(this)" />
function submit(element) {
var names = document.getElementsByName('names');
var selectedList = [];
for (var i = 0; i < names.length; i++) {
if (names[i].checked == true) {
window.localStorage.setItem(names[i].checked, "checked");
}
}
window.location.href = "/testpage.html";
}
$(document).ready(function () {
var names = document.getElementsByName('names');
for (var i = 0; i < names.length; i++) {
if (window.localStorage.getItem(names[i].checked) == "checked") {
names[i].setAttribute('checked', 'checked');
}
}
})
Let's say you're on page x.html and you're redirecting to another page from this page using this line
window.location.href = "/testpage.html";
So any code written in javascript of x.html after the redirecting will not execute, because the execution context of JS now moves to javascript written for testpage.html.
With that said, the solution to your problem will be, to set the localStorage from x.html's JS and when redirected to testpage.html the handle the getting from localStorage part there and then set the values gotten fro localStorage to the checkboxes.
Let's see example of what i've explained above.
Your x.html should look something like this:
function submit(element) {
var names = document.getElementsByName('names');
var selectedList = [];
for (var i = 0; i < names.length; i++) {
if (names[i].checked == true) {
window.localStorage.setItem(names[i].checked, "checked");
}
}
window.location.href = "/testpage.html";
}
<input type="checkbox" name="names" onchange="submit(this)" />
And javascript for testpage.html should look something like this:
$(document).ready(function () {
var names = document.getElementsByName('names');
for (var i = 0; i < names.length; i++) {
if (window.localStorage.getItem(names[i].checked) == "checked") {
names[i].setAttribute('checked', 'checked');
}
}
})
Related
Is there a way to use the qualtrics javascript api (or, if not, a workaround) to programatically clear all entries made to radio buttons on a page?
My usage case is in a matrix table question that "pipes" (actually uses embedded data) values from the previous question to puts calculated numbers into the statements. However, if the respondent navigates back then when the return to the following question the numbers have changed but the responses have remained. As such, if it is the second time a respondent is viewing a page constructed like this, I want to clear all their previous answers.
I want to make sure that qualtrics' data is updated properly.
My survey is currently using the JFE engine if that makes a difference.
Qualtrics.SurveyEngine.addOnload(function() {
var QID = this.questionId;
var that = this;
var counts = [];
var radioButtonsClean = [];
var radioButtons = $(QID).getElementsByTagName('input');
var radioIndex = [];
for(var i=0; i<radioButtons.length; i++) {
if(radioButtons[i].type == 'radio') {
radioButtonsClean.push(radioButtons[i]);
radioIndex.push(radioButtons[i].id);
}
}
// Set counts for each displayed radio button to 0
for(var i=0; i<radioButtonsClean.length; i++) {
counts[i] = 0;
}
this.questionclick = function(event,element){
if (element.type == 'radio') {
var thisId = element.id;
var spotCheck = radioIndex.indexOf(thisId);
var count = counts[spotCheck];
if (count == 0) {
for(var i=0; i<counts.length; i++) {
counts[i] = 0;
}
counts[spotCheck] = 1;
}
else {
this.setChoiceValue(element.id.split('~')[2], element.id.split('~')[3], false);
counts[spotCheck] = 0;
}
}
}
});
I am trying to create a webpage that, given a user input, returns a list of results from wikipedia. I have gotten the call to Wikipedia's API to work fine, but when I attempt to append the data to my webpage, it flickers on for a split second and then disappears. I suspect it has to do with the event handlers, but I have tried several alternatives without luck. I also looked around SO and the web at large but could not find a solution. Here is my code:
var results = [];
$("#search").on("keydown", "#searchinput", function(event) {
if (event.key === "Enter") {
var searchParameter = encodeURIComponent(this.value);
var link = "https://en.wikipedia.org/w/api.php?action=opensearch&search=" + searchParameter + "&limit=10&namespace=0&format=json&origin=*";
$.getJSON(link, function(data) {
for (var key in data) {
results.push(data[key]);
}
for (var i = 0; i < results.length; i++) {
for (var j = 0; j < results[i].length; j++) {
$("#results").append(results[i][j]);
}
}
})
}
});
Thanks in advance for any assistance you can provide! I am happy to provide more information if necessary.
The call to $.getJSON should be in the if block with the variable assignments.
var results = [];
$("#search").on("keydown", "#searchinput", function(event) {
if (event.key === "Enter") {
var searchParameter = encodeURIComponent(this.value);
var link = "https://en.wikipedia.org/w/api.php?action=opensearch&search=" + searchParameter + "&limit=10&namespace=0&format=json&origin=*";
$.getJSON(link, function(data) {
for (var key in data) {
results.push(data[key]);
}
for (var i = 0; i < results.length; i++) {
for (var j = 0; j < results[i].length; j++) {
$("#results").append(results[i][j]);
}
}
})
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="search">
<input id="searchinput" type="text">
</div>
<div id="results">
</div>
I have 11 checkboxes in my HTML form and already have a section in my onclick function to determine how many of them were checked, but I would like to be able to tell which of the checkboxes were checked, and possibly just add whichever checkboxes were checked to an arraylist by id/value etc.
EDIT: (Fixed code..?)
var formobj = document.forms[0];
var ingNum = 0;
checked = [];
for (var j = 0; j < formobj.elements.length; j++) {
if (formobj.elements[j].type == "checkbox" && formobj.elements[j].checked) {
ingNum++;
checked.push(formobj.elements[j].value);
}
}
If you want to convert the ones checked to an array of their value attributes (if id attribute, swap value with id), you could use...
var inputs = document.getElementById('your-form').getElementsByTagName('input'),
checked = [];
for (var i = 0, length = inputs.length; i < length; i++) {
if (inputs[i].type == 'checkbox' && inputs[i].checked) {
checked.push(inputs[i].value);
}
}
That will work on any of the older IEs you may care about.
If you have the luxury of only supporting newer browsers, you could use...
var checked = [].slice.call(document
.querySelectorAll('#your-form input[type="checkbox"]'))
.filter(function(checkbox) {
return checkbox.checked;
})
.map(function(checkbox) {
return checkbox.value;
});
If you were using a library such as jQuery, it's even simpler...
var checked = $('#your-form :checkbox:checked')
.map(function() {
return this.value;
})
.get();
var checkedBoxes = [];
$("input:checked").each(function() {
checkedBoxes.push($(this));
});
Actually, I think you could just do this:
var checkedBoxes = $("input:checked");
but I'm not 100% sure if that works.
I'm trying to "modify/change" the way this code works, I want it to only allow ONE radio button selection out of 30 or more choices. as it is written now, it looks for all selected before submitting. im a noob, please be kind.
<script type="text/javascript">
function checkform() {
//make sure all picks have a checked value
var f = document.entryForm;
var allChecked = true;
var allR = document.getElementsByTagName('input');
for (var i=0; i < allR.length; i++) {
if(allR[i].type == 'radio') {
if (!radioIsChecked(allR[i].name)) {
allChecked = false;
}
}
}
if (!allChecked) {
return confirm('One or more picks are missing for the current week. Do you wish to submit anyway?');
}
return true;
}
function radioIsChecked(elmName) {
var elements = document.getElementsByName(elmName);
for (var i = 0; i < elements.length; i++) {
if (elements[i].checked) {
return true;
}
}
return false;
}
</script>
Use a counter instead of a flag for "allChecked".
Set it to zero. If the element is checked, use allChecked++ then check to see if the value is ONE at the end.
I'm using a piece of code to check in a form if a checkbox matches the content of a given variable.
Everything works great but the thing is that I'd like to have this checkbox checked if I have a match but I don't know how to do this.
my javascript code to see if there is a match :
<script type="text/javascript">
function loopForm(form,job) {
var cbResults = 'Checkboxes: ';
var radioResults = 'Radio buttons: ';
for (var i = 0; i < form.elements.length; i++ ) {
if (form.elements[i].type == 'checkbox') {
if (form.elements[i].id == job) {
// This works great but I'd like instead to have the element checked
alert(job);
}
}
}
}
var url = window.location.pathname;
var filename = url.substring(url.lastIndexOf('/')+1);
var job = filename.split("-");
var metier = job[0];
loopForm(document.formulaire,metier);
</script>
if (form.elements[i].id == job) {
form.elements[i].checked = true;
}
just
form.elements[i].checked = true;