We Keep Coding

Prefill checkbox via link and preserve form function

I currently have a form i built that is 3 large check boxes, when selected they toggle the continue button below them, https://staging-homecarepulse.kinsta.cloud/demo-select/ this is the link so you can check it out.
Currently im trying to add functionality to the form that when you click a link from another page, it preselects the checkbox depending on the link selected.
I was able to find a script that allows me to setup a link with a hash ( https://staging-homecarepulse.kinsta.cloud/demo-select/#checkbox1 ) but my issue is that I cannot get the continue button to trigger when the form is accessed this way.
here is my code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var hash = location.hash;
if(hash=="#checkbox1"){
$("#checkbox1").prop("checked", !$("#checkbox1").prop("checked") ); // that toggles the checked state
}
});
</script>
<script>
$(document).on("change", ".mod-link", function() {
var arr = []
$(".mod-link:checked").each(function() {
arr.push($(this).val());
})
if (arr.length > 0) {
$('#picture').attr('src', '');
} else {
$('#picture').attr('src', 'https://staging-homecarepulse.kinsta.cloud/wp-content/uploads/2021/06/greyBTN.jpg');
}
var vals = arr.join(",")
var str = "/demo/?demo_request_type=" + vals;
var link = arr.length > 0 ? '<a class="dynabtn" href="'+str+'">Continue</a>': '' ;
$('.link-container').html(link);
});
</script>
anyone have any idea how i can use links like https://staging-homecarepulse.kinsta.cloud/demo-select/#checkbox1 to trigger that checkbox and still have the continue button toggle on?

Instead of trying to toggle the checked property, fire a click event on your checkbox.
$(document).ready(function() {
if (location.hash) {
let $checkbox = $(location.hash);
if ($checkbox.length) $checkbox.click();
}
});
Your Continue button will toggle as well.

IE click event span not triggered

I'm having this webpage
http://pocolocoadventures.be/reizen/
And it should filter (with isotope.js) the travelboxes on the page.It does in safari, chrome, firefox, opera, .. but in IE, the filter doesn't work. Even worse, JS doesn't react at all at a click event on te span.
This is the piece of js
// Travel Isotope
var container = $('#travel-wrap');
container.isotope({
animationEngine : 'best-available',
itemSelector: '.travel-box ',
animationOptions : {
duration : 200,
queue : false
},
});
$(".filters span").click(function(){
var elfilters = $(this).parents().eq(1);
if( (elfilters.attr("id") == "alleReizen") && elfilters.hasClass("non-active") )
{
$(".label").each(function(){
inActive( $(this) );
});
setActive(elfilters);
}
else{
//set label alleReizen inactive
inActive( $("#alleReizen") );
if( elfilters.hasClass("non-active") ){
setActive(elfilters);
}
else{
inActive(elfilters);
}
}
checkFilter();
var filters=[];
$(".search.filters").children().each(function(){
var filter = $(this).children().children().attr("data-filter");
if( $(this).hasClass("non-active") ){
filters = jQuery.grep(filters, function(value){
return value != filter;
});
}
else{
if(jQuery.inArray(filter,filters) == -1){
filters.push(filter);
}
}
});
filters = filters.join("");
filterItems(filters);
});
function filterItems(filters){
console.log("filter items with filters:" + filters);
container.isotope({
filter : filters,
}, function noResultsCheck(){
var numItems = $('.travel-box:not(.isotope-hidden)').length;
if (numItems == 0) {
$("#no-results").fadeIn();
$("#no-results").css("display", "block");
}
else{
$("#no-results").fadeOut();
$("#no-results").css("display", "none");
}
});
}
function setActive(el){
el.removeClass("non-active");
var span = el.find('i');
span.removeClass("fa-check-circle-o").addClass("fa-ban");
}
function inActive(el){
el.addClass("non-active");
var span = el.find('i');
span.removeClass("fa-ban").addClass("fa-check-circle-o")
}
function checkFilter(){
var filterdivs = $('.filters span').parent().parent();
if( filterdivs.not('.non-active').length == 0 ){
setActive( $("#alleReizen") );
}
var filterLabels = $(".filters .label");
if( filterLabels.not('.non-active').length == 0){
setActive( $("#alleReizen") );
}
}
function noResultsCheck() {
var numItems = $('.item:not(.isotope-hidden)').length;
if (numItems == 0) {
//do something here, like turn on a div, or insert a msg with jQuery's .html() function
alert("There are no results");
}
}
Probably something small and stupid; but I can't find it..
Thanks in advance!

On your website you've build the buttons like this:
<button>
<span>
</span>
</button>
Now the button element is designed to be a button. It differs from the input button. In the latter you'd set the caption using value. In the button element you set it as a text node. The button element can contain elements like a span. The spec isn't very clear about whether or not you should have event handlers on the children of the button element. It's a browser developers interpretation of allowing it or not.
This problem has been posted here before (a few times)
span inside button, is not clickable in ff
Missing click event for <span> inside <button> element on firefox
It seems that Firefox is allowing it, based upon your findings. IE isn't. So to be on the safe side: use the button the way it was intended.
Wrap the button inside a span (not really logical)
Put the click handler on the button.
$(".filters button").click(...);

played around in the console a bit, and this seemed to work well.
$(".filters").on('click', 'span', function(){
// foo here
console.log('foo');
});
Maybe the filters are manipulated by one of your js files after page load?
.on will allow you to select a container which listens on changes that happen inside it, passing the element you want the actual action to work on.
If it's ok for you, I'd suggest to use the <button> element, instead of the <span>.
Let me know if that works for you.

html5 details tag open one by one javascript function working strange

I'm using the HTML5 tag details for a FAQ section of a company. An issue was that if the user opened another question the other question would not close automatically. Therefore I searched on the web and found the following solution:
function thisindex(elm){
var nodes = elm.parentNode.childNodes, node;
var i = 0, count = i;
while( (node=nodes.item(i++)) && node!=elm )
if( node.nodeType==1 ) count++;
return count;
}
function closeAll(index){
var len = document.getElementsByTagName("details").length;
for(var i=0; i<len; i++){
if(i != index){
document.getElementsByTagName("details")[i].removeAttribute("open");
}
}
}
This code does work properly in some sense but it has some small issues. Sometimes it opens two questions at the same time and works funny. Is there a method so this can work properly? This should work on desktop, tablet and mobile.
NOT DESIRED EFFECT:
I created a fiddle http://jsfiddle.net/877tm/ with all the code. The javascript is doing it's work there, ig you want to see it live click here.

Since you tagged jQuery, you can just do this:
$('.info').on('click', 'details', function () {
$('details').removeAttr('open');
$(this).attr('open', '');
});
All this does is remove the open attribute of all detail tags when you click on any detail, and then reopen the one you just clicked on.
http://jsfiddle.net/877tm/3/

the hole thisindex function is stupid and can be removed. You can simply pass the details element to closeAll.
The closeAll is quite stupid, too it searches for details in the for loop, wow.
// closeAll
function closeAll (openDetails){
var details = document.getElementsByTagName("details");
var len = details.length;
for(var i=0; i<len; i++){
if(details[i] != openDetails){
details[i].removeAttribute("open");
}
}
}
In case you want write clean code.
You should use $.on or addEventlistener.
Try to be in a specific context and only manipulate details in this context. (What happens, if you want to have two accordion areas. Or some normal details on the same site, but not inside of the group.)
Only search for details in the group, if details was opened not closed.
Give the boolen open property some love, instead of using the content attribute
I made small fiddle, which trys to do this.

To make details as accordion tag you can use below jquery.
$("#edit-container details summary").click(function(e) {
var clicked = $(this).attr('aria-controls');
closeAll(clicked);
});
function closeAll (openDetailid){
$("#edit-container details" ).each(function( index ) {
var detailid = $(this).attr('id');
var detailobj = document.getElementById(detailid);
if (openDetailid != detailid ) {
detailobj.open = false;
}
});
$('html, body').stop().animate({ scrollTop: $('#'+openDetailid).offset().top -100 }, 1000);
}

I have a solution with jQuery
$('details').on('click', function(ev){ //on a '<details>' block click
ev.preventDefault(); //prevent the default behavior
var attr = $(this).attr('open');
if (typeof attr !== typeof undefined && attr !== false){ //if '<details>' block is open then close it
$(this).removeAttr('open');
}else{ // if '<details>' block is closed then open the one that you clicked and close all others
var $that = $(this); //save the clicked '<details>' block
$(this).attr('open','open'); //open the '<details>' block
$('details').each(function(){ //loop through all '<details>' blocks
if ($that.is($(this))){ //check if this is the one that you clicked on, if it is than open it or else close it
$(this).attr('open','open');
}else{
$(this).removeAttr("open");
}
});
}
});

Is there an easy way to remove items from a page depending on what I write in a textbox (similar to autocomplete)?

I am trying to implement a feature where if there are 50 links on a page for example, you start typing in a box and the items start to disappear depending on what you type. It is the same idea of autocomplete but instead of creating a list of possible links, you remove the irrelevant ones from the page.
I am sorry if my explanation is not clear enough, if you need more details please ask me and I will answer in the comments.
Thank you in advance.

var anchors = $('a');
$('#filter').bind('keyup', function () {
var filterValue = $.trim(this.value);
anchors.hide().filter(function () {
return $(this).text().indexOf(filterValue) !== -1;
}).show();
});
Example

$(".selector-for input").keyup(function(){
var text = this.value;
$(".selector-for a").each(function() {
var it = $(this);
it.text().indexOf(text) < 0 ? it.hide() : it.show()
});
});

Try using this.Call this function in your 'onKeyUp' event of the textbox
function hideFiltered(){
var text=$("#textbox").val();
var links=$('a[name="linksToHide"]');
for(var i=0;i<links.length;i++){
link=links[i];
if(link.html().indexof(text)>0){
link.hide();
}else{
link.show();
}
}
}
}

JQuery. Simple drop down selection menu behavior question

I have a simple html option/select (dropdown) menu. I want to use JQuery to redirect links when an option is selected. I have a "go" button in noscript tags in case javascript is disabled, but in the case that the user has javascript..I would like the redirection to happen automatically on-click. Could somebody please guide me on how to accomplish this using jquery (I have this done using simple javascript 'onclick' events but I'd like to move all of my code to jquery)?
Right now my code looks like this (the function gets call from the 'onclick' event):
function option(dropdown) {
var myindex = dropdown.selectedIndex
var SelValue = dropdown.options[myindex].value
var baseURL;
if(SelValue=="1")
baseURL="something1";
else if(SelValue=="2")
baseURL="something2";
else if(SelValue=="3")
baseURL="something3";
top.location.href = baseURL;
return true;
}

To bind the click element in jQuery you can do
$('#elementId').click(function(){
//do redirection
});
But for you case I think you need to bind the change event
$('#elementId').change(function(){
var optionSelectedValue = $('#elementId option:selected').val();
if(optionSelectValue == value1) {
newUrl = url1;
}
else if(optionSelectValue == value2) {
newUrl = url2;
}
top.location.href = newUrl;
});