Develop Reference

How to hide and unhide form fields based on a radio button?

I'm trying to implement a radio button, which if clicked should get more options for the user to fill in.
Here's what I've tried.
<script>
function addmentor() {
if ( document.getElementById("type_Computer").checked ) {
document.getElementById('nextSetOfComputerOptions').style.display = "";
} else {
document.getElementById('nextSetOfComputerOptions').style.display = "none";
}
}
</script>
<input type="radio" name="type" id="type_computer" value="Computer" onClick="addmentor()">Add Mentor</button>
<div id="nextSetOfComputerOptions" style="display:none;">
.
.
</div>
The above code doesn't work. When I am clicking the radio button, nothing happens, the part of the form is always hidden.

EDIT: I originally misunderstood the question and have now adjusted my answer.
Additionally, I have also included a function that will hide your input if another radio button is clicked.
See the snippet below:
//your checkbox
var checkbox = document.getElementById("type_computer");
//your div
var inputDiv = document.getElementById("nextSetOfComputerOptions");
//function that will show hidden inputs when clicked
function addmentor() {
if (checkbox.checked = true) {
inputDiv.style.display = "block";
}
}
//function that will hide the inputs when another checkbox is clicked
function hideInputDiv() {
inputDiv.style.display = "none";
}
<input type="radio" name="type" id="type_computer" value="Computer" onChange="addmentor();" ">Add Mentor</input>
<input type="radio" name="type" onClick="hideInputDiv();">Other radio input</input>
<div id="nextSetOfComputerOptions" style="display: none;">
<input placeholder="PC"></input>
<input placeholder="Mac"></input>
</div>

Iterate through inputs in ASP.Net table

I have a table I create programmatically through ASP.Net code which, in each row, has a checkbox and a textfield.
What I can't seem to achieve (via jQuery at least) is to iterate all the rows to check if all rows which checkbox has been checked have text in the textfield. Confusing? Let me simplify...
I have a table. That table has 3 rows. Each row has a checkbox, some plain text and a textfield. I need to check, in jQuery, if all rows whose checkboxes have been checked by the user also have text in the respective textfields.
I tried to create a simple example based off some answers in here but this doesn't seem to be working; it displays the modal regardless of whether there is text on the input or not.
$('#myButton').on('click', function() {
checkInputs();
});
function checkInputs() {
var hasEmpty = 0;
$('#myTable tr').each(function(i, row) {
var row = $(row);
var checkbox = row.find('input[type*="checkbox"]');
var textbox = row.find('input[type*="text"]');
if (checkbox.is(':checked')) {
if (textbox.val() == "") {
hasEmpty = 1;
};
}
});
if (hasEmpty = 1) {
$(function() {
$("#dialog").dialog();
});
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" />
<table id="myTable">
<tr>
<td>
<input type="checkbox" />
</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>
<input type="text" />
</td>
</tr>
</table>
<button id="myButton">Button</button>
<div id="dialog" title="Basic dialog" style="display:none;">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
The "dialog" part is a jQueryUI modal which I want to display when there's checkboxes that have been checked but the respective inputs don't have a value. I copy-pasted the jQueryUI example code here for the sake of simplification.
Reminder that the actual table is an ASP.Net table which is created programmatically.

Your main issue is that you're using = in the if statement, which sets a value, instead of == or === to compare values. You also don't need the additional document.ready handler around the dialog call.
With that said you can improve the logic slightly by ending the loop as soon as an invalid row is found, like this:
$('#myButton').on('click', function() {
if (!validateInputs())
$("#dialog").dialog();
});
function validateInputs() {
var valid = true;
$('#myTable tr').each(function() {
var $row = $(this);
var $checkbox = $row.find(':checkbox');
var $textbox = $row.find(':text');
if ($checkbox.is(':checked') && $textbox.val().trim() === "") {
valid = false;
return false; // break loop
}
});
return valid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" />
<table id="myTable">
<tr>
<td>
<input type="checkbox" />
</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>
<input type="text" />
</td>
</tr>
</table>
<button id="myButton">Button</button>
<div id="dialog" title="Invalid" style="display: none;">
<p>Not all checked boxes had text entries</p>
</div>

Your if (hasEmpty = 1) has single =. Update it as below.
if (hasEmpty == 1)
Complete code is as below.
$('#myButton').on('click', function() {
checkInputs();
});
function checkInputs() {
var hasEmpty = 0;
$('#myTable tr').each(function(i, row) {
var row = $(row);
var checkbox = row.find('input[type*="checkbox"]');
var textbox = row.find('input[type*="text"]');
if (checkbox.is(':checked')) {
if (textbox.val() == "") {
hasEmpty = 1;
};
}
});
if (hasEmpty == 1) {
$(function() {
$("#dialog").dialog();
});
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" />
<table id="myTable">
<tr>
<td>
<input type="checkbox" />
</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>
<input type="text" />
</td>
</tr>
</table>
<button id="myButton">Button</button>
<div id="dialog" title="Basic dialog" style="display:none;">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

Dynamically enabling a check list based on radio button (yes/no) response in a form

I am attempting to make a list of check boxes disabled unless the user explicitly states that the said list applies to the situation. I have a form with nested tables, menus, data entry, and problems found list. Essentially, for better or worse, multiple tables on one form. This is beginning to cause me grief as the functions of this form are growing exponentially. For simplicity's sake, I am focusing on the "repairs to be made" table.
I have a checklist of various things to be repaired that is proceeded by a Yes or No question for the user. Instead of running JavaScript validation on each possible repair option, I want to disable the entire list if no repairs are necessary, (i.e. "does it need any repairs?", "No", checklist disabled). I am not using CSS as I have little to no experience in web form programming and have based my code on pre-existing code that did not include CSS.
My example will use generic names and variables, and is intended to illustrate that these forms are passed through several stages before they are considered completed, thus the PHP echo variables.
<?php
$previous_response_yes=='';
$previous_response_no=='';
if ($row_GetData[Question] == "1")
{
$previous_response_yes="checked";
}
else
{
$previous_response_no="checked";
}
?>
<table>
<tr>
<td colspan="2" align="center">
Are there any damaged components?
</td>
</tr>
<tr>
<!-- this variable is used in java script verification elsewhere -->
<td>
Yes: <input type="radio" name="question" value="1" id="yes" <?php echo $previous_response_yes; ?> />
</td>
<td>
No: <input type="radio" name="question" value="0" id="no" <?php echo $previous_response_no; ?> />
</td>
</tr>
<!-- various checklist items, example as follows... -->
<tr>
<td>
<input type="hidden" name="damaged_part" value="0" />
<input type="checkbox" name="damaged_part" value="1" id="damaged_part" <?php echo $damaged_part1 <!-- code for determining if = "checked" or not omitted --> ; ?> />
</td>
<td>
Damaged Part
</td>
</tr>
<!-- lists continues on for some time -->
</table>
Now I assume that I need an "onclick" or "oncheck" qualifier in either the Yes radio button, No radio button, or both to toggle back and forth between disabling and enabling the checklist that follows. I have found very similar ideas, but none have worked in my recreation of them. Essentially, what I want is something to the extent of
while <input type="radio" name="question" value="0" id="no" <?php echo $previous_response_no; ?> /> is checked
following checklist disabled="disabled"

As you probably know, using tables for layout is not the most optimal method. And, the effect that you are seeking can be fully implemented using CSS. Here's a fiddle: http://jsfiddle.net/X93Vj/.
HTML:
<form>
<label>Damaged components?</label> <input type = "checkbox" id = "damaged" />
<div class = "componentsList">
<label><input type = "checkbox" id = "electric">Electric</label>
<label><input type = "checkbox" id = "mechanical">Mechanical</label>
</div>
<p>Sample paragraph</p>
</form>
CSS:
form > label,
form > input[type = "checkbox"] {
vertical-align: bottom;
}
form > .componentsList {
margin: 5px 0 0 20px;
}
form > .componentsList > label {
float: left;
clear: left;
}
form > input[type = "checkbox"]:not(:checked) + .componentsList {
display: none;
}
form > input[type = "checkbox"]:checked + .componentsList {
display: table;
}

To fixes. Both disable and uncheck boxes if No is chosen and check for No being checked on load.
Here's a fix that will do things using plain JavaScript (jsfiddle - http://jsfiddle.net/k34zR/9/ -- this doesn't seem to work in jsfiddle, but works in an html document) :
document.addEventListener('DOMContentLoaded', function () {
var yesBox = document.getElementById('yes'),
noBox = document.getElementById('no'),
checkboxes = document.querySelectorAll('input[type=checkbox]');
if (noBox.checked) {
for (var i in checkboxes) {
if (checkboxes.hasOwnProperty(i)) {
checkboxes[i].disabled = true;
}
};
}
yesBox.addEventListener('click', function () {
for (var i in checkboxes) {
if (checkboxes.hasOwnProperty(i)) {
checkboxes[i].disabled = false;
}
};
});
noBox.addEventListener('click', function () {
for (var i in checkboxes) {
if (checkboxes.hasOwnProperty(i)) {
checkboxes[i].disabled = true;
checkboxes[i].checked = false;
}
};
});
});
Or if you're using jQuery (jsfiddle - http://jsfiddle.net/k34zR/10/):
$(document).ready(function () {
var $radios = $('input[type=radio]'),
$boxes = $('input[type=checkbox]');
if ($('#no').is('checked')) {
$boxes.attr('disabled', 'disabled');
}
$radios.on('click', function () {
var $this = $(this);
if ($this.attr('id') == "no") {
$boxes.attr('disabled', 'disabled');
$boxes.attr('checked', false);
} else {
$boxes.removeAttr('disabled');
}
});
});

Javascript display same content on each checkbox clicks?

I have multiple check boxes and i want them to display the same content when each of them is clicked. Now when I click on one check box, the content appears, but until I unclick it the next checkbox won't display any content. I want the all the contents to be displayed as long as check boxes are clicked. any tip with this.
I tried this:
function showTime(days){
var showTime = document.getElementById("time_schedules");
var days = document.getElementById("schedule");
if (days.checked) {
showTime.style.display = "Block";
}
else{
showTime.style.display = "none";
}
}

Insert some class attribute to all your checkboxes so you can select them, then capture the click event, iterate over all checkboxes and perform whatever you need to do (setting label etc).
I recommend using some javascript library such as jquery, for example:
<input type="checkbox" name="cb1" class="cb" />
<label for="cb1" class="cblabel">label1</label>
<input type="checkbox" name="cb2" class="cb" />
<label for="cb2" class="cblabel">label2</label>
$('.cb').bind('click', function() {
$('.cblabel').each(function(i,v) { v.innerHTML = 'hello'; });
});
http://jsfiddle.net/3EMyY/

Radio buttons and display none

I'm creating an order form that when a button is clicked it displays an image in a separate div. The code works successfully for check boxes but with radio buttons doesn't hide the previously clicked image.
function displayImage(id) {
var el = document.getElementById(id);
if (el.style.display == "inline") {
el.style.display = "none";
} else {
el.style.display = "inline";
}
}
<tr>
<td>
<input type="radio" name="cheese" id="chkcheese" value="Yellow American" onclick="displayImage('imgamerican');" />
<label for="chkcheese">Yellow American</label>
</td>
<td>
<input type="radio" name="cheese" value="Pepper Jack" id="pepperjack" onclick="displayImage('imgjack');" />
<label for="chkjack">Pepper Jack</label>
</td>
<td>
<input type="radio" name="cheese" value="Mozzarella" id="chkmozz" onclick="displayImage('imgmozz');"/>
<label for="chkmozz">Mozzarella</label>
</td>
</tr>
<div class="cheese">
<img id="imgamerican" src="images/american-cheese-slice.png" style="display:none"/>
<img id="imgcheddar" src="images/agedcheddar.png" style="display:none"/>
<img id="imgjack" src="images/pepperJack.png" style="display:none" />
<img id="imgswiss" src="images/swisscheese.png" style="display:none" />

The click event only happens on the radio that was clicked.
You'll need to iterate the radio buttons and make sure that the deselected ones have their corresponding image hidden, or just iterate the images and hide them before showing the one that had its radio clicked.
function displayImage(id) {
var imgs = document.querySelectorAll(".cheese > img");
for (var i = 0; i < imgs.length; i++) {
imgs[i].style.display = "none";
}
document.getElementById(id).style.display = "inline";
}

It looks like your problem is that you're expecting the click event to fire when a radio button becomes unchecked. But it doesn't. You'll need to specifically change the display of the last-shown cheese, but only when it's a radio button that was clicked.
This solution is kind of a hack, but it should work in this situation:
JavaScript:
var lastUnique;
function displayImage(id, unique) {
var el = document.getElementById(id);
if (unique) {
if (lastUnique) {
lastUnique.style.display = 'none';
}
lastUnique = el;
}
el.style.display = 'block';
}
Radio buttons (note the added true):
<tr>
<td><input type="radio" name="cheese" id="chkcheese" value="Yellow American" onclick="displayImage('imgamerican', true);" />
<label for="chkcheese">Yellow American</label></td>
<td><input type="radio" name="cheese" value="Pepper Jack" id="pepperjack" onclick="displayImage('imgjack', true);" />
<label for="chkjack">Pepper Jack</label></td>
<td><input type="radio" name="cheese" value="Mozzarella" id="chkmozz" onclick="displayImage('imgmozz', true);" />
<label for="chkmozz">Mozzarella</label></td>
</tr>
So, the JavaScript keeps track of the last element shown with the unique argument being truthy, and hides it when another call with unique == true happens.
Aside:
You might look into how event handling is done in the modern world. This is the old way of doing it, and it's not exactly manageable.
Also, consider looking into modularization and encapsulation techniques.