Develop Reference

tetxtbox enable/disable on checkbox select/unselect using Javascript

I have a table with three columns and multiple rows. 2nd and third column consist of a textbox(first child of a container) and a checkbox respectively.
Textbox
<td class="SBS1 c4">
<input class="Medium InputText" type="text" name="QR~QID33#1~1~1~TEXT" id="QR~QID33#1~1~1~TEXT" value="" disabled="">
<label class="offScreen" for="QR~QID33#1~1~1~TEXT">&nbsp; - &nbsp; - hh</label>
</td>
Checkbox
<td class="SBS2 c7">
<input type="checkbox" id="QR~QID33#2~1~1" name="QR~QID33#2~1~1" value="Selected">
<label class="q-checkbox q-checked" for="QR~QID33#2~1~1"></label>
<label class="offScreen" for="QR~QID33#2~1~1">&nbsp; - 󠆺random text</label>
</td>
I have to disable and enable the textboxes in each row on checkbox check and uncheck respectively using javascript. but there seem to be some pagelifecycle issues with the script I am using. Here is the Javascript that I am using in my Qualtrics survey JS interface,
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place Your JavaScript Here*/
var count=document.getElementsByClassName("q-checkbox").length;
for(var i=0;i<count;i++)
{
document.getElementsByClassName("q-checkbox")[i].parentNode.addEventListener("click",hideFunc);
}
function hideFunc()
{
console.log(this.className);
if(this.classList.contains("checkers"))
{
//this.classList.toggle("checkers");
this.previousSibling.previousSibling.previousSibling.firstChild.disabled="false";
this.classList.add("checkers");
return;
}
else
if(!(this.classList.contains("checkers")))
{
this.previousSibling.previousSibling.previousSibling.firstChild.disabled="true";
this.classList.remove("checkers");
return;
}
}
});
I am just trying to toggle or add/remove the class "checkers"and setting "disabled" property of the texboxes accordingly. The code above in HideFunc is one of the work-around I have tried but it is not working.
Is there another way to check for checkbox change?

As the first comment hinted, a better approach is to check the status of the checkbox rather than add/remove a class. Also, making use of prototypejs makes it easier. Try this:
Qualtrics.SurveyEngine.addOnload(function() {
var qid = this.questionId;
$(qid).select('tr.Choice').each(function(choice,idx) { //loop through each row
var cbox = choice.select('td.SBS2').first().down(); //cbox enables 1st question in row
var txtEl = choice.select('td.SBS1').first().down(); //text input to be enabled/disabled
if(cbox.checked == false) { //initialize text input disabled status
txtEl.value = null; //blank text input
txtEl.disabled = true; //disable text input
}
cbox.on('click', function(event, element) { //enable/disable text input on cbox click
if(cbox.checked == false) { //unchecked
txtEl.value = null; //blank text input
txtEl.disabled = true; //disable text input
}
else { //checked
txtEl.disabled = false; //enable text input
}
}); //end on function
}); //end row loop
});

This is another solution I could come up with ,apart from the correct solution by T. Gibbons
var $j= jQuery.noConflict();
$j("td.SBS2 ").click(function(){
$j(this).closest("tr").find(".InputText").prop("disabled",$j(this).children("input")[0].checked);
$j(this).closest("tr").find(".InputText").prop("value","");
var len=document.getElementsByClassName("InputText").length;
for(var i=0;i<=len;i++)
{
document.getElementsByClassName("InputText")[i].style.width="300px";
}
});

How to set Bootstrap Make-Switch with jQuery

I am using the bootstrap switches to change a check box into a toggle box. When the page loads the switch is in the data-off position being red and text saying no.
<div class="make-switch" id="use_map_switch" data-on-label="Yes" data-off-label="No" data-on="success" data-off="danger">
<input type="checkbox" name="use_map" id="use_map" value="1" {if $form_data.use_map eq 1}checked{/if} />
</div>
I run a jQuery script once the check/switch is clicked and changed to yes/green. If the results turn back false I want to change the switch/check back to No/red.
I have tried using the line $('#use_map').prop('checked', false); but this has had no affect.
$('#use_map_switch label').click(function(){
// need to do opposite
// if its checked when clicked then switch will be going to unchecked
if($('#use_map').is(':checked')){
$('.map-area').hide();
} else {
address = getAddress();
if(address == ''){
modalTitle = 'Error';
modalText = 'Please enter an address before using the map';
$('#use_map').prop('checked', false);
show_modal(modalTitle, modalText);
} else {
$('.map-area').show();
$('.map-area').html(address);
}
}
});

How do I properly validate the form using input radios?

I have a problem with validating the form in function validate() method. This line of code:
if(radios[i].value == "yes" && radios[i].checked == true) //DEBUG INFO: skips this step to else.
is being skipped because one or both of the conditions are false, but I'm not sure which one and as well as if the condition is proper to execute. I was thinking that radios[i].value == "yes" will correspond to the value attribute of that input radio button (In other words, the correct answer regarding that question).
When the submit button is clicked, I simply want javascript to tell me whether it's correct or not and to check if the radio button is checked.
Problem: I checked in the radio button, when submit button is clicked the alert for Please make sure you answer every question pops up 3 times and after that displays that I have the correct answer.
Here's the full code:
JavaScript:
// called when "Take Quiz" button is clicked
function takeQuiz()
{
// hide the intro
document.getElementById('intro').style.display = 'none';
// display the quiz
document.getElementById('message').style.overflow = 'auto';
document.getElementById('quiz').style.visibility = 'visible';
document.getElementById('gl_banner').style.display = 'block';
document.getElementById('gl_banner').style.visibility = 'visible';
}
//document.getElementById('submit').onclick = validateQuiz; //calls the function "validateQuiz" when submit button is clicked
// check for validation in the quiz
function validateQuiz()
{
var radios; // access elements by object name (DOM)
var i; // int variable
var right; // boolean variable to determine correct answer
radios = document.getElementById('question1').getElementsByTagName('input');
/*radios = document.getElementById('question2').getElementsByTagName('input');
radios = document.getElementById('question3').getElementsByTagName('input');
radios = document.getElementById('question4').getElementsByTagName('input');
radios = document.getElementById('question5').getElementsByTagName('input');*/
right = true;
// loop to check each radio button for validation
for(i = 0; i < radios.length; i++)
{
if(radios[i].value == "yes" && radios[i].checked == true) //DEBUG INFO: skips this step to else.
{
right = true;
}
else if(radios[i].checked == false)
{
right = false;
alert("Please check to make sure you have answered every question.");
}
}
if(right)
{
alert("You have answered correctly!");
}
else
{
alert("Wrong answer");
}
}
HTML Code:
<div id="message" style="overflow:hidden;"><div id="intro">Why not go ahead and take the quiz to test your knowledge based on what you've learned in Smartphone Photography.
There are only 5 questions surrounding the content of this site.
<br/>
<button id="takeQuiz" type="button" name="name" onclick="takeQuiz()" style="cursor:pointer;">Take Quiz!</button></div>
<div id="gl_banner" style="display:none; visibility:hidden;">Good Luck! :)</div>
<form id="quiz" action="#" method="post" style="visibility:hidden;" autocomplete="off">
<!--QUIZ-->
<h3>1. How many percent of modern camera phones use CMOS?</h3>
<div id="question1">
<input type="radio" name="question-1-answers" id="question-1-answers-A" value="A" />
<label for="question-1-answers-A">A) 20%</label>
<br/>
<input type="radio" name="question-1-answers" id="question-1-answers-B" value="B" />
<label for="question-1-answers-B">B) 80%</label>
<br/>
<input type="radio" name="question-1-answers" id="question-1-answers-C" value="C" />
<label for="question-1-answers-C">C) 50%</label>
<br/>
<input type="radio" name="question-1-answers" id="question-1-answers-D" value="yes" />
<label for="question-1-answers-D">D) 90%</label>
</div>

**Edited for a pure javascript solution.
I got the function to get the select value from this post.
I don't think you need to do a loop here, as you only actually need to check one value- the value of the checked radio.
At the moment your looping through all the radios, so you'll always get three wrong answers.
**Edited again to fix some code errors. I have tested the following, it is working for me.
function getRadioValue(name) {
var group = document.getElementsByName(name);
for (var i=0;i<group.length;i++) {
if (group[i].checked) {
return group[i].value;
}
}
return '';
}
document.getElementById('submit').onclick = validateQuiz; //calls the function "validateQuiz" when submit button is clicked
// check for validation in the quiz
function validateQuiz(){
right = true;
radio = getRadioValue("question-1-answers");
if(!radio.length) {
right = false;
alert("Please check to make sure you have answered every question.");
return;
}
if(radio == 'yes')
{
alert("You have answered correctly!");
}
else {
right = false;
alert("Wrong answer");
}
}

get the dropdown particular selected value and dispaly confirm box

I have member status select box in that i have open,read,close option is there.So when i'm selecting open or read and click update button it will updateing something.and i'm selecting close it display dialog box(Are you sure want close this)if yes it goes to some page or goes to no page.(I want to dispaly confirm box only particular value(22 only).
Anybody help on this one(js or jquery).It is smarty application
Here is my code
<html>
<head>
<script type="text/javascript">
function showClose() {
var val = document.getElementById('sel_state').value;
if (val == '22') {
var state = confirm("Are you sure want to change member status??");
if (state == true) {
alert('yes');
} else {
alert('no');
}
} else {
alert('no');
}
}
</script>
</head>
<body>
<form method="post" action="/admin/member-modify-{$member->id}">
<label>Member state</label>
<select name="sel_state" class="validate" id="sel_state">
<option value=1>open</option>
<option value=2>read</option>
<option value=22>close</option>
</select>
<input name="submit" value="Validate" id="member_state_submit" type="submit" class="submit" Onclick="showClose();" />
</form>
</body>
</html>

All what you have to do is to wrap your JS code within {literal}{/literal} tags like this :
{literal}
<script type="text/javascript">
function showClose() {
var val = document.getElementById('sel_state').value;
if (val=='22') {
var state = confirm ("Are you sure want to change member status??");
if (state == true) {
alert('yes');
} else {
alert('no');
}
} else {
alert('no');
}
}
</script>
{/literal}
In Smarty, anything within {literal}{/literal} tags is not interpreted, but displayed as-is. This will avoid interfering with the template delimiter syntax. Check the documentation.

This is simple with jquery
var value = $('#selector').text()
if (value == 22){
//do something here
}

How to reset/uncheck radio button onclick event?

I have 2 radio button with 2 group.
The structure is like this
Main Radio 1
Main Radio 2
Under Main Radio 2, there's two more sub radio button.
Main Radio 1
Main Radio 2
Sub Radio 1
Sub Radio 2
What am I doing is, in default stage, it will only show Main Radio 1 and Main Radio 2 button. When choose Main Radio 2, two sub radio button of Main Radio 2 appear.
When choose back to Main Radio 1, it will hide the list of Main Radio 2.
The one that I want to achieve is,
When click Main Radio 1, the selection that I made for Sub Radio 1 or Sub Radio 2, want to be uncheck / reset too.
I tried with this javascript, but no success.
document.getElementById("subradiobuttons").reset();
Please kindly help me the solutions. Thank you.
With Regards,

I think the best approach for a simple task like this does not needs a full JavaScript library like jQuery.
document.getElementById("main2").addEventListener("click", function()
{
document.getElementById("subCheckButtons").style.opacity = 1;
}, false);
document.getElementById("main1").addEventListener("click", function()
{
document.getElementById("subCheckButtons").style.opacity = 0;
document.getElementById("sub1").checked = false;
document.getElementById("sub2").checked = false;
}, false);
<input type="radio" id="main1" name="main" />
<input type="radio" id="main2" name="main" />
<div id="subCheckButtons" style="opacity:0;">
<input type="radio" id="sub1" name="sub" class="subCheck" />
<input type="radio" id="sub2" name="sub" class="subCheck" />
</div>
Or see the fiddle.

Here is another approach that will reset all inputs to their default position if someone clicks on "Main Radio 1."
//Clear all inputs.
function clearInputs(form) {
"use strict";
//Gather all inputs within selected form.
const inputs = form.querySelectorAll("input");
//Clear the inputs.
inputs.forEach(function (input) {
if (input.hasAttribute("checked") === true) {
input.checked = true;
} else {
input.checked = false;
}
});
}
//Monitor "Main Radio 1" for clicks.
function monitorMainRadio1() {
"use strict";
const form = document.getElementById("form");
const mainRadio1 = document.getElementById("main-radio1");
mainRadio1.addEventListener("click", function () {
clearInputs(form);
});
}
//Invoke the monitorMainRadio1 function.
monitorMainRadio1();

Not tested this but...
<input type="radio" onclick="document.getElementById("subradiobuttons").Checked = false;" />
Or you could call a Javascript function to do a bit more work/logic
This page has what you need

It is much, much quicker to do this with jQuery than JavaScript. I recommend you do something like this;
Give the radio boxes something like this
<input type="radio" name="main1">
<input type="radio" name="main2">
<input type="radio" name="sub">
<input type="radio" name="sub">​
Then with jQuery you can do this
$('input[name=main1]').on('click', function() {
$('input[name=sub]').attr('checked', false);
});
I've assumed here that you've figured out a way to hide the sub radio buttons. ​
See a fiddle of this here
Also, make sure that you include jQuery at the top of the <script></script> tags containing this code.
script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"

Reset the radiobutton or RadiobuttonList in the form:
private void ResetFormControlValues(Control parent)
{
foreach (Control c in parent.Controls)
{
if (c.Controls.Count > 0)
{
ResetFormControlValues(c);
}
else
{
switch ((c.GetType().ToString()))
{
case "System.Web.UI.WebControls.TextBox":
((TextBox)c).Text = "";
break;
case "System.Web.UI.WebControls.CheckBox":
((CheckBox)c).Checked = false;
break;
case "System.Web.UI.WebControls.RadioButton":
((RadioButton)c).Checked = false;
break;
case "System.Web.UI.WebControls.DropDownList":
((DropDownList)c).SelectedIndex = 0;
break;
}
}
}
}