check / uncheck group based on aother group - javascript

there is 4 groups of imputs
blacklist (option yes or no)
3 groups A B C (with range from 0 to 10)
What i want to do:
if blacklist is checked yes than group A B C is checked 0
if blacklist is checked no than A B C is unchecked (clear) and user can check each option from 0-10 in each group ABC
if blacklist is checked yes and A B C is checked 0 and than you check anything else than 0 from group A B C, blacklist will change from Yes to No
It is working, but i tried to put in in the table second code and have no idea how to do it to work. naybe somebody can tell me hot to to it in easier way
<html>
<body>
<link rel='stylesheet' href='css/style.css'>
<style>
table {
border-collapse: collapse;
}
td, th {
border: 1px solid #ccc;
padding: 10px;
}
th:empty {
border: 0;
}
</style>
<form action="">
TAK <input type="radio" name="sz" id="ok" value="1" />
NIE <input type="radio" name="sz" id="fb" value="2" />
<div id="ResultCatego">
<input type="radio" name="ResultCategories" id="tak" value="0" /> 0
<input type="radio" name="ResultCategories" value="1" /> 1
<input type="radio" name="ResultCategories" value="2" /> 2
<input type="radio" name="ResultCategories" value="3" /> 3
<input type="radio" name="ResultCategories" value="4" /> 4
<input type="radio" name="ResultCategories" value="5" /> 5
<input type="radio" name="ResultCategories" value="6" /> 6
<input type="radio" name="ResultCategories" value="7" /> 7
<input type="radio" name="ResultCategories" value="8" /> 8
<input type="radio" name="ResultCategories" value="9" /> 9
<input type="radio" name="ResultCategories" value="10" /> 10
</div>
<BR>
<div id="ResultCatego1">
<input type="radio" name="ResultCategorie" id="tak" value="0" /> 0
<input type="radio" name="ResultCategorie" value="1" /> 1
<input type="radio" name="ResultCategorie" value="2" /> 2
<input type="radio" name="ResultCategorie" value="3" /> 3
<input type="radio" name="ResultCategorie" value="4" /> 4
<input type="radio" name="ResultCategorie" value="5" /> 5
<input type="radio" name="ResultCategorie" value="6" /> 6
<input type="radio" name="ResultCategorie" value="7" /> 7
<input type="radio" name="ResultCategorie" value="8" /> 8
<input type="radio" name="ResultCategorie" value="9" /> 9
<input type="radio" name="ResultCategorie" value="10" /> 10
</div>
<BR>
<div id="ResultCatego2">
<input type="radio" name="ResultCategor" id="tak" value="0" /> 0
<input type="radio" name="ResultCategor" value="1" /> 1
<input type="radio" name="ResultCategor" value="2" /> 2
<input type="radio" name="ResultCategor" value="3" /> 3
<input type="radio" name="ResultCategor" value="4" /> 4
<input type="radio" name="ResultCategor" value="5" /> 5
<input type="radio" name="ResultCategor" value="6" /> 6
<input type="radio" name="ResultCategor" value="7" /> 7
<input type="radio" name="ResultCategor" value="8" /> 8
<input type="radio" name="ResultCategor" value="9" /> 9
<input type="radio" name="ResultCategor" value="10" /> 10
</div>
<script>
const ok = document.querySelector('#ok');
const categoriesWrapper = document.querySelector('#ResultCatego');
const categoriesWrapper1 = document.querySelector('#ResultCatego1');
const categoriesWrapper2 = document.querySelector('#ResultCatego2');
const fb = document.querySelector('#fb');
fb.addEventListener('click', (event) => {
const checked = categoriesWrapper.querySelector('input:checked');
if (checked) {
categoriesWrapper.querySelector('input:checked').checked = false;
}
});
fb.addEventListener('click', (event) => {
const checked = categoriesWrapper1.querySelector('input:checked');
if (checked) {
categoriesWrapper1.querySelector('input:checked').checked = false;
}
});
fb.addEventListener('click', (event) => {
const checked = categoriesWrapper2.querySelector('input:checked');
if (checked) {
categoriesWrapper2.querySelector('input:checked').checked = false;
}
});
ok.addEventListener('click', (event) => {
categoriesWrapper.querySelector('#tak').checked = true;
});
ok.addEventListener('click', (event) => {
categoriesWrapper1.querySelector('#tak').checked = true;
});
ok.addEventListener('click', (event) => {
categoriesWrapper2.querySelector('#tak').checked = true;
});
categoriesWrapper.addEventListener('click', (event) => {
if (event.target.id !== 'tak') {
fb.checked = true;
}
});
categoriesWrapper1.addEventListener('click', (event) => {
if (event.target.id !== 'tak') {
fb.checked = true;
}
});
categoriesWrapper2.addEventListener('click', (event) => {
if (event.target.id !== 'tak') {
fb.checked = true;
}
});
</script>
</body>
</html>
table where i want to put it:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<meta charset='UTF-8'>
<title>Formularz ocen</title>
<link rel='stylesheet' href='css/style.css'>
<style>
table {
border-collapse: collapse;
}
td, th {
border: 1px solid #ccc;
padding: 10px;
}
th:empty {
border: 0;
}
</style>
<form name="form1">
<table>
<tr>
<td>NIP</td>
<td colspan="11"><input type="text"></td>
</tr>
<tr>
<td>Black list</td>
<td><input type="radio" name="sz" id="ok" value="1" ></td>
<td colspan="4">Yes</td>
<td><input type="radio" name="sz" id="fb" value="2" ></td>
<td colspan="4">NO</td>
</tr>
<tr>
<th></th>
<th>10</th>
<th>9</th>
<th>8</th>
<th>7</th>
<th>6</th>
<th>5</th>
<th>4</th>
<th>3</th>
<th>2</th>
<th>1</th>
<th>0</th>
</tr>
<div id="ResultCatego">
<tr>
<td>A</td>
<td><input type="radio" name="komunikacja" value="10"></td>
<td><input type="radio" name="komunikacja" value="9"></td>
<td><input type="radio" name="komunikacja" value="8"></td>
<td><input type="radio" name="komunikacja" value="7"></td>
<td><input type="radio" name="komunikacja" value="6"></td>
<td><input type="radio" name="komunikacja" value="5"></td>
<td><input type="radio" name="komunikacja" value="4"></td>
<td><input type="radio" name="komunikacja" value="3"></td>
<td><input type="radio" name="komunikacja" value="2"></td>
<td><input type="radio" name="komunikacja" value="1"></td>
<td><input type="radio" name="komunikacja" id="tak" value="0"></td>
</tr>
<tr>
<td>B</td>
<td><input type="radio" name="problematycznosc" value="10"></td>
<td><input type="radio" name="problematycznosc" value="9"></td>
<td><input type="radio" name="problematycznosc" value="8"></td>
<td><input type="radio" name="problematycznosc" value="7"></td>
<td><input type="radio" name="problematycznosc" value="6"></td>
<td><input type="radio" name="problematycznosc" value="5"></td>
<td><input type="radio" name="problematycznosc" value="4"></td>
<td><input type="radio" name="problematycznosc" value="3"></td>
<td><input type="radio" name="problematycznosc" value="2"></td>
<td><input type="radio" name="problematycznosc" value="1"></td>
<td><input type="radio" name="problematycznosc" id="tak" value="0"></td>
</tr>
<tr>
<td>C</td>
<td><input type="radio" name="terminowosc" value="10"></td>
<td><input type="radio" name="terminowosc" value="9"></td>
<td><input type="radio" name="terminowosc" value="8"></td>
<td><input type="radio" name="terminowosc" value="7"></td>
<td><input type="radio" name="terminowosc" value="6"></td>
<td><input type="radio" name="terminowosc" value="5"></td>
<td><input type="radio" name="terminowosc" value="4"></td>
<td><input type="radio" name="terminowosc" value="3"></td>
<td><input type="radio" name="terminowosc" value="2"></td>
<td><input type="radio" name="terminowosc" value="1"></td>
<td><input type="radio" name="terminowosc" id="tak" value="0"></td>
</tr>
</div>
</table>
</form>
</body>
</html>

Related

How to enable a button when radio button from all the sets are selected?

I am working on a test and bumped into a problem.
How do I make a .js script that only enables button when all fields are checked.
<tr>
<td class="first-col">Ritkán szorongom1
<td><input type="radio" name="q1" value="1" id="q1"></td>
<td><input type="radio" name="q1" value="2" id="q1"></td>
<td><input type="radio" name="q1" value="3" id="q1"></td>
<td><input type="radio" name="q1" value="4" id="q1"></td>
<td><input type="radio" name="q1" value="5" id="q1"></td>
</td>
</tr>
<tr>
<td class="first-col">Ritkán szorongom1
<td><input type="radio" name="q2" value="1" id="q2"></td>
<td><input type="radio" name="q2" value="2" id="q2"></td>
<td><input type="radio" name="q2" value="3" id="q2"></td>
<td><input type="radio" name="q2" value="4" id="q2"></td>
<td><input type="radio" name="q2" value="5" id="q2"></td>
</td>
</tr>
<tr>
<td class="first-col">Ritkán szorongom1
<td><input type="radio" name="q3" value="1" id="q3"></td>
<td><input type="radio" name="q3" value="2" id="q3"></td>
<td><input type="radio" name="q3" value="3" id="q3"></td>
<td><input type="radio" name="q3" value="4" id="q3"></td>
<td><input type="radio" name="q3" value="5" id="q3"></td>
</td>
</tr>
<div class="register-button">
<input type="submit" name="submit1" class="inputButton" id="submit1" value="Következő" disabled id="enable-on-two" />
</div>
I have found this .js online, but I can't make it fit well as I have multiple pages of test questions with different input names.
function numberOfCheckboxesSelected() {
return document.querySelectorAll('input[type=checkbox][name="seatdata[]"]:checked').length;
}
function onChange() {
document.getElementById('enable-on-two').disabled = numberOfCheckboxesSelected() < 3;
}
document.getElementById('world').addEventListener('change', onChange, false);

There were some issues with your codebase.
document.getElementById('world').addEventListener('change', onChange, false);
Issue There is no node with that specified id.
Submit button has more than one id. That is not possible.
document.querySelectorAll('input[type=checkbox][name="seatdata[]"]:checked')
Your input type is radio so the above one wont work. Also the name attribute is wrong.
I have added those fixes.
function numberOfCheckboxesSelected() {
return document.querySelectorAll('input[type=radio]:checked').length;
}
function onChange() {
console.log(numberOfCheckboxesSelected());
document.getElementById('enable-on-two').disabled = numberOfCheckboxesSelected() < 3;
}
document.querySelectorAll('input[type=radio]').forEach(node => {
node.addEventListener('change', onChange, false);
});
<table>
<tr>
<td class="first-col">Ritkán szorongom1
<td><input type="radio" name="q1" value="1" id="q1"></td>
<td><input type="radio" name="q1" value="2" id="q1"></td>
<td><input type="radio" name="q1" value="3" id="q1"></td>
<td><input type="radio" name="q1" value="4" id="q1"></td>
<td><input type="radio" name="q1" value="5" id="q1"></td>
</td>
</tr>
<tr>
<td class="first-col">Ritkán szorongom1
<td><input type="radio" name="q2" value="1" id="q2"></td>
<td><input type="radio" name="q2" value="2" id="q2"></td>
<td><input type="radio" name="q2" value="3" id="q2"></td>
<td><input type="radio" name="q2" value="4" id="q2"></td>
<td><input type="radio" name="q2" value="5" id="q2"></td>
</td>
</tr>
<tr>
<td class="first-col">Ritkán szorongom1
<td><input type="radio" name="q3" value="1" id="q3"></td>
<td><input type="radio" name="q3" value="2" id="q3"></td>
<td><input type="radio" name="q3" value="3" id="q3"></td>
<td><input type="radio" name="q3" value="4" id="q3"></td>
<td><input type="radio" name="q3" value="5" id="q3"></td>
</td>
</tr>
</table>
<div class="register-button">
<input type="submit" name="submit1" class="inputButton" value="Következő" disabled
id="enable-on-two" />
</div>

The above solution needs a little correction as it enables the submit button on two inputs selection instead of all three.
Replace following:
document.getElementById('enable-on-two').disabled = numberOfCheckboxesSelected() < 2;
By this:
let totalInputs = document.querySelectorAll('input[type=radio]').length;
document.getElementById('enable-on-two').disabled = numberOfCheckboxesSelected() < totalInputs;

Google Apps Script access values from dialog box

I followed this tutorial https://yagisanatode.com/2018/06/10/google-apps-script-getting-input-data-from-a-dialog-box-in-google-sheets/ to create a dialog box in Google Sheets and print the values. However, I'd like to feed these values into a new function. If I try to access them in line 29, the code somewhat breaks. I say 'somewhat' because it still runs until line 28, but I think it doesn't execute line 28 as I can't see anything in the log.
I also noticed that it doesn't close the dialog box automatically once I add my two new lines. I assume it has something to do with the function closeIt in testUI.html, but I can't figure out what it is as I'm new to jQuery/Javascript.
code.gs
//--GLOBALS--
var ui = SpreadsheetApp.getUi();
function onOpen(e) {
// Create menu options
ui.createAddonMenu()
.addSubMenu(ui.createMenu("Admin")
.addItem("Test", "test"))
.addToUi();
};
function test() {
//Call the HTML file and set the width and height
var html = HtmlService.createHtmlOutputFromFile("testUI")
.setWidth(450)
.setHeight(300);
//Display the dialog
var dialog = ui.showModalDialog(html, "Select the relevant module and unit");
};
function runsies(values) {
//Display the values submitted from the dialog box in the Logger.
Logger.log(values);
//I added the two lines below because I'd like to access the values, not just print them.
var valuesAcc = values[0]["orange"]
Logger.log(valuesAcc);
};
//I'd like to run another function after runsies so I can work with the values which were inputted
//into the dialogue box.
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
function form_data(){
var values = [{
"orange":$("input[name=orange]:checked").val(),
"blue":$("input[name=blue]:checked").val(),
"green":$("input[name=green]:checked").val(),
"purple":$("input[name=purple]:checked").val()
}];
google.script.run.withSuccessHandler(closeIt).runsies(values);
};
function closeIt(){
google.script.host.close()
};
<head>
<base target="_top">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
<table>
<col width="60">
<col width="50">
<col width="50">
<col width="50">
<col width="50">
<col width="50">
<col width="50">
<col width="50">
<col width="50">
<col width="50">
<tr>
<th></th><th><strong>Unit:</strong></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th>
</tr>
<tr>
<th><strong>Module</strong></th>
<th><strong>n/a</strong></th>
<th><strong>1</strong></th>
<th><strong>2</strong></th>
<th><strong>3</strong></th>
<th><strong>4</strong></th>
<th><strong>5</strong></th>
<th><strong>6</strong></th>
<th><strong>7</strong></th>
<th><strong>8</strong></th>
</tr>
<tr>
<td>Orange </td>
<td><input type="radio" name="orange" value="na" checked></td>
<td><input type="radio" name="orange" value="1"></td>
<td><input type="radio" name="orange" value="2"></td>
<td><input type="radio" name="orange" value="3"></td>
<td><input type="radio" name="orange" value="4"></td>
<td><input type="radio" name="orange" value="5"></td>
<td><input type="radio" name="orange" value="6"></td>
<td><input type="radio" name="orange" value="7"></td>
<td><input type="radio" name="orange" value="8"></td>
</tr>
<tr>
<td>Blue </td>
<td><input type="radio" name="blue" value="na" checked></td>
<td><input type="radio" name="blue" value="1"></td>
<td><input type="radio" name="blue" value="2"></td>
<td><input type="radio" name="blue" value="3"></td>
<td><input type="radio" name="blue" value="4"></td>
<td><input type="radio" name="blue" value="5"></td>
<td><input type="radio" name="blue" value="6"></td>
<td><input type="radio" name="blue" value="7"></td>
<td><input type="radio" name="blue" value="8"></td>
</tr>
<tr>
<td>Green </td>
<td><input type="radio" name="green" value="na" checked></td>
<td><input type="radio" name="green" value="1"></td>
<td><input type="radio" name="green" value="2"></td>
<td><input type="radio" name="green" value="3"></td>
<td><input type="radio" name="green" value="4"></td>
<td><input type="radio" name="green" value="5"></td>
<td><input type="radio" name="green" value="6"></td>
<td><input type="radio" name="green" value="7"></td>
<td><input type="radio" name="green" value="8"></td>
</tr>
<tr>
<td>Purple </td>
<td><input type="radio" name="purple" value="na" checked></td>
<td><input type="radio" name="purple" value="1"></td>
<td><input type="radio" name="purple" value="2"></td>
<td><input type="radio" name="purple" value="3"></td>
<td><input type="radio" name="purple" value="4"></td>
<td><input type="radio" name="purple" value="5"></td>
<td><input type="radio" name="purple" value="6"></td>
<td><input type="radio" name="purple" value="7"></td>
<td><input type="radio" name="purple" value="8"></td>
</tr>
</table>
<input type="submit" value="Submit" class="action" onclick="form_data()" >
</div>
And I think I should use a later version of jQuery?

Accessing values from a Dialog is easily performed with google.script.run. Information can be found at Client To Server Communication.
Here's a couple of examples of dialog boxes that I've done:
Data Entry Dialog Created from Header Info on Spreadsheet
Simple Example

Form response calculation

I just create a form and table for a physical therapist. Need your help in calculating "sum based on response". The extreme difficulty value can be "0" and no difficulty can be "4"
I am familiar with reading and modifying js, html, css code. Here is what I wrote.
<FORM >
<TABLE BORDER>
<TR ALIGN=CENTER>
<TD WIDTH=350><B>ACTIVITIES<B> </TD>
<TD WIDTH=125><B>Extreme difficulty (0)</B></TD>
<TD WIDTH=125><B>Quite a bit of difficulty (1)</B></TD>
<TD WIDTH=125><B>Moderate Difficulty(2)</B></TD>
<TD WIDTH=125><B>Little Difficulty(3)</B></TD>
<TD WIDTH=125><B>No Difficulty(4)</B></TD>
</TR>
<TR ALIGN=CENTER>
<TD ALIGN=LEFT> Any of usual work (household, work)</TD>
<TD><INPUT TYPE="RADIO" NAME="stimulat" VALUE="1"></TD>
<TD><INPUT TYPE="RADIO" NAME="stimulat" VALUE="2"></TD>
<TD><INPUT TYPE="RADIO" NAME="stimulat" VALUE="3"></TD>
<TD><INPUT TYPE="RADIO" NAME="stimulat" VALUE="4"></TD>
<TD><INPUT TYPE="RADIO" NAME="stimulat" VALUE="5"></TD>
</TR>
<TR ALIGN=CENTER>
<TD ALIGN=LEFT> Your hobbies, recreational, sporting</TD>
<TD><INPUT TYPE="RADIO" NAME="freedom" VALUE="1"></TD>
<TD><INPUT TYPE="RADIO" NAME="freedom" VALUE="2"></TD>
<TD><INPUT TYPE="RADIO" NAME="freedom" VALUE="3"></TD>
<TD><INPUT TYPE="RADIO" NAME="freedom" VALUE="4"></TD>
<TD><INPUT TYPE="RADIO" NAME="freedom" VALUE="5"></TD>
</TR>
<TR ALIGN=CENTER>
<TD ALIGN=LEFT> Lifting bag of groceries to waist level</TD>
<TD><INPUT TYPE="RADIO" NAME="demand" VALUE="1"></TD>
<TD><INPUT TYPE="RADIO" NAME="demand" VALUE="2"></TD>
<TD><INPUT TYPE="RADIO" NAME="demand" VALUE="3"></TD>
<TD><INPUT TYPE="RADIO" NAME="demand" VALUE="4"></TD>
<TD><INPUT TYPE="RADIO" NAME="demand" VALUE="5"></TD>
</TR>
<TR ALIGN=CENTER>
<TD ALIGN=LEFT> Grooming your hair</TD>
<TD><INPUT TYPE="RADIO" NAME="creative" VALUE="1"></TD>
<TD><INPUT TYPE="RADIO" NAME="creative" VALUE="2"></TD>
<TD><INPUT TYPE="RADIO" NAME="creative" VALUE="3"></TD>
<TD><INPUT TYPE="RADIO" NAME="creative" VALUE="4"></TD>
<TD><INPUT TYPE="RADIO" NAME="creative" VALUE="5"></TD>
</TR>
</TABLE>
</FORM>
I do not know how to calculate the result value to this form

<h4 style="text-align:center;color:blue;"> Dr ABC<br> MYLocation</h4>
<form action="" method="get">
<b> Enter Patient's Name :</b> <input type="text" /><br>
</form>
<h4> We are interested in knowing wheather you are having any difficulty with the
activities listed below <u> because of your upper limb problem </u>
for which <br> you are seeking attention. Provide an answer for each activity</h4>
<h4> Today, <u>do you or would you </u> have any difficulty with: (check boxes below
on each line)</h4>
<style>table, td { border: 1px solid grey }
td {
text-align: center;
min-width: 125px;
max-width: 125px;
}
tr td:first-child {
text-align: left;
min-width: 350px;
max-width: 350px;
}
thead td { font-weight: bold }
#the-Sum {
display: block;
margin: 10px 0 0 20px;
font-weight: bold;
color:crimson;
}</style>
<form id="the-Form">
<table>
<thead>
<tr>
<td>ACTIVITIES </td>
<td>Extreme Difficulty or Unable to Perform Activity (0)</td>
<td>Quite a Bit of Difficulty (1)</td>
<td>Moderate Difficulty (2)</td>
<td>A Little bit of Difficulty (3)</td>
<td>No Difficulty (4)</td>
</tr>
</thead>
<tbody>
<tr>
<td> Any of usual work, household, or school activities</td>
<td><input type="radio" name="household" value="0"></td>
<td><input type="radio" name="household" value="1"></td>
<td><input type="radio" name="household" value="2"></td>
<td><input type="radio" name="household" value="3"></td>
<td><input type="radio" name="household" value="4"></td>
</tr>
<tr>
<td> Your usual hobbies, recreational, sporting activities</td>
<td><input type="radio" name="hobbies" value="0"></td>
<td><input type="radio" name="hobbies" value="1"></td>
<td><input type="radio" name="hobbies" value="2"></td>
<td><input type="radio" name="hobbies" value="3"></td>
<td><input type="radio" name="hobbies" value="4"></td>
</tr>
<tr>
<td> Lifting bag of groceries to waist level</td>
<td><input type="radio" name="groceryw" value="0"></td>
<td><input type="radio" name="groceryw" value="1"></td>
<td><input type="radio" name="groceryw" value="2"></td>
<td><input type="radio" name="groceryw" value="3"></td>
<td><input type="radio" name="groceryw" value="4"></td>
</tr>
<tr>
<td> Lifting a bag of groceries above your head </td>
<td><input type="radio" name="groceryd" value="0"></td>
<td><input type="radio" name="groceryd" value="1"></td>
<td><input type="radio" name="groceryd" value="2"></td>
<td><input type="radio" name="groceryd" value="3"></td>
<td><input type="radio" name="groceryd" value="4"></td>
</tr>
<tr>
<td> Grooming your hair </td>
<td><input type="radio" name="grooming" value="0"></td>
<td><input type="radio" name="grooming" value="1"></td>
<td><input type="radio" name="grooming" value="2"></td>
<td><input type="radio" name="grooming" value="3"></td>
<td><input type="radio" name="grooming" value="4"></td>
</tr>
<tr>
<td> Pushing up on your hands (e.g. from bathtub or chair) </td>
<td><input type="radio" name="pushing" value="0"></td>
<td><input type="radio" name="pushing" value="1"></td>
<td><input type="radio" name="pushing" value="2"></td>
<td><input type="radio" name="pushing" value="3"></td>
<td><input type="radio" name="pushing" value="4"></td>
</tr>
<tr>
<td> Preparing food (e.g. peeling, cutting </td>
<td><input type="radio" name="food" value="0"></td>
<td><input type="radio" name="food" value="1"></td>
<td><input type="radio" name="food" value="2"></td>
<td><input type="radio" name="food" value="3"></td>
<td><input type="radio" name="food" value="4"></td>
</tr>
<tr>
<td> Driving </td>
<td><input type="radio" name="driving" value="0"></td>
<td><input type="radio" name="driving" value="1"></td>
<td><input type="radio" name="driving" value="2"></td>
<td><input type="radio" name="driving" value="3"></td>
<td><input type="radio" name="driving" value="4"></td>
</tr>
<tr>
<td> Vaccuming, sweeping, or raking </td>
<td><input type="radio" name="cleaning" value="0"></td>
<td><input type="radio" name="cleaning" value="1"></td>
<td><input type="radio" name="cleaning" value="2"></td>
<td><input type="radio" name="cleaning" value="3"></td>
<td><input type="radio" name="cleaning" value="4"></td>
</tr>
<tr>
<td> Dressing </td>
<td><input type="radio" name="dressing" value="0"></td>
<td><input type="radio" name="dressing" value="1"></td>
<td><input type="radio" name="dressing" value="2"></td>
<td><input type="radio" name="dressing" value="3"></td>
<td><input type="radio" name="dressing" value="4"></td>
</tr>
<tr>
<td> Doing up buttons </td>
<td><input type="radio" name="dbuttons" value="0"></td>
<td><input type="radio" name="dbuttons" value="1"></td>
<td><input type="radio" name="dbuttons" value="2"></td>
<td><input type="radio" name="dbuttons" value="3"></td>
<td><input type="radio" name="dbuttons" value="4"></td>
</tr>
<tr>
<td> Using tools or appliances</td>
<td><input type="radio" name="appliance" value="0"></td>
<td><input type="radio" name="appliance" value="1"></td>
<td><input type="radio" name="appliance" value="2"></td>
<td><input type="radio" name="appliance" value="3"></td>
<td><input type="radio" name="appliance" value="4"></td>
</tr>
<tr>
<td> Opening doors </td>
<td><input type="radio" name="doors" value="0"></td>
<td><input type="radio" name="doors" value="1"></td>
<td><input type="radio" name="doors" value="2"></td>
<td><input type="radio" name="doors" value="3"></td>
<td><input type="radio" name="doors" value="4"></td>
</tr>
<tr>
<td> Cleaning </td>
<td><input type="radio" name="cleaning1" value="0"></td>
<td><input type="radio" name="cleaning1" value="1"></td>
<td><input type="radio" name="cleaning1" value="2"></td>
<td><input type="radio" name="cleaning1" value="3"></td>
<td><input type="radio" name="cleaning1" value="4"></td>
</tr>
<tr>
<td> Tying or lacing shoes</td>
<td><input type="radio" name="shoes" value="0"></td>
<td><input type="radio" name="shoes" value="1"></td>
<td><input type="radio" name="shoes" value="2"></td>
<td><input type="radio" name="shoes" value="3"></td>
<td><input type="radio" name="shoes" value="4"></td>
</tr>
<tr>
<td> Sleeping</td>
<td><input type="radio" name="sleep" value="0"></td>
<td><input type="radio" name="sleep" value="1"></td>
<td><input type="radio" name="sleep" value="2"></td>
<td><input type="radio" name="sleep" value="3"></td>
<td><input type="radio" name="sleep" value="4"></td>
</tr>
<tr>
<td> Laundering cloths (e.g. washing, ironing, folding)</td>
<td><input type="radio" name="laundry" value="0"></td>
<td><input type="radio" name="laundry" value="1"></td>
<td><input type="radio" name="laundry" value="2"></td>
<td><input type="radio" name="laundry" value="3"></td>
<td><input type="radio" name="laundry" value="4"></td>
</tr>
<tr>
<td>Opening a jar</td>
<td><input type="radio" name="jar" value="0"></td>
<td><input type="radio" name="jar" value="1"></td>
<td><input type="radio" name="jar" value="2"></td>
<td><input type="radio" name="jar" value="3"></td>
<td><input type="radio" name="jar" value="4"></td>
</tr>
<tr>
<td> Throwing a ball </td>
<td><input type="radio" name="ball" value="0"></td>
<td><input type="radio" name="ball" value="1"></td>
<td><input type="radio" name="ball" value="2"></td>
<td><input type="radio" name="ball" value="3"></td>
<td><input type="radio" name="ball" value="4"></td>
</tr>
<tr>
<td> Carrying a small suitcase with affected limb </td>
<td><input type="radio" name="carrying" value="0"></td>
<td><input type="radio" name="carrying" value="1"></td>
<td><input type="radio" name="carrying" value="2"></td>
<td><input type="radio" name="carrying" value="3"></td>
<td><input type="radio" name="carrying" value="4"></td>
</tr>
</tbody>
</table>
<output id="the-Sum"> total = 0 </output>
</form>
<script>
const
theForm = document.querySelector('#the-Form'),
theTotal = document.querySelector('#the-Sum'),
List_RadioGroup = [ 'household', 'hobbies', 'groceryw', 'groceryd', 'grooming', 'pushing', 'food', 'driving', 'cleaning', 'dressing', 'dbuttons', 'appliance', 'doors', 'cleaning1', 'shoes', 'sleep', 'laundry', 'jar', 'ball', 'carrying']
;
// load init.
theTotal.textContent = ' total = 0 ';
List_RadioGroup.forEach(xElm=>{ theForm[xElm][0].checked = true; })
theForm.onchange = function()
{
let total = 0;
List_RadioGroup.forEach(xElm=>{
total += parseInt( document.querySelector(`input[name="${xElm}"]:checked`).value );
})
theTotal.textContent = ` TOTAL OUT OF 80 = ${total} `;
}
</script>
<div><form>
<input type="button" value="Print or Save as pdf" onClick="window.print()">
</form></div>

New and complete solution
const
theForm = document.querySelector('#the-Form'),
theTabBody = document.querySelector('#Activities-Table tbody'),
theTotal = document.querySelector('#the-Sum'),
theReset = document.querySelector('#the-Reset'),
PrintButton = document.querySelector('#bt-Print'),
ActivitiesList = [
{ name: 'household', lib: 'Any of usual work, household, or school activities' }
, { name: 'hobbies', lib: 'Your usual hobbies, recreational, sporting activities' }
, { name: 'groceryw', lib: 'Lifting bag of groceries to waist level' }
, { name: 'groceryd', lib: 'Lifting a bag of groceries above your head' }
, { name: 'grooming', lib: 'Grooming your hair' }
, { name: 'pushing', lib: 'Pushing up on your hands (e.g. from bathtub or chair)' }
, { name: 'food', lib: 'Preparing food (e.g. peeling, cutting ..)' }
, { name: 'driving', lib: 'Driving' }
, { name: 'cleaning', lib: 'Vaccuming, sweeping, or raking ' }
, { name: 'dressing', lib: 'Dressing' }
, { name: 'dbuttons', lib: 'Doing up buttons' }
, { name: 'appliance', lib: 'Using tools or appliances' }
, { name: 'doors', lib: 'Opening doors' }
, { name: 'cleaning1', lib: 'Cleaning' }
, { name: 'shoes', lib: 'Tying or lacing shoes' }
, { name: 'sleep', lib: 'Sleeping' }
, { name: 'laundry', lib: 'Laundering cloths (e.g. washing, ironing, folding)' }
, { name: 'jar', lib: 'Opening a jar' }
, { name: 'ball', lib: 'Throwing a ball' }
, { name: 'carrying', lib: 'Carrying a small suitcase with affected limb' }
]
;
function CaculSum()
{
let total = 0;
ActivitiesList.forEach( line => {
total += parseInt(document.querySelector(`input[name="${line.name}"]:checked`).value);
})
theTotal.textContent = ` total = ${total} `;
}
function GlobalInit()
{
let Cheking = '';
ActivitiesList.forEach( (line,iLine) => {
let
newRow = theTabBody.insertRow(-1),
newCell = newRow.insertCell(0);
newCell.textContent = line.lib;
Cheking = 'checked';
for (let i=0; i<5; i++) {
newCell = newRow.insertCell(i+1); // id="R-${iLine}-${i}"
newCell.innerHTML = `<input type="radio" name="${line.name}" id="R-${iLine}-${i}" value="${i}" ${Cheking}>`
newCell.innerHTML += `<label for="R-${iLine}-${i}">☐</label>`; // not checked
newCell.innerHTML += `<label for="R-${iLine}-${i}">☑</label>`; // checked
newCell.innerHTML += `<label for="R-${iLine}-${i}">✔</label>`; // print checked
Cheking = '';
}
})
theTotal.textContent = ' total = 0 ';
}
GlobalInit();
theForm.onchange = CaculSum;
theForm.onreset = function() {
theTotal.textContent = ` total = 0 `;
};
PrintButton.onclick = function(){
window.print();
}
body {
font :16px Arial, Helvetica, sans-serif;
}
h3 {
text-align:center;
color:blue;
}
table {
border-collapse: collapse;
margin: 10px 20px;
}
td {
border: 1px solid grey;
padding: 2px 10px;
}
td {
text-align: center;
min-width: 100px;
max-width: 100px;
}
tr td:first-child {
text-align: left;
min-width: 350px;
max-width: 350px;
}
thead td {
font-weight: bold;
background: lavender
}
#the-Sum {
display: inline-block;
margin: 10px 20px;
padding: 10px;
font-weight: bold;
color: crimson;
border: 1px solid grey;
width: 350px;
}
tbody tr:nth-child(even) {
background: lavender
}
#the-Form > label,
#the-Form > input {
background-color:lavender;
color: black;
margin: 5px 10px;
padding: 5px;
font-weight: bold
}
#the-Form > input {
border: 1px solid grey;
width : 300px;
}
#the-Form tbody label { font-size: 22px; }
input[type=radio] { display:none }
input[type=radio] + label { display:inline; color: grey; }
input[type=radio] + label + label { display:none; color:black; }
input[type=radio]:checked + label { display:none }
input[type=radio]:checked + label + label { display:inline }
input[type=radio] + label + label + label { display:none }
<style media="print">
h3, output { color: black; }
h4, button { display: none; }
table { margin: 10px 0; }
tr td:first-child { min-width: 400px; max-width: 400px; }
tbody tr:nth-child(even) { background: none }
#the-Form tbody label { display:none }
input[type=radio]:checked + label + label + label { display:inline !important }
</style>
<h3> Dr ABC<br> MYLocation</h3>
<h4> We are interested in knowing wheather you are having any difficulty with the
activities listed below <u> because of your upper limb problem </u>
for which you are seeking attention. <br>Provide an answer for each activity
Today, <u>do you or would you </u> have any difficulty with: (check boxes below
on each line)
</h4>
<form id="the-Form">
<label for="patientName"> Enter Patient's Name :</label>
<input type="text" id="patientName" value="" />
<table id="Activities-Table">
<thead>
<tr>
<td>ACTIVITIES </td>
<td>Extreme difficulty (0)</td>
<td>Quite a bit of difficulty (1)</td>
<td>Moderate Difficulty (2)</td>
<td>Little Difficulty (3)</td>
<td>No Difficulty (4)</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
<output id="the-Sum"></output>
<!-- <button type="submit">submit</button> -->
<button type="reset">reset</button>
<button id="bt-Print">Print or Save as pdf</button>
</form>

var total = 0;
var hi = getelementById("hi");
hi.onclick = function(){
total = 0;
}
Try adding id's to all of your check boxes and add an onclick function to them that adds up the total
https://jsfiddle.net/Lvejzuac/

Ajax updatet score from input value

I am trying to create a form with three "Likert Scale" input.
For all three input field there is totaly 10 points that can be devided on the three "Likert scale" inputs. When this score is equal to 0, the submit button should be enabled and the form can be submitted. The number of points left should be updated without having the page reloade using ajax, so the user will know how many points that are left.
I have not really figured out how to do this but I have added some pseudo code, to explain this.
$(document).ready(function(e) {
// Initial score/points
var score = 10;
document.getElementById("score").innerHTML = score;
$('input:radio').click(function() {
e.preventDefault();
// update score, based on clicked alternative value
new_score = score - alternative_clicked;
if new_score < 0:
var error = "You do not have enoght points left, choose a smaler number";
document.getElementById("error").innerHTML = error;
else if new_score === 0:
// enable submit button
else :
// update score with new_score value
});
$('input:submit').click(function() {
e.preventDefault();
// send to google spreadsheet
});
});
table.striped-columns tbody td:nth-of-type(even),
table.striped-columns th:nth-of-type(even) {
background: blue;
}
table.striped-columns tbody td:nth-of-type(odd),
table.striped-columns th:nth-of-type(odd) {
background: #fafafa;
}
table.border {
border-collapse: collapse;
border-spacing: 0;
}
table.border td,
table.border th {
border: 1px solid grey;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- This should be updated -->
<p><b>TOTAL POINTS LEFT:</b> <span id="score"></span></p>
<form method="post" action="/echo/html/" ajax="true">
<table class="striped-columns border">
<thead>
<tr>
<th>TEST</th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alternativ 1</td>
<td><input type="radio" value="1" name="alternativ1" /></td>
<td><input type="radio" value="2" name="alternativ1" /></td>
<td><input type="radio" value="3" name="alternativ1" /></td>
<td><input type="radio" value="4" name="alternativ1" /></td>
<td><input type="radio" value="5" name="alternativ1" /></td>
</tr>
<tr>
<td>Alternativ 2</td>
<td><input type="radio" value="1" name="alternativ2" /></td>
<td><input type="radio" value="2" name="alternativ2" /></td>
<td><input type="radio" value="3" name="alternativ2" /></td>
<td><input type="radio" value="4" name="alternativ2" /></td>
<td><input type="radio" value="5" name="alternativ2" /></td>
</tr>
<tr>
<td>Alternativ 3</td>
<td><input type="radio" value="1" name="alternativ3" /></td>
<td><input type="radio" value="2" name="alternativ3" /></td>
<td><input type="radio" value="3" name="alternativ3" /></td>
<td><input type="radio" value="4" name="alternativ3" /></td>
<td><input type="radio" value="5" name="alternativ3" /></td>
</tr>
</tbody>
</table>
<br>
<input type="submit" value="Submit" />
</form>

Here is a one way to do that:
(sorry for bad indentation in the snippet. Seems it is a bit buggy feature in SO)
I use eval() so I wouldn't need to write many if/else statements.
However - eval() isn’t evil, just misunderstood.
$(document).ready(function(e) {
// Initial score/points
var score = 10;
var a1 = 0, a2 = 0, a3 = 0;
var inputs = $('input');
inputs.each(function(i) {
$(this).on('click', function() {
var clicked = $(this).closest('tr').get(0).id;
score += eval(clicked)
score -= eval(clicked + " = " + $(this).val());
$("#score").html(score);
if (score == 0 && (a1 != 0 && a2 != 0 && a3 != 0)) {
$("#submit").prop("disabled", false);
} else {
$("#submit").prop("disabled", true);
}
})
})
});
table.striped-columns tbody td:nth-of-type(even),
table.striped-columns th:nth-of-type(even) {
background: blue;
}
table.striped-columns tbody td:nth-of-type(odd),
table.striped-columns th:nth-of-type(odd) {
background: #fafafa;
}
table.border {
border-collapse: collapse;
border-spacing: 0;
}
table.border td,
table.border th {
border: 1px solid grey;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<form method="post" action="/echo/html/" ajax="true">
<table class="striped-columns border">
<thead>
<tr>
<th>TEST</th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
</thead>
<tbody>
<tr id="a1">
<td>Alternativ 1</td>
<td><input type="radio" value="1" name="alternativ1" /></td>
<td><input type="radio" value="2" name="alternativ1" /></td>
<td><input type="radio" value="3" name="alternativ1" /></td>
<td><input type="radio" value="4" name="alternativ1" /></td>
<td><input type="radio" value="5" name="alternativ1" /></td>
</tr>
<tr id="a2">
<td>Alternativ 2</td>
<td><input type="radio" value="1" name="alternativ2" /></td>
<td><input type="radio" value="2" name="alternativ2" /></td>
<td><input type="radio" value="3" name="alternativ2" /></td>
<td><input type="radio" value="4" name="alternativ2" /></td>
<td><input type="radio" value="5" name="alternativ2" /></td>
</tr>
<tr id="a3">
<td>Alternativ 3</td>
<td><input type="radio" value="1" name="alternativ3" /></td>
<td><input type="radio" value="2" name="alternativ3" /></td>
<td><input type="radio" value="3" name="alternativ3" /></td>
<td><input type="radio" value="4" name="alternativ3" /></td>
<td><input type="radio" value="5" name="alternativ3" /></td>
</tr>
</tbody>
</table>
<br>
<input id="submit" type="submit" value="Submit" disabled/>
<div id="score"> 10
</div>
</form>

how can i pass js data to php? [duplicate]

This question already has answers here:
How do I pass variables and data from PHP to JavaScript?
(19 answers)
Closed 8 years ago.
<html>
<head>
<script type="text/javascript">
function tally()
{
var scrt_var = 10;
var Dpoint, Ipoint, Hpoint, Apoint;
var party_Score = ['Dpoint', 'Ipoint', 'Hpoint', 'Apoint'];
var D, I, H, A;
var value_Point;
var type_Choice;
var tag_Choice;
var inputs = document.getElementsByTagName("input"),
iLength = inputs.length,
D = I = H = A = 0;
for (i = 0; i < iLength; i++) if (inputs[i].checked)
{
value_Point = parseInt(inputs[i].value);
if (inputs[i].name.search('D') > -1){ D += value_Point; }
if (inputs[i].name.search('I') > -1){ I += value_Point; }
if (inputs[i].name.search('H') > -1){ H += value_Point; }
if (inputs[i].name.search('A') > -1){ A += value_Point; }
} //check here !!!~
Dpoint = D; // converting this to php data so i can send it by email
Ipoint = I; // converting this to php data so i can send it by email
Hpoint = H; // converting this to php data so i can send it by email
Apoint = A; // converting this to php data so i can send it by email
document.addEventListener("DOMContentLoaded", function(event) {
document.getElementById('D').style.width = D + 'px';
document.getElementById('I').style.width = I + 'px';
document.getElementById('H').style.width = H + 'px';
document.getElementById('A').style.width = A + 'px';
});
location.href = "test3.html?D="+ Dpoint + "&I=" + Ipoint + "&H=" + Hpoint + "&A=" + Apoint;
}
// ]]>
</script>
</head>
<form method="post" action="data.php">
<table>
<tr>
<td>question1</td>
<td><input type="radio" name="D1" value="1"> 1 </td>
<td><input type="radio" name="D1" value="2"> 2 </td>
<td><input type="radio" name="D1" value="3"> 3 </td>
<td><input type="radio" name="D1" value="4"> 4 </td>
<td><input type="radio" name="D1" value="5"> 5 </td>
<td><input type="radio" name="D1" value="6"> 6 </td>
<td><input type="radio" name="D1" value="7"> 7 </td>
<td><input type="radio" name="D1" value="8"> 8 </td>
<td><input type="radio" name="D1" value="9"> 9 </td>
<td><input type="radio" name="D1" value="10"> 10 </td>
</tr>
<tr>
<td>question2</td>
<td><input type="radio" name="I1" value="1"> 1 </td>
<td><input type="radio" name="I1" value="2"> 2 </td>
<td><input type="radio" name="I1" value="3"> 3 </td>
<td><input type="radio" name="I1" value="4"> 4 </td>
<td><input type="radio" name="I1" value="5"> 5 </td>
<td><input type="radio" name="I1" value="6"> 6 </td>
<td><input type="radio" name="I1" value="7"> 7 </td>
<td><input type="radio" name="I1" value="8"> 8 </td>
<td><input type="radio" name="I1" value="9"> 9 </td>
<td><input type="radio" name="I1" value="10"> 10 </td>
</tr>
<tr>
<td>question3</td>
<td><input type="radio" name="H1" value="1"> 1 </td>
<td><input type="radio" name="H1" value="2"> 2 </td>
<td><input type="radio" name="H1" value="3"> 3 </td>
<td><input type="radio" name="H1" value="4"> 4 </td>
<td><input type="radio" name="H1" value="5"> 5 </td>
<td><input type="radio" name="H1" value="6"> 6 </td>
<td><input type="radio" name="H1" value="7"> 7 </td>
<td><input type="radio" name="H1" value="8"> 8 </td>
<td><input type="radio" name="H1" value="9"> 9 </td>
<td><input type="radio" name="H1" value="10"> 10 </td>
</tr>
<tr>
<td><label> question4 </label></td>
<td><input type="radio" name="A1" value="1"> 1 </td>
<td><input type="radio" name="A1" value="2"> 2 </td>
<td><input type="radio" name="A1" value="3"> 3 </td>
<td><input type="radio" name="A1" value="4"> 4 </td>
<td><input type="radio" name="A1" value="5"> 5 </td>
<td><input type="radio" name="A1" value="6"> 6 </td>
<td><input type="radio" name="A1" value="7"> 7 </td>
<td><input type="radio" name="A1" value="8"> 8 </td>
<td><input type="radio" name="A1" value="9"> 9 </td>
<td><input type="radio" name="A1" value="10"> 10 </td>
</tr><!-- 14 -->
<tr>
<td><label> question5 </label></td>
<td><input type="radio" name="D2" value="1"> 1 </td>
<td><input type="radio" name="D2" value="2"> 2 </td>
<td><input type="radio" name="D2" value="3"> 3 </td>
<td><input type="radio" name="D2" value="4"> 4 </td>
<td><input type="radio" name="D2" value="5"> 5 </td>
<td><input type="radio" name="D2" value="6"> 6 </td>
<td><input type="radio" name="D2" value="7"> 7 </td>
<td><input type="radio" name="D2" value="8"> 8 </td>
<td><input type="radio" name="D2" value="9"> 9 </td>
<td><input type="radio" name="D2" value="10"> 10 </td>
</tr><!-- 15 -->
<tr>
<tr>
<td colspan=2>
<div align="center"><input type="button" value="Score my test" onclick="javascript:tally()"></div>
</td>
</tr>
</table>
</form>
</html>
how do i pass js data to php ? i need those js data converting to php and send it by email how can i do that ? i have being finding solution all over the net , still i cant get it can any one teach me how ? or if cant is there a way to loop all radio value on html using php ? i am new to both code.

You can pass in multiple ways.
in a way how you tried, so by document.location (redirection) - will be in $_GET in php
by AJAX (for example using jQuery) - will be in $_POST (or $_GET) in php
by html form - will be in $_POST (may be in $_GET, but shouldn't)
To answer to your question I would have to direct you to various answers:
learn about data collecting from HTML and using AJAX (for example use jQuery here)
learn about request access in PHP $_GET, $_POST, $_REQUEST
learn about mail sending in php (google for "mail php"), there are basic (not perfect) snippets for that

Categories