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.

Switchery as radio button, cannot toggle back

Now making playlist using switchery checkbox,
and already make it like a radio button,
but it cant toggle back.
How can i make Switchery back to idle state / unchecked state ??
>>> my Fiddle Demo <<<
Here is my js :
$(document).ready(function() {
//switchery
var elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch'));
elems.forEach(function(html) {
var switchery = new Switchery(html,{size: 'small',});
});
//detect change
$('input.pinmusic').on('change', function() { //detect change
// auto uncheck when selecting other checkbox
// but this is not working with switchery
$('.pinmusic').not(this).prop('checked', false);
});
});
PS : its already checked, but only switchery get stuck.
already browse some topic of switchery here but still error.

I'm late but, here's my solution:
var $switches = [];
var elems = Array.prototype.slice.call();
$.each(document.querySelectorAll('.js-switch'),function(i,html) {
$switches[html.name] = new Switchery(html,{size: 'small',});
});
$('input.js-switch').on('change', function () {
if (this.checked) {
$.each(document.querySelectorAll('input.js-switch:not([name="' + this.name + '"])'),
function (i, e) {
switcherySetChecked($switchers[e.name], false)
});
}
});
function switcherySetChecked(switcher, check) {
var curr = $(switcher.element).prop('checked');
var disabled = $(switcher.element).prop('disabled');
if (disabled) {
switcher.enable();
}
if (check) {
if (curr) {
$(switcher.element).prop('checked',false);
}
$(switcher.element).trigger('click');
} else {
if (!curr) {
$(switcher.element).prop('checked', true);
}
$(switcher.element).trigger('click');
}
if (disabled) {
switcher.disable();
}
}

It's pretty difficult to be sure of your problem, but if I understand well, you want to uncheck a radio button.
Well, you can't. A radio button is not made to be unchecked. The meaning of a pool of radio buttons is "choose exactly one of the following options". Unchecking a radio button would mean that the user chooses zero option, which is not allowed.
From Wikipedia's Radio button:
A radio button or option button is a graphical control element that allows the user to choose only one of a predefined set of options.
It is possible that initially none of the radio buttons in a group are selected. This unselected state cannot be restored by interacting with the radio button widget, though it may be possible through other user interface elements.
What you need to use if you want to be able to choose zero option, is a Checkbox.

How to hide the next button on qualtrics until a text field is filled in with text?

I have a survey with two questions on the page (one that is multiple choice) and one that is a text entry question.
I want to hide the next button until the text entry question has been filled out but I've only been able to hide the next button indefinitely and it seems to not reappear after the text field has been filled in.
Qualtrics.SurveyEngine.addOnload(function()
{
this.hideNextButton();
(function() {
$('form > input').keyup(function() {
var empty = false;
$('form > input').each(function() {
if ($(this).val() == '') {
empty = true;
}
});
if (empty) {hideNextButton ()} else {showNextButton ()}
});
});
});

You have some syntax errors. It looks like you are trying to use jQuery instead of Prototypejs. Besides that, you need to restrict your input element search to the question and there is only one input field so you only need one function. Try this (edited to defer initial next button hide):
Qualtrics.SurveyEngine.addOnload(function() {
function hideEl(element) {
element.hide();
}
var nb = $('NextButton');
hideEl.defer(nb);
$(this.questionId).down('.InputText').on('keyup', function(event) {
if(this.value.length == 0) nb.hide();
else nb.show();
});
});

in my form I checked input radio and image changes, but I fill input text and the image changes back

Okey, here goes my big problem:
I have this form, which has a submit button that only enables when you have checked and filled both inputs (there is no problem with that). If you follow these steps, you will realize where my problem is:
Load this jsfiddle https://jsfiddle.net/ozLmdx4o/ don't pay to much attention to the code now, just look at the form: there is a default profile image, an empty input text, an unchecked input radio, and a disabled submit button.
Test the form: fill the input text and check the input radio and observe how the default profile image changes to another image. Check and uncheck the input radio to observe how the image is linked to this input. This is the key of all this.
But, what if your input text was filled wrong? so delete whatever you entered in the input text and start over again... but...what? The image has returned to the default profile image! even if it was linked to the input radio! why???
Why this happens?
Now you can check the code, because there must be somewhere something I have missed. Can anybody help me to keep the image linked to the input radio button?
input radio button unchecked = default profile image.
input radio button checked = special image.
//INPUT RADIO ON & OFF CODE
var prv1;
var markIt1 = function(e) {
if (prv1 === this && this.checked) {
this.checked = false;
prv1 = null;
} else {
prv1 = this;
}
checkIfValid();
if (!e.target.checked) {
var img = document.getElementById('theimage');
img.src = 'https://s17.postimg.org/7gc66bzu7/user.jpg';
}
};
//TURN ON AND OFF FUNCTIONS
$(function() {
$('input.whatever_class').on('click', markIt1);
$('input[type=text]').on('keyup', markIt1);
});
var sbmtBtn = document.getElementById('SubmitButton');
sbmtBtn.disabled = true;
//CHANGE IMAGES
function changeImage(imgName) {
image = document.getElementById('theimage');
image.src = imgName;
}
function checkIfValid() {
var current = $('input[type=radio]:checked');
if ((current.length >= 1) && ($('input[type=text]').val() != "")) {
sbmtBtn.disabled = false;
} else {
sbmtBtn.disabled = true;
}
};
I would like the image to not change anytime I modify the input text.
Can anyone fix my code just the necessary to solve that problem?
Thanks!

Add this check:
if (!e.target.checked && !document.getElementById('whatever_id').checked) {
var img = document.getElementById('theimage');
img.src = 'https://s17.postimg.org/7gc66bzu7/user.jpg';
}
It is running the check function on input text and not getting checked and hence the problem. Hope it helps.
PS: I have kept e.target.checked but if not required then you can remove it.

You're using markIt1() as an event handler for both the textbox and the radio button. The value of e.target.checked is misleading because e.target could be the textbox or the radio button. e.target.checked always returns false for the textbox. I would use a separate event handler for each.

How do I disable input field when certain select list value is picked

How do I disable and make the input field text to hidden when certain value is selected from select list? In my code, I need to disable and make the input text to hidden when "United States" is selected from my drop down.
My HTML:
JSFiddle Link
My Javascript:
document.getElementById('BillingCountryCode').onchange = function () {
if(this.value != '840') {
document.getElementById("BillingStateProvince").disabled = true;
document.getElementById("BillingStateProvince").style.display="none"
} else {
document.getElementById("BillingStateProvince").disabled = false;
document.getElementById("BillingStateProvince").style.display="block"
}
}

The problem with your fiddle is you have two elements with the same ID. You can do exactly what is already there, just change the ID on either the state dropdown or the text input. Updated code might look like this, if you simply name the text input the same with a 2:
document.getElementById('BillingCountryCode').onchange = function () {
if(this.value != '840') {
document.getElementById("BillingStateProvince").disabled = true;
document.getElementById("BillingStateProvince").style.display="none";
document.getElementById("BillingStateProvince2").disabled = false;
document.getElementById("BillingStateProvince2").style.display="block";
}
else {
document.getElementById("BillingStateProvince").disabled = false;
document.getElementById("BillingStateProvince").style.display="block";
document.getElementById("BillingStateProvince2").disabled = true;
document.getElementById("BillingStateProvince2").style.display="none";
}
}

If i got the question , simply invert the if condition like this :
if(this.value === "840") { ... }
here is the working fiddle : http://jsfiddle.net/antwonlee/cf4Sz/7/