I am building a personality assessment page. However, I am seriously stuck and at this point, I cannot even understand where I went wrong. (Psychology student here, so this world is new to me.)
<form action="answer.html" method="get" class="personality_form" id="personality_form" onsubmit="return validateForm()">
<tr>
<td>Statement1</td>
<td><input type="radio" name="st1" class="dis" value="-1"></td>
<td><input type="radio" name="st1" class="na" value="0"></td>
<td><input type="radio" name="st1" class="agg" value="1"></td>
</tr>
<tr>
<td>Statement2</td>
<td><input type="radio" name="st2" class="dis" value="-1"></td>
<td><input type="radio" name="st2" class="na" value="0"></td>
<td><input type="radio" name="st2" class="agg" value="1"></td>
</tr>
<tr>
<td>Statement3</td>
<td><input type="radio" name="st3" class="dis" value="-1"></td>
<td><input type="radio" name="st3" class="na" value="0"></td>
<td><input type="radio" name="st3" class="agg" value="1"></td>
</tr>
<tr>
<td>Statement4</td>
<td><input type="radio" name="st4" class="dis" value="-1"></td>
<td><input type="radio" name="st4" class="na" value="0"></td>
<td><input type="radio" name="st4" class="agg" value="1"></td>
</tr>
<tr>
<td>Statement5</td>
<td><input type="radio" name="st5" class="dis" value="-1"></td>
<td><input type="radio" name="st5" class="na" value="0"></td>
<td><input type="radio" name="st5" class="agg" value="1"></td>
</tr>
<tr>
<th colspan="4"><button type="submit" onclick="get();">Get Results</button></th>
</tr>
</form>
Now I am adding here following script:
function get() {
var res1 = document.getElementsByName("st1").value;
var res2 = document.getElementsByName("st2").value;
var x = res1 + res2;
if (x < 0) {
document.getElementById('result').innerHTML = x;
}
}
And answer.html consists of
<div id="result"></div>
I cannot seem to get the value no matter how hard I try. I've tried doing id="st1_1" and getElementById, but it still won't do it.
Any suggestions or ideas what am I doing wrong?
Thank you
document.getElementsByName returns a NodeList, so there are multiple elements. As a result, it doesn't have a value property so res1 and res2 are undefined.
Try changing document.getElementsByName("st1").value to document.querySelector("[name=\"st1\"]:checked").value. If you get an error message like "TypeError: Cannot read property 'value' of null" then it means that none of the inputs with the name "st1" is checked.
Adding to James Long's answer,
Open the console on the webpage and type
document.getElementsByName("st1");
You will get
[<input type="radio" name="st1" class="dis" value="-1">, <input type="radio" name="st1" class="na" value="0">, <input type="radio" name="st1" class="agg" value="1">]
This indicates that you the above code returns an array. Now to select either of the <input> tags, you can use document.getElementsByName("st1")[0] which will select the first <input>.
To find out which input/s have been selected, iterate over the inputs and find the total sum. If you changed your values to
<input type="radio" name="st#" class="dis" value="1">
<input type="radio" name="st#" class="na" value="2">
<input type="radio" name="st#" class="agg" value="4">
Then if the sum is 1, then first one is selected, if it is 2, then second is selected, if 3 then first two were selected, if 4 then third is selected, if 5 then first and third, 6 then second and third, 7 then all three.
function get() {
var res1 = document.querySelector('input[name="st1"]:checked').value;
var res2 = document.querySelector('input[name="st2"]:checked').value;
console.log("res1="+res1);
console.log("res2="+res2);
var x = parseInt(res1) + parseInt(res2);
// if (x < 0) {
document.getElementById('result').innerHTML = x;
// }
}
<form method="get" class="personality_form" id="personality_form">
<table>
<tr>
<td>Statement1</td>
<td><input type="radio" name="st1" class="dis" value="-1"></td>
<td><input type="radio" name="st1" class="na" value="0"></td>
<td><input type="radio" name="st1" class="agg" value="1"></td>
</tr>
<tr>
<td>Statement2</td>
<td><input type="radio" name="st2" class="dis" value="-1"></td>
<td><input type="radio" name="st2" class="na" value="0"></td>
<td><input type="radio" name="st2" class="agg" value="1"></td>
</tr>
<tr>
<td>Statement3</td>
<td><input type="radio" name="st3" class="dis" value="-1"></td>
<td><input type="radio" name="st3" class="na" value="0"></td>
<td><input type="radio" name="st3" class="agg" value="1"></td>
</tr>
<tr>
<td>Statement4</td>
<td><input type="radio" name="st4" class="dis" value="-1"></td>
<td><input type="radio" name="st4" class="na" value="0"></td>
<td><input type="radio" name="st4" class="agg" value="1"></td>
</tr>
<tr>
<td>Statement5</td>
<td><input type="radio" name="st5" class="dis" value="-1"></td>
<td><input type="radio" name="st5" class="na" value="0"></td>
<td><input type="radio" name="st5" class="agg" value="1"></td>
</tr>
<tr>
<th colspan="4"><button type="button" onclick="get();">Get Results</button></th>
</tr>
</table>
</form>
<div id="result"></div>
Please review working code this may help to resolve an issue. You should not use both "onClick() on submit button" and "OnSubmit on form post" at a time.
click()
This method is a shortcut for in the first two variations and in the third. The click event is sent to an element when the mouse pointer is over the element, and the mouse button is pressed and released. Any HTML element can receive this event. click() event bind with a mouse. There are multiple events available for the mouse.
submit()
submit() This method is a shortcut for .on( "submit", handler ) in the first variation, and .trigger( "submit" ) in the third. This method belongs to form event. There are also more events which are specifically bound with HTML form only.
The submit event is sent to an element when the user is attempting to submit a form. It can only be attached to elements. Forms can be submitted either by clicking an explicit , , or , or by pressing Enter when certain form elements have focus.
$(document).ready(function() {
$(".personality_form").on("submit", function(e) {
e.preventDefault();
getData();
});
function getData() {
var res1 = $("input[name='st1']").val();
var res2 = $("input[name='st2']").val();
var x = parseInt(res1) + parseInt(res2);
if (x < 0) {
$('.result').html(x);
}
}
function validateForm() {
return true;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="POST" class="personality_form" id="personality_form">
<tr>
<td>Statement1</td>
<td>
<input type="radio" name="st1" class="dis" value="-1">
</td>
<td>
<input type="radio" name="st1" class="na" value="0">
</td>
<td>
<input type="radio" name="st1" class="agg" value="1">
</td>
</tr>
<tr>
<td>Statement2</td>
<td>
<input type="radio" name="st2" class="dis" value="-1">
</td>
<td>
<input type="radio" name="st2" class="na" value="0">
</td>
<td>
<input type="radio" name="st2" class="agg" value="1">
</td>
</tr>
<tr>
<td>Statement3</td>
<td>
<input type="radio" name="st3" class="dis" value="-1">
</td>
<td>
<input type="radio" name="st3" class="na" value="0">
</td>
<td>
<input type="radio" name="st3" class="agg" value="1">
</td>
</tr>
<tr>
<td>Statement4</td>
<td>
<input type="radio" name="st4" class="dis" value="-1">
</td>
<td>
<input type="radio" name="st4" class="na" value="0">
</td>
<td>
<input type="radio" name="st4" class="agg" value="1">
</td>
</tr>
<tr>
<td>Statement5</td>
<td>
<input type="radio" name="st5" class="dis" value="-1">
</td>
<td>
<input type="radio" name="st5" class="na" value="0">
</td>
<td>
<input type="radio" name="st5" class="agg" value="1">
</td>
</tr>
<tr>
<th colspan="4">
<button type="submit" class="btnSubmit">Get Results</button>
</th>
</tr>
</form>
<div class="result">
</div>
getElementsByName returns a live nodelist so you can't immediately grab the value. You need to iterate over the nodelist (or get the node you want using array notation) and then add the values.
However, what you might find easier is to use querySelectorAll to pick up all the checked buttons (document.querySelectorAll(":checked")) and iterate over those instead, making sure that you convert the string value to a number on each iteration when you add the values together.
function get() {
var checked = document.querySelectorAll(":checked");
let total = 0;
for (let i = 0; i < checked.length; i++) {
total += Number(checked[i].value);
}
document.getElementById('result').textContent = total;
}
document.querySelector('button').addEventListener('click', get, false);
<table>
<tr>
<td>Statement1</td>
<td><input type="radio" name="st1" class="dis" value="-1"></td>
<td><input type="radio" name="st1" class="na" value="0"></td>
<td><input type="radio" name="st1" class="agg" value="1"></td>
</tr>
<tr>
<td>Statement2</td>
<td><input type="radio" name="st2" class="dis" value="-1"></td>
<td><input type="radio" name="st2" class="na" value="0"></td>
<td><input type="radio" name="st2" class="agg" value="1"></td>
</tr>
</table>
<button>Get!</button>
<div id="result"></div>
Related
**UPDATED 3/25/20 11:20 est **
The issue I am having now is the code is not using num3 as intended. It is set up like the rest of the code in the HTML and script. This is the set up of my form:
<form name = "arrowCalc">
<table>
<caption>Weight Calculator</caption>
<tr>
<td><label>Draw Length:</label></td>
<td><input type="text" name="txtDraw"></td>
</tr>
<tr>
<td><label>Spine:</label></td>
<td>
<input type="radio" id="spine400" name="spineType" value="8.9"><label>400 Spine</label><br>
<input type="radio" id="spine350" name="spineType" value="9.8"><label>350 Spine</label><br>
<input type="radio" id="spine300" name="spineType" value="11.2"><label>300 Spine</label><br>
<input type="radio" id="spine250" name="spineType" value="12.5"><label>250 Spine</label>
</td>
</tr>
<tr>
<td><label>Nock Weight:</label></td>
</td>
<td>
<input type="radio" id="standardNock" name="nocType" checked="checked" value="6"><label>Standard</label><br>
<input type="radio" id="nockTurnal" name="nocType" value="21"><label>Nockturnal</label><br>
</td>
</tr>
<tr>
<td><label>Insert Weight:</label></td>
<td><input type="text" name="txtInsert"></td>
</tr>
<tr>
<td><label>Broadhead Weight:</label></td>
<td><input type="text" name="txtBroad"></td>
</tr>
<tr>
<td><label>Vane Weight:</label></td>
<td>
<input type="radio" id="vaneR" name="vaneType" value="6" ><label>Rapt-X</label><br>
<input type="radio" id="vaneD" name="vaneType" value="8"><label>DVX 8</label><br>
<input type="radio" id="vaneF2" name="vaneType" value="7"><label>Fusion 2.1</label><br>
<input type="radio" id="vaneF3" name="vaneType" value="7.5"><label>Fusion 3.0</label>
</td>
</tr>
<tr>
<td><label>Number of Vanes:</label></td>
<td>
<input type="radio" id="vanes3" name="vaneNumber" value="3"><label>3</label><br>
<input type="radio" id="vanes4" name="vaneNumber" value="4"><label>4</label><br>
</td>
</tr>
<tr>
<td></td>
<td><input type="button" value="Calculate" onClick="weightFormula()" align="right"></td>
</tr>
<tr>
<td><label>Weight:</label></td>
<td><input type="text" name="txtRes"></td>
</tr>
</table>
This is my function:
function weightFormula() {
var num1, num2, num3, num4, num5, num6, num7, res;
num1=Number(document.arrowCalc.txtDraw.value)-.5;
num2=document.querySelector('input[name=spineType]:checked').value;
num3=document.querySelector('input[name=nocType]:checked').value;
num4=Number(document.arrowCalc.txtInsert.value);
num5=Number(document.arrowCalc.txtBroad.value);
num6=document.querySelector('input[name=vaneType]:checked').value;
num7=document.querySelector('input[name=vaneNumber]:checked').value;
res=(num1*num2)+num4+num5+(num6*num7)+10+num3;
document.arrowCalc.txtRes.value=res;
}
With the exception as num3, all other variables are working as expected. If I would make num3 a text input or a dropdown box, the code also works as expected. Currently num3 will just add the value to the end of the total number. For instance if I am expecting an answer of 775.25 and I select the Standard nock (value of 6) the answer would be 769.256. The same thing happens when I move num3 to other spots in the res= line, it will just place the values at the end of the decimal.
The numbers I have been using for this are:
Draw Length (num1) = 29
Spine (num2) = 12.5 (spine250)
Nock (num3) = 6 (standard)
Insert (num4) = 175
Broadhead (num5) = 200
Vane type (num6) = 7 (Fusion 2.1)
Vane number (num7) = 4
As previously stated, this should equal 775.25
Try using eval()
function weightFormula() {
var num1, num2, num3, num4, num5, num6, num7, res;
num1=document.arrowCalc.txtDraw.value-.5+"";
num2=document.querySelector('input[name=spineType]:checked').value;
num3=document.querySelector('input[name=nocType]:checked').value; /*This is part of the issue*/
num4=document.arrowCalc.txtInsert.value;
num5=document.arrowCalc.txtBroad.value;
num6=document.querySelector('input[name=vaneType]:checked').value;
num7=document.querySelector('input[name=vaneNumber]:checked').value;
debugger;
res=eval(`${num1}*${num2}+${num4}+${num5}+(${num6}*${num7})+10+${num3}`);
document.arrowCalc.txtRes.value=res;
}
function weightFormula() {
var num1, num2, num3, num4, num5, num6, num7, res;
num1=document.arrowCalc.txtDraw.value-.5+"";
num2=document.querySelector('input[name=spineType]:checked').value;
num3=document.querySelector('input[name=nocType]:checked').value; /*This is part of the issue*/
num4=document.arrowCalc.txtInsert.value;
num5=document.arrowCalc.txtBroad.value;
num6=document.querySelector('input[name=vaneType]:checked').value;
num7=document.querySelector('input[name=vaneNumber]:checked').value;
debugger;
res=eval(`${num1}*${num2}+${num4}+${num5}+(${num6}*${num7})+10+${num3}`);
document.arrowCalc.txtRes.value=res;
}
<form name = "arrowCalc">
<table>
<caption>Weight Calculator</caption>
<tr>
<td><label>Draw Length:</label></td>
<td><input type="text" name="txtDraw"></td>
</tr>
<tr>
<td><label>Spine:</label></td>
<td>
<input type="radio" id="spine400" name="spineType" value="8.9"><label>400 Spine</label><br>
<input type="radio" id="spine350" name="spineType" value="9.8"><label>350 Spine</label><br>
<input type="radio" id="spine300" name="spineType" value="11.2"><label>300 Spine</label><br>
<input type="radio" id="spine250" name="spineType" value="12.5"><label>250 Spine</label>
</td>
</tr>
<tr>
<td><label>Nock Weight:</label></td>
<td>
<input type="radio" id="standardNock" name="nocType" checked="checked" value="6"><label>Standard</label><br>
<input type="radio" id="nockTurnal" name="nocType" value="21"><label>Nockturnal</label><br>
</td>
</tr>
<tr>
<td><label>Insert Weight:</label></td>
<td><input type="text" name="txtInsert"></td>
</tr>
<tr>
<td><label>Broadhead Weight:</label></td>
<td><input type="text" name="txtBroad"></td>
</tr>
<tr>
<td><label>Vane Weight:</label></td>
<td>
<input type="radio" id="vaneR" name="vaneType" value="6" ><label>Rapt-X</label><br>
<input type="radio" id="vaneD" name="vaneType" value="8"><label>DVX 8</label><br>
<input type="radio" id="vaneF2" name="vaneType" value="7"><label>Fusion 2.1</label><br>
<input type="radio" id="vaneF3" name="vaneType" value="7.5"><label>Fusion 3.0</label>
</td>
</tr>
<tr>
<td><label>Number of Vanes:</label></td>
<td>
<input type="radio" id="vanes3" name="vaneNumber" value="3"><label>3</label><br>
<input type="radio" id="vanes4" name="vaneNumber" value="4"><label>4</label><br>
</td>
</tr>
<tr>
<td></td>
<td><input type="button" value="Calculate" onClick="weightFormula()" align="right"></td>
</tr>
<tr>
<td><label>Weight:</label></td>
<td><input type="text" name="txtRes"></td>
</tr>
</table>
</form>
I have n radio buttons within an HTML form. A dialog box appears if not all of them are checked. How can I make an alert with the number of the buttons that are not checked?
<tr>
<td><strong>a</strong></td>
<td><input type="radio" id="RadioButton" name="a"/></td>
<td><input type="radio" id="RadioButton" name="a"/></td>
</tr>
<tr>
<td><strong>acronym</strong></td>
<td><input type="radio" id="RadioButton" name="acronym"/></td>
<td><input type="radio" id="RadioButton" name="acronym"/></td>
</tr>
<tr>
<td><strong>blockquote</strong></td>
<td><input type="radio" id="RadioButton" name="blockquote"/></td>
<td><input type="radio" id="RadioButton" name="blockquote"/></td>
</tr>
<tr>
<td><strong>br</strong></td>
<td><input type="radio" id="RadioButton" name="br"/></td>
<td><input type="radio" id="RadioButton"name="br"/></td>
</tr>
<tr>
<td><strong>div</strong></td>
<td><input type="radio" id="RadioButton" name="div"/></td>
<td><input type="radio" id="RadioButton" name="div"/></td>
</tr>
I want to display the number of the radios that are not checked
Use .reduce to identify all radio names, then use .filter over each name and :checked selector to figure out the number of unchecked radio fields:
const allRadioNames = [...document.querySelectorAll('input[type="radio"]')]
.reduce((names, { name }) => {
if (!names.includes(name)) names.push(name);
return names;
}, []);
document.querySelector('button').addEventListener('click', () => {
const checkedCount = allRadioNames.filter(name => {
return document.querySelector(`input[type="radio"][name="${name}"]:checked`);
}).length;
console.log('uncheckedCount: ' + (allRadioNames.length - checkedCount));
});
<tr>
<td><strong>a</strong></td>
<td><input type="radio" id="RadioButton" name="a" /></td>
<td><input type="radio" id="RadioButton" name="a" /></td>
</tr>
<tr>
<td><strong>acronym</strong></td>
<td><input type="radio" id="RadioButton" name="acronym" /></td>
<td><input type="radio" id="RadioButton" name="acronym" /></td>
</tr>
<tr>
<td><strong>blockquote</strong></td>
<td><input type="radio" id="RadioButton" name="blockquote" /></td>
<td><input type="radio" id="RadioButton" name="blockquote" /></td>
</tr>
<tr>
<td><strong>br</strong></td>
<td><input type="radio" id="RadioButton" name="br" /></td>
<td><input type="radio" id="RadioButton" name="br" /></td>
</tr>
<tr>
<td><strong>div</strong></td>
<td><input type="radio" id="RadioButton" name="div" /></td>
<td><input type="radio" id="RadioButton" name="div" /></td>
</tr>
<br>
<button>submit</button>
Note: this solution will fetch the number of boxes checked but will not match by name. As long as you know how may boxes should be checked, it shouldn't be a problem. The browser allows only one of the boxes with matching names to be checked. Let me know if you need something more specific.
This is a single-line solution. Simply use a query selector all within the confines of the table. Fetch :checked boxes and then alert the length.
function init() {
var table = document.getElementById('table');
var radioBoxes = table.querySelectorAll('input[type="radio"]:checked')
alert(radioBoxes.length)
}
<table id="table">
<tr>
<td><strong>a</strong></td>
<td><input type="radio" id="RadioButton" name="a" /></td>
<td><input type="radio" id="RadioButton" name="a" /></td>
</tr>
<tr>
<td><strong>acronym</strong></td>
<td><input type="radio" id="RadioButton" name="acronym" /></td>
<td><input type="radio" id="RadioButton" name="acronym" /></td>
</tr>
<tr>
<td><strong>blockquote</strong></td>
<td><input type="radio" id="RadioButton" name="blockquote" /></td>
<td><input type="radio" id="RadioButton" name="blockquote" /></td>
</tr>
<tr>
<td><strong>br</strong></td>
<td><input type="radio" id="RadioButton" name="br" /></td>
<td><input type="radio" id="RadioButton" name="br" /></td>
</tr>
<tr>
<td><strong>div</strong></td>
<td><input type="radio" id="RadioButton" name="div" /></td>
<td><input type="radio" id="RadioButton" name="div" /></td>
</tr>
</table>
<input type="button" onclick="init()" id="button" value="How many are checked?">
So, i have a form as below.I want to select all in working when the checkbox(For All Day) is selected. Is there any way i can do it through html or should i go for php or javascript?
<form>
<table>
<tr>
<td colspan="4">
<!--on selecting the checkbox below all radio buttons under working must get selected-->
<input type="checkbox" name="day" />All Day
</td>
<td><b>Working</b></td>
<td><b>Close</b></td>
</tr>
<tr>
<td colspan="4"><b>Monday</b></td>
<td><input type="radio" name="mday" value="work" /></td>
<td><input type="radio" name="mday" /></td>
</tr>
<tr>
<td colspan="4"><b>Tuesday</b></td>
<td><input type="radio" name="tday" value="work" /></td>
<td><input type="radio" name="tday" /></td>
</tr>
<tr>
<td colspan="4"><b>Wednesday</b></td>
<td><input type="radio" name="wday" value="work" /></td>
<td><input type="radio" name="wday" /></td>
</tr>
<tr>
<td colspan="4"><b>Thursday</b></td>
<td><input type="radio" name="thday" value="work" /></td>
<td><input type="radio" name="thday" /></td>
</tr>
<tr>
<td colspan="4"><b>Friday</b></td>
<td><input type="radio" name="fday" value="work" /></td>
<td><input type="radio" name="fday" /></td>
</tr>
<tr>
<td colspan="4"><b>Saturday</b></td>
<td><input type="radio" name="sday" value="work" /></td>
<td><input type="radio" name="sday" value="close" /></td>
</tr>
<tr>
<td colspan="4"><b>Sunday</b></td>
<td><input type="radio" name="suday" value="work" /></td>
<td><input type="radio" name="suday" /></td>
</tr>
</table>
</form>
You won't be able to do this with php, at least without reloading the page or making an Ajax request but this would be impractical. The best option is JavaScript; refer to this question, it solves your problem: How to implement "select all" check box in HTML?
Basically, all you have to do is bind an onClick event on the checkbox "All days" that triggers the JavaScript function. The function then takes the list of checkboxes, iterates through all of them, and checks them. The html (taken from the link I provided) should be similar to this:
<input type="checkbox" onClick="toggle(this)" />All days<br/>
And then the script:
function toggle(source) {
checkboxes = document.getElementsByName('x');
for(var i=0, n=checkboxes.length;i<n;i++) {
checkboxes[i].checked = source.checked;
}
}
The easiest method would be to use a javascript function that would be called upon the All Day check box value changed.
Then your function would be IF checked, run through the list and check all days
Try This Using jquery
Live Demo Here
Script
$("#allday").click(function() {
$("input:radio[value='work']").attr("checked", "checked");
});
Snippet Example Below
$("#allday").click(function() {
$("input:radio[value='work']").attr("checked", "checked");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="radio" name="allday" id="allday"/>All Day Working Close <br>
<table>
<tr>
<td colspan="4"><tr>
<td colspan="4">
<b>Monday</b>
</td>
<td>
<input type="radio" name="mday" value="work" /></td>
<td>
<input type="radio" name="mday" />
</td>
</tr>
<tr>
<td colspan="4">
<b>Tuesday</b>
</td>
<td>
<input type="radio" name="tday" value="work" /></td>
<td>
<input type="radio" name="tday" />
</td>
</tr>
<tr>
<td colspan="4">
<b>Wednesday</b>
</td>
<td>
<input type="radio" name="wday" value="work" /></td>
<td>
<input type="radio" name="wday" />
</td>
</tr>
<tr>
<td colspan="4">
<b>Thursday</b>
</td>
<td>
<input type="radio" name="thday" value="work" /></td>
<td>
<input type="radio" name="thday" />
</td>
</tr>
<tr>
<td colspan="4">
<b>Friday</b>
</td>
<td>
<input type="radio" name="fday" value="work" /></td>
<td>
<input type="radio" name="fday" />
</td>
</tr>
<tr>
<td colspan="4">
<b>Saturday</b>
</td>
<td>
<input type="radio" name="sday" value="work" /></td>
<td>
<input type="radio" name="sday" value="close" />
</td>
</tr>
<tr>
<td colspan="4">
<b>Sunday</b>
</td>
<td>
<input type="radio" name="suday" value="work" /></td>
<td>
<input type="radio" name="suday" />
</td>
</tr>
</table>
</form>
Use jQuery for checking/unchecking all week days based on checking/unchecking of "All days":
$(document).ready(function(){
$(':checkbox[name="day"]').click(function(){
if($(this).is(':checked')){
$("input:radio[value='work']").prop("checked", true);
} else {
$("input:radio[value='work']").prop("checked", false);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<table border="1" colspan="0" cellpadding="0">
<tr>
<td colspan="4">
<!--on selecting the checkbox below all radio buttons under working must get selected-->
<input type="checkbox" name="day" />All Day
</td>
<td><b>Working</b></td>
<td><b>Close</b></td>
</tr>
<tr>
<td colspan="4"><b>Monday</b></td>
<td><input type="radio" name="mday" value="work" /></td>
<td><input type="radio" name="mday" /></td>
</tr>
<tr>
<td colspan="4"><b>Tuesday</b></td>
<td><input type="radio" name="tday" value="work" /></td>
<td><input type="radio" name="tday" /></td>
</tr>
<tr>
<td colspan="4"><b>Wednesday</b></td>
<td><input type="radio" name="wday" value="work" /></td>
<td><input type="radio" name="wday" /></td>
</tr>
<tr>
<td colspan="4"><b>Thursday</b></td>
<td><input type="radio" name="thday" value="work" /></td>
<td><input type="radio" name="thday" /></td>
</tr>
<tr>
<td colspan="4"><b>Friday</b></td>
<td><input type="radio" name="fday" value="work" /></td>
<td><input type="radio" name="fday" /></td>
</tr>
<tr>
<td colspan="4"><b>Saturday</b></td>
<td><input type="radio" name="sday" value="work" /></td>
<td><input type="radio" name="sday" value="close" /></td>
</tr>
<tr>
<td colspan="4"><b>Sunday</b></td>
<td><input type="radio" name="suday" value="work" /></td>
<td><input type="radio" name="suday" /></td>
</tr>
</table>
</form>
// What I want to do is allow the user to select many checkboxes. In order to make a booking the user must select atleast one seat number checkbox(this checkbox has to be one or many of the seat number checkboxes). They can also select child,wheelchair or special diet, but in order to do so, the checkbox that belongs to the corresponding seat number must be checked. If it isnt a validation or popup must occur stating that the seat number must be checked. Meaning that if a user wants to check either special diet, wheelchair or child the seat number must be checked. If the user clicks the submit button without any checkboxes selected than a validation should occur or popup stating that atleast one checkbox must be selected.THis is my current page layout
this is my nextpage.php
<!DOCTYPE html>
<head>
<style>
td{
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
}
p{
font-size: 16px;
}
</style>
<body>
<?php
// Start the session
session_start();
?>
<?php
$str = $_GET['Confirm'];
$array = (explode(",",$str));
?>
<h1>Booking Details</h1>
Flight Details:
<table>
<tr>
<td> Route_no
</td>
<td><?php echo $array[0] ?>
</td>
</tr>
<tr>
<td>
To_city</td>
<td> <?php echo $array[1] ?>
</td>
</tr>
<tr>
<td>
From_city</td>
<td> <?php echo $array[2] ?>
</td>
</tr>
<tr>
<td>
Price</td>
<td> $<?php echo $array[3] ?>
</td>
</tr>
</table>
<?php
// Set session variables
$_SESSION["route_no"] = $array[0];
$_SESSION["to_city"] = $array[1];
$_SESSION["from_city"] = $array[2];
$_SESSION["price"] = $array[3];
echo "Session variables for this booking have been set.";
?>
<form action="Yourbookings.php" method="get">
<table>
<tr>
<td>Seat #</td>
<td>Child </td>
<td>WheelChair</td>
<td>Special Diet</td>
</tr>
<tr>
<td>Seat 1 <input type="checkbox" name="seat1" value="2"> </td>
<td> <input type="checkbox" name="Child" value="Child1"> </td>
<td> <input type="checkbox" name="WheelChair" value="WheelChair1"> </td>
<td> <input type="checkbox" name="Special Diet" value="SpecialDiet1"> </td>
</tr>
<tr>
<td>Seat 2 <input type="checkbox" name="seat2" value="1"> </td>
<td> <input type="checkbox" name="Child2" value="Child2"> </td>
<td> <input type="checkbox" name="WheelChair2" value="WheelChair2"> </td>
<td> <input type="checkbox" name="Special Diet2" value="SpecialDiet2"> </td>
</tr>
<tr>
<td>Seat 3 <input type="checkbox" name="seat3" value="seat3"> </td>
<td> <input type="checkbox" name="Child3" value="Child3"> </td>
<td> <input type="checkbox" name="WheelChair3" value="WheelChair3"> </td>
<td> <input type="checkbox" name="Special Diet3" value="SpecialDiet3"> </td>
</tr>
<tr>
<td>Seat 4 <input type="checkbox" name="seat4" value="seat4"> </td>
<td> <input type="checkbox" name="Child4" value="Child14"> </td>
<td> <input type="checkbox" name="WheelChair4" value="WheelChair4"> </td>
<td> <input type="checkbox" name="Special Diet4" value="SpecialDiet4"> </td>
</tr>
<tr>
<td>Seat 5 <input type="checkbox" name="seat5" value="seat5"> </td>
<td> <input type="checkbox" name="Child5" value="Child5"> </td>
<td> <input type="checkbox" name="WheelChair5" value="WheelChair5"> </td>
<td> <input type="checkbox" name="Special Diet5" value="SpecialDiet5"> </td>
</tr>
</table>
<?php
$_SESSION["price"] = $array[3];
?>
Total = $variable??
<input type="submit" name="Add booking" value="Add_booking">
</form>
</body>
</head>
</html>
In my opinion, forget about all the alerts and such, just use arrayed check box keys:
<tr>
<td>Seat 1</td>
<td><input type="checkbox" name="seat1[child]" value="1"></td>
<td><input type="checkbox" name="seat1[wheelchair]" value="1"></td>
<td><input type="checkbox" name="seat1[specialdiet]" value="1"></td>
</tr>
<tr>
<td>Seat 2</td>
<td><input type="checkbox" name="seat2[child]" value="1"></td>
<td><input type="checkbox" name="seat2[wheelchair]" value="1"></td>
<td><input type="checkbox" name="seat2[specialdiet]" value="1"></td>
</tr>
<tr>
<td>Seat 3</td>
<td><input type="checkbox" name="seat3[child]" value="1"></td>
<td><input type="checkbox" name="seat3[wheelchair]" value="1"></td>
<td><input type="checkbox" name="seat3[specialdiet]" value="1"></td>
</tr>
<tr>
<td>Seat 4</td>
<td><input type="checkbox" name="seat4[child]" value="1"></td>
<td><input type="checkbox" name="seat4[wheelchair]" value="1"></td>
<td><input type="checkbox" name="seat4[specialdiet]" value="1"></td>
</tr>
Upon submission your array will look like this:
Array
(
[seat1] => Array
(
[child] => 1
[wheelchair] => 1
)
[seat2] => Array
(
[wheelchair] => 1
)
[seat3] => Array
(
[wheelchair] => 1
[specialdiet] => 1
)
[seat4] => Array
(
[child] => 1
[wheelchair] => 1
[specialdiet] => 1
)
[Add_booking] => Add_booking
)
EDIT:
Based on your clarification, you need some javascript (jQuery):
Demo:
https://jsfiddle.net/9e9embjt/
JavaScript:
$(document).ready(function(){
$(this).on('click',".seat_selector",function() {
var thisBtn = $(this);
var isChk = thisBtn.is(":checked");
var thisWrap = thisBtn.parents('.seat_selector_wrap').find("input[type=checkbox]");
if(isChk)
thisWrap.attr("disabled",false);
else {
thisWrap.attr("disabled",true);
thisBtn.attr("disabled",false);
}
var allSeats = $(".seat_selector");
var disable = true;
$.each(allSeats, function(k,v) {
if($(v).is(":checked")) {
disable = false;
return false;
}
});
$("#submitter").attr('disabled',disable);
});
});
HTML:
<table>
</tr>
<tr class="seat_selector_wrap">
<td>Seat 1</td>
<td><input type="checkbox" name="seat1[seat]" value="1" class="seat_selector" /></td>
<td><input type="checkbox" name="seat1[child]" value="1" disabled /></td>
<td><input type="checkbox" name="seat1[wheelchair]" value="1" disabled /></td>
<td><input type="checkbox" name="seat1[specialdiet]" value="1" disabled /></td>
</tr>
<tr class="seat_selector_wrap">
<td>Seat 2</td>
<td><input type="checkbox" name="seat2[seat]" value="1" class="seat_selector" /></td>
<td><input type="checkbox" name="seat2[child]" value="1" disabled /></td>
<td><input type="checkbox" name="seat2[wheelchair]" value="1" disabled /></td>
<td><input type="checkbox" name="seat2[specialdiet]" value="1" disabled /></td>
</tr>
<tr class="seat_selector_wrap">
<td>Seat 3</td>
<td><input type="checkbox" name="seat3[seat]" value="1" class="seat_selector" /></td>
<td><input type="checkbox" name="seat3[child]" value="1" disabled /></td>
<td><input type="checkbox" name="seat3[wheelchair]" value="1" disabled /></td>
<td><input type="checkbox" name="seat3[specialdiet]" value="1" disabled /></td>
</tr>
<tr class="seat_selector_wrap">
<td>Seat 4</td>
<td><input type="checkbox" name="seat4[seat]" value="1" class="seat_selector" /></td>
<td><input type="checkbox" name="seat4[child]" value="1" disabled /></td>
<td><input type="checkbox" name="seat4[wheelchair]" value="1" disabled /></td>
<td><input type="checkbox" name="seat4[specialdiet]" value="1" disabled /></td>
</tr>
</table>
<input type="submit" name="Add booking" value="Add_booking" id="submitter" disabled />
I have a form with 4 columns.
Column 1 is a list of questions and columns 2-4 are yes/no radio buttons.
When the form first displays only column 1 should show. User would select a radio button to additionally display either columns 2&3 or column 4
I have found code that hides the column groups, but the radio buttons in side the column still display. I am trying to collapse the columns and everything inside of them too. I am teaching myself CSS and I know nothing about javascript so it could just be user error.
<!DOCTYPE html>
<!-- cg2.Style.visibility="hidden"
cg3.Style.visibility="hidden"
cg4.Style.visibility="hidden"-->
</script>
</head>
<body onload="vbscript:Startup window.dialogarguments">
<form name="baseform" id="baseform" action="" method="post">
<div id="showhide">
<label><input type="radio" name="T_097_WD" id="T_097lft" value="L1M" />this button Shows columns 2 & 3
</label>
<label><input type="radio" name="T_097_WD" id="T_097slv" value="SLV" />this button Shows column 4
</label>
</div>
<table border="1" style="width:50%" >
<COLGROUP id=cg1></COLGROUP>
<COLGROUP id=cg2></COLGROUP>
<COLGROUP id=cg3></COLGROUP>
<COLGROUP id=cg4></COLGROUP>
<tr>
<td>Never hide this column</td>
<td>column collapsed on startup</td>
<td>column collapsed on startup</td>
<td>column collapsed on startup</td>
</tr>
<tr>
<td>Q2</td>
<td><input type="radio" name="T_100_hi" id="T_100" value="1" />Yes
<input type="radio" name="T_100_hi" id="T_100" value="0" /></td>
<td><input type="radio" name="T_100_hi" id="T_100" value="1" />Yes
<input type="radio" name="T_100_hi" id="T_100" value="0" /></td>
<td><input type="radio" name="T_100_hi" id="T_100" value="1" />Yes
<input type="radio" name="T_100_hi" id="T_100" value="0" /></td>
</tr>
<tr>
<td>Q3</td>
<td><input type="radio" name="T_100_hi" id="T_100" value="1" />Yes
<input type="radio" name="T_100_hi" id="T_100" value="0" /></td>
<td><input type="radio" name="T_100_hi" id="T_100" value="1" />Yes
<input type="radio" name="T_100_hi" id="T_100" value="0" /></td>
<td><input type="radio" name="T_100_hi" id="T_100" value="1" />Yes
<input type="radio" name="T_100_hi" id="T_100" value="0" /></td>
</tr>
<tr>
<td>Q4</td>
<td><input type="radio" name="T_100_hi" id="T_100" value="1" />Yes
<input type="radio" name="T_100_hi" id="T_100" value="0" /></td>
<td><input type="radio" name="T_100_hi" id="T_100" value="1" />Yes
<input type="radio" name="T_100_hi" id="T_100" value="0" /></td>
<td><input type="radio" name="T_100_hi" id="T_100" value="1" />Yes
<input type="radio" name="T_100_hi" id="T_100" value="0" /></td>
</tr>
<tr>
<td>Q5</td>
<td><input type="radio" name="T_100_hi" id="T_100" value="1" />Yes
<input type="radio" name="T_100_hi" id="T_100" value="0" /></td>
<td><input type="radio" name="T_100_hi" id="T_100" value="1" />Yes
<input type="radio" name="T_100_hi" id="T_100" value="0" /></td>
<td><input type="radio" name="T_100_hi" id="T_100" value="1" />Yes
<input type="radio" name="T_100_hi" id="T_100" value="0" /></td>
</tr>
</table>
If I understand you correctly, the following solution should work for you.
var selection = document.getElementById("selection");
selection.addEventListener("change", function(e) {
if (e.target.tagName === "INPUT" && e.target.type === "radio") {
//get radio value
var value = document.querySelector('input[type="radio"]:checked').value;
//get items by column
var one = document.querySelectorAll("td:nth-child(1)");
var twothree = document.querySelectorAll("td:nth-child(2),td:nth-child(3)");
var four = document.querySelectorAll("td:nth-child(4)");
//hide all columns
hideOrShow(one, false);
hideOrShow(twothree, false);
hideOrShow(four, false);
//show selected columns
switch (value) {
case "one":
hideOrShow(one, true);
break;
case "twothree":
hideOrShow(twothree, true);
break;
case "four":
hideOrShow(four, true);
break;
}
}
});
function hideOrShow(nodes, show) {
[].forEach.call(nodes, function(item) {
item.style.display = show ? "inline-block" : "none";
});
}
//force change event to set to initial state
var changeEvent = new Event("change", {bubbles: true});
document.querySelector('input[type="radio"][value="one"]').dispatchEvent(changeEvent);
<div id="selection">
<label>
First
<input type="radio" name="shown" value="one" checked />
</label>
<label>
Two and Three
<input type="radio" name="shown" value="twothree" />
</label>
<label>
Four
<input type="radio" name="shown" value="four" />
</label>
</div>
<table border="1">
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
</table>
I'm making the assumption that you are not able to reference a column in a table, rather than needing information on responding to radio button events. Assuming this is the case, read on.
Add a class to each table element so that you can identify which elements belong to which rows. Then based on a radio button event, run a function to hide all elements with the appropriate class name.
For example
<tr>
<td class="col1"></td><td class="col2"></td><td class="col3"></td>
</tr>
<tr>
<td class="col1"></td><td class="col2"></td><td class="col3"></td>
</tr>
Now you can use jQuery to do something like:
$('.col2').hide();
Each cell with the class col2 will be hidden, which means every cell in the second column.
You should be able to find the appropriate code to respond to radio button change events on the web if you don't already know it.