How to get multiple radio button to group in angularjs - javascript

I am new to angularjs. I want to update set of roles for one user I have add my code and schema, below this code i cannot able to get object what i like please review the below code.
HTML :
<section class="surround" style="overflow-y:scroll;min-height: 600px;">
<form name="userrole" ng-submit="addRoles();" novalidate>
<div class="row">
<div class="col-xs-4">
<div class="row form-group">
<div class="col-xs-offset-5">
<h4>Create User</h4>
</div>
</div>
<div class="row form-group" ng-class="{ 'has-error': submitted && branchForm.name.$error.required }">
<div class="col-xs-5 form-label">
<label>Roles name</label>
</div>
<div class="col-xs-6 control">
<input type="text" class="form-control" ng-model="roles.rolename" name="rolename" required="" />
</div>
</div>
<div class="row form-group">
<div class="col-xs-5 form-label">
<label>Status</label>
</div>
<div class="col-xs-6 control">
<select class="form-control" ng-model="roles.status" name="status">
<option value="1">Active</option>
<option value="0">Deleted</option>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-10">
<div class="branch-table">
<table class="table table-bordered">
<colgroup>
<col width="20%">
<col width="20%">
<col width="20%">
<col width="20%">
<col width="20%">
</colgroup>
<thead>
<tr>
<th>Transaction</th>
<th>No Access</th>
<th>Read Only</th>
<th>Read/Write</th>
<th>Full</th>
</tr>
</thead>
<tbody>
<tr>
<td><label for="Accounting"><input type="checkbox" id="Accounting" ng-true-value="Accounting" ng-model="roles.transaction.name">Accounting</label></td>
<td><input type="radio" name="group1" ng-model="roles.transaction.access.noaccess" data-ng-value="true" /></td>
<td><input type="radio" name="group1" ng-model="roles.transaction.access.read_permit" data-ng-value="true" /></td>
<td><input type="radio" name="group1" ng-model="roles.transaction.access.write_permit" data-ng-value="true" /></td>
<td><input type="radio" name="group1" ng-model="roles.transaction.access.full" data-ng-value="true" /></td>
</tr>
<tr>
<td><label for="Accounting"><input type="checkbox" id="Accounting" ng-true-value="Accounting" ng-model="roles.transaction.name">Property</label></td>
<td><input type="radio" name="group2" ng-model="roles.transaction.access.noaccess" data-ng-value="true" /></td>
<td><input type="radio" name="group2" ng-model="roles.transaction.access.read_permit" data-ng-value="true" /></td>
<td><input type="radio" name="group2" ng-model="roles.transaction.access.write_permit" data-ng-value="true" /></td>
<td><input type="radio" name="group2" ng-model="roles.transaction.access.full" data-ng-value="true" /></td>
</tr>
<tr>
<td><label for="Accounting"><input type="checkbox" id="Accounting" ng-true-value="Accounting" ng-model="roles.transaction.name">Contact</label></td>
<td><input type="radio" name="group3" ng-model="roles.transaction.access.noaccess" data-ng-value="true" /></td>
<td><input type="radio" name="group3" ng-model="roles.transaction.access.read_permit" data-ng-value="true" /></td>
<td><input type="radio" name="group3" ng-model="roles.transaction.access.write_permit" data-ng-value="true" /></td>
<td><input type="radio" name="group3" ng-model="roles.transaction.access.full" data-ng-value="true" /></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-4 form-group">
<div class="pull-left">
<button type="submit" class="btn btn-sm btn-primary">Save</button>
<button ng-click="cancel()" class="btn btn-sm btn-default">Cancel</button>
</div>
</div>
</div>
</form>
</section>
When click on save I am getting object like this,
{
"rolesname": "superadmin",
"status": 1,
"transaction": [
{
"name": "property",
"access": {
"noaccess": "true",
}
}
]
}
I am getting only one object at a time.
i want to get object like this,
Object Data:
{
"_id": "ROLE01",
"description": "superadmin",
"status": "active",
"transaction": [
{
"name": "property",
"access": {
"read_permit": "true"
}
},
{
"name": "property",
"access": {
"read_permit": "true"
}
}
{
"name": "property",
"access": {
"read_permit": "true"
}
}
]
}
I am not getting that transaction as three object. How to achive this in angular, I don't know where i am doing worng. Thanks in advances.


You bind the same properties on the same object. In your example, transaction is an object, not an array. Group1 values are overridden by group2 values then by group3 values.
This solves your issue:
<tr>
<td><label for="Accounting"><input type="checkbox" id="Accounting" ng-true-value="Accounting" ng-model="roles.transaction[0].name">Accounting</label></td>
<td><input type="radio" name="group1" ng-model="roles.transaction[0].access.noaccess" data-ng-value="true" /></td>
<td><input type="radio" name="group1" ng-model="roles.transaction[0].access.read_permit" data-ng-value="true" /></td>
<td><input type="radio" name="group1" ng-model="roles.transaction[0].access.write_permit" data-ng-value="true" /></td>
<td><input type="radio" name="group1" ng-model="roles.transaction[0].access.full" data-ng-value="true" /></td>
</tr>
<tr>
<td><label for="Accounting"><input type="checkbox" id="Accounting" ng-true-value="Accounting" ng-model="roles.transaction[1].name">Property</label></td>
<td><input type="radio" name="group2" ng-model="roles.transaction[1].access.noaccess" data-ng-value="true" /></td>
<td><input type="radio" name="group2" ng-model="roles.transaction[1].access.read_permit" data-ng-value="true" /></td>
<td><input type="radio" name="group2" ng-model="roles.transaction[1].access.write_permit" data-ng-value="true" /></td>
<td><input type="radio" name="group2" ng-model="roles.transaction[1].access.full" data-ng-value="true" /></td>
</tr>
<tr>
<td><label for="Accounting"><input type="checkbox" id="Accounting" ng-true-value="Accounting" ng-model="roles.transaction[2].name">Contact</label></td>
<td><input type="radio" name="group3" ng-model="roles.transaction[2].access.noaccess" data-ng-value="true" /></td>
<td><input type="radio" name="group3" ng-model="roles.transaction[2].access.read_permit" data-ng-value="true" /></td>
<td><input type="radio" name="group3" ng-model="roles.transaction[2].access.write_permit" data-ng-value="true" /></td>
<td><input type="radio" name="group3" ng-model="roles.transaction[2].access.full" data-ng-value="true" /></td>
</tr>

Related

How to disable all input when checkbox is checked on load with jquery

I want the input each tr disabled if its checkbox is unchecked - on page load. As I understand, I have to call a function to check if the checkbox was checked. But as my code below, it's not working.
$(function() {
fn_chkBox('.form-check-input'); //see if checked on load
function fn_chkBox() {
if ($(this).is(':checked')) {
$(this).closest("tr").find("input.form-control").prop("disabled", false);
} else {
$(this).closest("tr").find("input.form-control").prop("disabled", true);
}
}
});
$(".form-check-input").change(function() {
if ($(this).is(':checked')) {
$(this).closest("tr").find("input.form-control").prop("disabled", false);
} else { //unchecked
$(this).closest("tr").find("input.form-control").prop("disabled", true);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<th>Day</th>
<th>Fish</th>
<th>Crab</th>
<th>Shrimp</th>
<th>Squid</th>
</tr>
<tr>
<td><label><input type="checkbox" class="form-check-input" name="mon" value="1" checked/> Mon</label></td>
<td><input type="text" class="form-control" name="mon[1]" /></td>
<td><input type="text" class="form-control" name="mon[2]" /></td>
<td><input type="text" class="form-control" name="mon[3]" /></td>
<td><input type="text" class="form-control" name="mon[4]" /></td>
</tr>
<tr>
<td><label><input type="checkbox" class="form-check-input" name="tue" value="1" /> Tue</label></td>
<td><input type="text" class="form-control" name="tue[1]" /></td>
<td><input type="text" class="form-control" name="tue[2]" /></td>
<td><input type="text" class="form-control" name="tue[3]" /></td>
<td><input type="text" class="form-control" name="tue[4]" /></td>
</tr>
<tr>
<td><label><input type="checkbox" class="form-check-input" name="wed" value="1" /> Wed</label></td>
<td><input type="text" class="form-control" name="wed[1]" /></td>
<td><input type="text" class="form-control" name="wed[2]" /></td>
<td><input type="text" class="form-control" name="wed[3]" /></td>
<td><input type="text" class="form-control" name="wed[4]" /></td>
</tr>
</table>
I want all the input in each row tr disabled when load if its checkbox is empty.

You can use the .form-check-input:not(:checked) selector to select all checkboxes that are not checked.
$(function() {
$('.form-check-input:not(:checked)').closest("tr").find("input.form-control").prop("disabled", true);
});
$(".form-check-input").change(function() {
if ($(this).is(':checked')) {
$(this).closest("tr").find("input.form-control").prop("disabled", false);
} else { //unchecked
$(this).closest("tr").find("input.form-control").prop("disabled", true);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<th>Day</th>
<th>Fish</th>
<th>Crab</th>
<th>Shrimp</th>
<th>Squid</th>
</tr>
<tr>
<td><label><input type="checkbox" class="form-check-input" name="mon" value="1" checked/> Mon</label></td>
<td><input type="text" class="form-control" name="mon[1]" /></td>
<td><input type="text" class="form-control" name="mon[2]" /></td>
<td><input type="text" class="form-control" name="mon[3]" /></td>
<td><input type="text" class="form-control" name="mon[4]" /></td>
</tr>
<tr>
<td><label><input type="checkbox" class="form-check-input" name="tue" value="1" /> Tue</label></td>
<td><input type="text" class="form-control" name="tue[1]" /></td>
<td><input type="text" class="form-control" name="tue[2]" /></td>
<td><input type="text" class="form-control" name="tue[3]" /></td>
<td><input type="text" class="form-control" name="tue[4]" /></td>
</tr>
<tr>
<td><label><input type="checkbox" class="form-check-input" name="wed" value="1" /> Wed</label></td>
<td><input type="text" class="form-control" name="wed[1]" /></td>
<td><input type="text" class="form-control" name="wed[2]" /></td>
<td><input type="text" class="form-control" name="wed[3]" /></td>
<td><input type="text" class="form-control" name="wed[4]" /></td>
</tr>
</table>

To do what you require you can simply trigger() your change event handler on the checkboxes when the page loads.
Two other things to note here. Firstly, the logic there can be simplified by providing the inverse checked property state to the prop('disabled') call. Secondly, be careful when placing your event handlers outside document.ready. If you've put the jQuery code in the head of the page you encounter issues with the event not being bound.
With all that said, try this:
jQuery($ => {
$(".form-check-input").on('change', e => {
$(e.target).closest('tr').find('input.form-control').prop('disabled', !e.target.checked);
}).trigger('change');
});
.form-control { width: 50px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<th>Day</th>
<th>Fish</th>
<th>Crab</th>
<th>Shrimp</th>
<th>Squid</th>
</tr>
<tr>
<td><label><input type="checkbox" class="form-check-input" name="mon" value="1" checked/> Mon</label></td>
<td><input type="text" class="form-control" name="mon[1]" /></td>
<td><input type="text" class="form-control" name="mon[2]" /></td>
<td><input type="text" class="form-control" name="mon[3]" /></td>
<td><input type="text" class="form-control" name="mon[4]" /></td>
</tr>
<tr>
<td><label><input type="checkbox" class="form-check-input" name="tue" value="1" /> Tue</label></td>
<td><input type="text" class="form-control" name="tue[1]" /></td>
<td><input type="text" class="form-control" name="tue[2]" /></td>
<td><input type="text" class="form-control" name="tue[3]" /></td>
<td><input type="text" class="form-control" name="tue[4]" /></td>
</tr>
<tr>
<td><label><input type="checkbox" class="form-check-input" name="wed" value="1" /> Wed</label></td>
<td><input type="text" class="form-control" name="wed[1]" /></td>
<td><input type="text" class="form-control" name="wed[2]" /></td>
<td><input type="text" class="form-control" name="wed[3]" /></td>
<td><input type="text" class="form-control" name="wed[4]" /></td>
</tr>
</table>

You can leverage your existing function and just trigger a 'change' event on load. You can also shorten your function by setting disabled to !$(this).is(':checked')
$(function() {
$('input[type=checkbox]').trigger('change')
});
$(".form-check-input").change(function() {
$(this).closest("tr").find("input.form-control").prop("disabled", !$(this).is(':checked'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<th>Day</th>
<th>Fish</th>
<th>Crab</th>
<th>Shrimp</th>
<th>Squid</th>
</tr>
<tr>
<td><label><input type="checkbox" class="form-check-input" name="mon" value="1" checked/> Mon</label></td>
<td><input type="text" class="form-control" name="mon[1]" /></td>
<td><input type="text" class="form-control" name="mon[2]" /></td>
<td><input type="text" class="form-control" name="mon[3]" /></td>
<td><input type="text" class="form-control" name="mon[4]" /></td>
</tr>
<tr>
<td><label><input type="checkbox" class="form-check-input" name="tue" value="1" /> Tue</label></td>
<td><input type="text" class="form-control" name="tue[1]" /></td>
<td><input type="text" class="form-control" name="tue[2]" /></td>
<td><input type="text" class="form-control" name="tue[3]" /></td>
<td><input type="text" class="form-control" name="tue[4]" /></td>
</tr>
<tr>
<td><label><input type="checkbox" class="form-check-input" name="wed" value="1" /> Wed</label></td>
<td><input type="text" class="form-control" name="wed[1]" /></td>
<td><input type="text" class="form-control" name="wed[2]" /></td>
<td><input type="text" class="form-control" name="wed[3]" /></td>
<td><input type="text" class="form-control" name="wed[4]" /></td>
</tr>
</table>

Get individual value from radio button on array use JQuery

now im doing some PHP project combine with JQuery for radio button. Im new for JQuery code. now i making array for radio button. i want to get individual value when i click one of the radio button.
here is the code that i trying. before that. i make a sample on this link https://repl.it/#ferdinandgush/get-value-radio-button. just press RUN button on the top then you able to test it.
html
<table class="tg">
<thead>
<tr>
<th class="tg-qh0q">Item</th>
<th class="tg-qh0q">Price</th>
<th class="tg-qh0q">Deal</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tg-0lax">Book</td>
<td class="tg-0lax">$ 10 <input type="hidden" name="itemprice" value="10"></td>
<td class="tg-0lax">
<input class="radioDeal" type="radio" name="deal[12][0]" value="yes">yes
<input class="radioDeal" type="radio" name="deal[12][0]" value="no" >No
</td>
</tr>
<tr>
<td class="tg-0lax">Pencil</td>
<td class="tg-0lax">$ 5 <input type="hidden" name="itemprice" value="5"></td>
<td class="tg-0lax">
<input class="radioDeal" type="radio" name="deal[12][1]" value="yes">yes
<input class="radioDeal" type="radio" name="deal[12][1]" value="no" >No
</td>
</tr>
<tr>
<td class="tg-0lax">Pen</td>
<td class="tg-0lax">$ 8 <input type="hidden" name="itemprice" value="8"></td>
<td class="tg-0lax">
<input class="radioDeal" type="radio" name="deal[12][3]" value="yes">yes
<input class="radioDeal" type="radio" name="deal[12][3]" value="no" >No
</td>
</tr>
<tr>
<td class="tg-0lax">spidol</td>
<td class="tg-0lax">$ 15 <input type="hidden" name="itemprice" value="15"></td>
<td class="tg-0lax">
<input class="radioDeal" type="radio" name="deal[12][4]" value="yes">yes
<input class="radioDeal" type="radio" name="deal[12][4]" value="no" >No
</td>
</tr>
</tbody>
</table>
JS
$(function() {
$('.radioDeal').on('input', function(){
console.log($(this).attr("name"));
var name = $(this).attr("name");
console.log($('input[name="+ name +"]:checked').val());
});
});
so what im focusing is, i able to get individual attribute name when i click on of the radio button. from that attribute name, i want to get the value. but not work.
do i able to do that?.
please help

You almost have it, you can get the value like this:
var checkedvalue = $('input[name="'+ name +'"]:checked').val();
Working example:
$(function() {
$('.radioDeal').on('input', function(){
var name = $(this).attr("name");
var checkedvalue = $('input[name="'+ name +'"]:checked').val();
console.log(name+' = '+checkedvalue);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tg">
<thead>
<tr>
<th class="tg-qh0q">Item</th>
<th class="tg-qh0q">Price</th>
<th class="tg-qh0q">Deal</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tg-0lax">Book</td>
<td class="tg-0lax">$ 10 <input type="hidden" name="itemprice" value="10"></td>
<td class="tg-0lax">
<input class="radioDeal" type="radio" name="deal[12][0]" value="yes">yes
<input class="radioDeal" type="radio" name="deal[12][0]" value="no" >No
</td>
</tr>
<tr>
<td class="tg-0lax">Pencil</td>
<td class="tg-0lax">$ 5 <input type="hidden" name="itemprice" value="5"></td>
<td class="tg-0lax">
<input class="radioDeal" type="radio" name="deal[12][1]" value="yes">yes
<input class="radioDeal" type="radio" name="deal[12][1]" value="no" >No
</td>
</tr>
<tr>
<td class="tg-0lax">Pen</td>
<td class="tg-0lax">$ 8 <input type="hidden" name="itemprice" value="8"></td>
<td class="tg-0lax">
<input class="radioDeal" type="radio" name="deal[12][3]" value="yes">yes
<input class="radioDeal" type="radio" name="deal[12][3]" value="no" >No
</td>
</tr>
<tr>
<td class="tg-0lax">spidol</td>
<td class="tg-0lax">$ 15 <input type="hidden" name="itemprice" value="15"></td>
<td class="tg-0lax">
<input class="radioDeal" type="radio" name="deal[12][4]" value="yes">yes
<input class="radioDeal" type="radio" name="deal[12][4]" value="no" >No
</td>
</tr>
</tbody>
</table>

Since the change event triggers when state changes from not checked to checked it is therefore the ideal event to use as the this refers to the radio just checked:
$('.radioDeal').on('change', function() {
console.log( `${this.name} = ${this.value}` );
});
DEMO
$(function() {
$('.radioDeal').on('change', function() {
console.log( `${this.name} = ${this.value}` );
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tg">
<thead>
<tr>
<th class="tg-qh0q">Item</th>
<th class="tg-qh0q">Price</th>
<th class="tg-qh0q">Deal</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tg-0lax">Book</td>
<td class="tg-0lax">$ 10 <input type="hidden" name="itemprice" value="10"></td>
<td class="tg-0lax">
<input class="radioDeal" type="radio" name="deal[12][0]" value="yes">yes
<input class="radioDeal" type="radio" name="deal[12][0]" value="no" >No
</td>
</tr>
<tr>
<td class="tg-0lax">Pencil</td>
<td class="tg-0lax">$ 5 <input type="hidden" name="itemprice" value="5"></td>
<td class="tg-0lax">
<input class="radioDeal" type="radio" name="deal[12][1]" value="yes">yes
<input class="radioDeal" type="radio" name="deal[12][1]" value="no" >No
</td>
</tr>
<tr>
<td class="tg-0lax">Pen</td>
<td class="tg-0lax">$ 8 <input type="hidden" name="itemprice" value="8"></td>
<td class="tg-0lax">
<input class="radioDeal" type="radio" name="deal[12][3]" value="yes">yes
<input class="radioDeal" type="radio" name="deal[12][3]" value="no" >No
</td>
</tr>
<tr>
<td class="tg-0lax">spidol</td>
<td class="tg-0lax">$ 15 <input type="hidden" name="itemprice" value="15"></td>
<td class="tg-0lax">
<input class="radioDeal" type="radio" name="deal[12][4]" value="yes">yes
<input class="radioDeal" type="radio" name="deal[12][4]" value="no" >No
</td>
</tr>
</tbody>
</table>

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

Can't Add Up Radio Button Values with jQuery

I'm trying to add up all the values of the radio buttons selected on Submit button press. It sometimes changes the 0 to a 200, but it isn't adding correctly. I'm not quite sure what is going on with this one, since the total amount sometimes changes, but isn't accurate.
See https://jsfiddle.net/amgodv58/
<form name="form1" method="POST" onsubmit="calculateTotal()">
<table>
<thead>
<tr class="headings">
<td class="blank"> </td>
<th class="heading" scope="col">A little of the time</th>
<th class="heading" scope="col">Some of the time</th>
<th class="heading" scope="col">Good part of the time</th>
<th class="heading" scope="col">Most of the time</th>
</tr><!-- /.headings -->
</thead> <tbody>
<tr class="question">
<td class="prompt"><span class="num">1. </span>I feel more nervous and anxious than usual.</td>
<td class="response"><input type="radio" class="amount" name="q1" value="1" /></td>
<td class="response"><input type="radio" class="amount" name="q1" value="2" /></td>
<td class="response"><input type="radio" class="amount" name="q1" value="3" /></td>
<td class="response"><input type="radio" class="amount" name="q1" value="4" /></td>
</tr><!-- /.question -->
<tr class="question">
<td class="prompt"><span class="num">2. </span>I feel afraid for no reason at all.</td>
<td class="response"><input type="radio" class="amount" name="q2" value="1" /></td>
<td class="response"><input type="radio" class="amount" name="q2" value="2" /></td>
<td class="response"><input type="radio" class="amount" name="q2" value="3" /></td>
<td class="response"><input type="radio" class="amount" name="q2" value="4" /></td>
</tr><!-- /.question -->
<tr class="question">
<td class="prompt"><span class="num">3. </span>I get upset easily or feel panicky.</td>
<td class="response"><input type="radio" class="amount" name="q3" value="1" /></td>
<td class="response"><input type="radio" class="amount" name="q3" value="2" /></td>
<td class="response"><input type="radio" class="amount" name="q3" value="3" /></td>
<td class="response"><input type="radio" class="amount" name="q3" value="4" /></td>
</tr><!-- /.question -->
<tr class="question">
<td class="prompt"><span class="num">4. </span>I feel like I’m falling apart and going to pieces.</td>
<td class="response"><input type="radio" class="amount" name="q4" value="1" /></td>
<td class="response"><input type="radio" class="amount" name="q4" value="2" /></td>
<td class="response"><input type="radio" class="amount" name="q4" value="3" /></td>
<td class="response"><input type="radio" class="amount" name="q4" value="4" /></td>
</tr><!-- /.question -->
<tr class="question">
<td class="prompt"><span class="num">5. </span>I feel that everything is all right and nothing bad will happen.</td>
<td class="response"><input type="radio" class="amount" name="q5" value="4" /></td>
<td class="response"><input type="radio" class="amount" name="q5" value="3" /></td>
<td class="response"><input type="radio" class="amount" name="q5" value="2" /></td>
<td class="response"><input type="radio" class="amount" name="q5" value="1" /></td>
</tr><!-- /.question -->
<tr class="question">
<td class="prompt"><span class="num">6. </span>My arms and legs shake and tremble.</td>
<td class="response"><input type="radio" class="amount" name="q6" value="1" /></td>
<td class="response"><input type="radio" class="amount" name="q6" value="2" /></td>
<td class="response"><input type="radio" class="amount" name="q6" value="3" /></td>
<td class="response"><input type="radio" class="amount" name="q6" value="4" /></td>
</tr><!-- /.question -->
<tr class="question">
<td class="prompt"><span class="num">7. </span>I am bothered by headaches neck and back pain.</td>
<td class="response"><input type="radio" class="amount" name="q7" value="1" /></td>
<td class="response"><input type="radio" class="amount" name="q7" value="2" /></td>
<td class="response"><input type="radio" class="amount" name="q7" value="3" /></td>
<td class="response"><input type="radio" class="amount" name="q7" value="4" /></td>
</tr><!-- /.question -->
<tr class="question">
<td class="prompt"><span class="num">8. </span>I feel weak and get tired easily.</td>
<td class="response"><input type="radio" class="amount" name="q8" value="1" /></td>
<td class="response"><input type="radio" class="amount" name="q8" value="2" /></td>
<td class="response"><input type="radio" class="amount" name="q8" value="3" /></td>
<td class="response"><input type="radio" class="amount" name="q8" value="4" /></td>
</tr><!-- /.question -->
<tr class="question">
<td class="prompt"><span class="num">9. </span>I feel calm and can sit still easily.</td>
<td class="response"><input type="radio" class="amount" name="q9" value="4" /></td>
<td class="response"><input type="radio" class="amount" name="q9" value="3" /></td>
<td class="response"><input type="radio" class="amount" name="q9" value="2" /></td>
<td class="response"><input type="radio" class="amount" name="q9" value="1" /></td>
</tr><!-- /.question -->
<tr class="question">
<td class="prompt"><span class="num">10. </span>I can feel my heart beating fast.</td>
<td class="response"><input type="radio" class="amount" name="q10" value="1" /></td>
<td class="response"><input type="radio" class="amount" name="q10" value="2" /></td>
<td class="response"><input type="radio" class="amount" name="q10" value="3" /></td>
<td class="response"><input type="radio" class="amount" name="q10" value="4" /></td>
</tr><!-- /.question -->
<tr class="question">
<td class="prompt"><span class="num">11. </span>I am bothered by dizzy spells.</td>
<td class="response"><input type="radio" class="amount" name="q11" value="1" /></td>
<td class="response"><input type="radio" class="amount" name="q11" value="2" /></td>
<td class="response"><input type="radio" class="amount" name="q11" value="3" /></td>
<td class="response"><input type="radio" class="amount" name="q11" value="4" /></td>
</tr><!-- /.question -->
<tr class="question">
<td class="prompt"><span class="num">12. </span>I have fainting spells or feel like it.</td>
<td class="response"><input type="radio" class="amount" name="q12" value="1" /></td>
<td class="response"><input type="radio" class="amount" name="q12" value="2" /></td>
<td class="response"><input type="radio" class="amount" name="q12" value="3" /></td>
<td class="response"><input type="radio" class="amount" name="q12" value="4" /></td>
</tr><!-- /.question -->
<tr class="question">
<td class="prompt"><span class="num">13. </span>I can breathe in and out easily.</td>
<td class="response"><input type="radio" class="amount" name="q13" value="4" /></td>
<td class="response"><input type="radio" class="amount" name="q13" value="3" /></td>
<td class="response"><input type="radio" class="amount" name="q13" value="2" /></td>
<td class="response"><input type="radio" class="amount" name="q13" value="1" /></td>
</tr><!-- /.question -->
<tr class="question">
<td class="prompt"><span class="num">14. </span>I get numbness and tingling in my fingers and toes.</td>
<td class="response"><input type="radio" class="amount" name="q14" value="1" /></td>
<td class="response"><input type="radio" class="amount" name="q14" value="2" /></td>
<td class="response"><input type="radio" class="amount" name="q14" value="3" /></td>
<td class="response"><input type="radio" class="amount" name="q14" value="4" /></td>
</tr><!-- /.question -->
<tr class="question">
<td class="prompt"><span class="num">15. </span>I am bothered by stomach aches or indigestion.</td>
<td class="response"><input type="radio" class="amount" name="q15" value="1" /></td>
<td class="response"><input type="radio" class="amount" name="q15" value="2" /></td>
<td class="response"><input type="radio" class="amount" name="q15" value="3" /></td>
<td class="response"><input type="radio" class="amount" name="q15" value="4" /></td>
</tr><!-- /.question -->
<tr class="question">
<td class="prompt"><span class="num">16. </span>I have to empty my bladder often.</td>
<td class="response"><input type="radio" class="amount" name="q16" value="1" /></td>
<td class="response"><input type="radio" class="amount" name="q16" value="2" /></td>
<td class="response"><input type="radio" class="amount" name="q16" value="3" /></td>
<td class="response"><input type="radio" class="amount" name="q16" value="4" /></td>
</tr><!-- /.question -->
<tr class="question">
<td class="prompt"><span class="num">17. </span>My hands are usually dry and warm.</td>
<td class="response"><input type="radio" class="amount" name="q17" value="4" /></td>
<td class="response"><input type="radio" class="amount" name="q17" value="3" /></td>
<td class="response"><input type="radio" class="amount" name="q17" value="2" /></td>
<td class="response"><input type="radio" class="amount" name="q17" value="1" /></td>
</tr><!-- /.question -->
<tr class="question">
<td class="prompt"><span class="num">18. </span>My face gets hot and blushes.</td>
<td class="response"><input type="radio" class="amount" name="q18" value="1" /></td>
<td class="response"><input type="radio" class="amount" name="q18" value="2" /></td>
<td class="response"><input type="radio" class="amount" name="q18" value="3" /></td>
<td class="response"><input type="radio" class="amount" name="q18" value="4" /></td>
</tr><!-- /.question -->
<tr class="question">
<td class="prompt"><span class="num">19. </span>I fall asleep easily and get a good night’s rest.</td>
<td class="response"><input type="radio" class="amount" name="q19" value="4" /></td>
<td class="response"><input type="radio" class="amount" name="q19" value="3" /></td>
<td class="response"><input type="radio" class="amount" name="q19" value="2" /></td>
<td class="response"><input type="radio" class="amount" name="q19" value="1" /></td>
</tr><!-- /.question -->
<tr class="question">
<td class="prompt"><span class="num">20. </span>I have nightmares.</td>
<td class="response"><input type="radio" class="amount" name="q20" value="1" /></td>
<td class="response"><input type="radio" class="amount" name="q20" value="2" /></td>
<td class="response"><input type="radio" class="amount" name="q20" value="3" /></td>
<td class="response"><input type="radio" class="amount" name="q20" value="4" /></td>
</tr><!-- /.question -->
</tbody> <tfoot>
<tr>
<td class="submit" colspan="5">
<div class="submit">
<button class="submit-button" name="submit">Submit</button>
<div class="clear"></div>
</div>
</td>
<td><span class="total">0</span></td>
</tr>
</tfoot>
</table>
</form>
<input class="total" name="total" type="text"/>
JavaScript
$( ".submit-button" ).click(function() {
calculateTotal($(this).closest('table'));
});
function calculateTotal($tab) {
var sum = 0;
$tab.find('input').each(function() {
if(!isNaN(this.value) && this.value.length!=0) {
sum += parseFloat(this.value);
}
});
$tab.find(".total").html(sum.toFixed(2));
}

Here's some simplified code. You should be checking to see if the radio buttons have been checked off.
http://jsbin.com/ribupakiwa/2/edit?js,output
Only going to show the JS here.
$( ".submit-button" ).click(function() {
event.preventDefault();
calculateTotal($(this).closest('table'));
});
function calculateTotal($tab) {
var sum = 0;
$tab.find('input:checked').each(function() {
sum += parseInt($(this).val()) || 0;
});
$(".total").html(sum.toFixed(2));
}
parseInt($(this).val()) || 0 is a fancy way of saving against NaN. NaN || 0 is 0 since NaN is a falsy value.

validate group radio button

i have designed page
that contains 60 questions and each question have 5 radio button.
i want to validate all of question; in other mean all of them had to answer.
and if one of them is not answered tell the number of it yo the user.
how i can validate it with javascript
here is some example of code
<div >
<tr id="trr1" onmouseover="changecolor('tr1','trr1')" onmouseout="backcolor('tr1','trr1')" >
<td colspan="5">1. question 1</td>
</tr>
<tr id="tr1" onmouseover="changecolor('tr1','trr1')" onmouseout="backcolor('tr1','trr1')">
<td>totaly agree <input id="s1" name="s1" type="radio" value="2" /></td>
<td>agree <input id="s1" name="s1" type="radio" value="1" /></td>
<td>none <input id="s1" name="s1" type="radio" value="0" /></td>
<td>dis-agree <input id="s1" name="s1" type="radio" value="-1" /></td>
<td>totaly dis-agree <input id="s1" name="s1" type="radio" value="-2" /></td>
</tr>
<tr id="trr2" onmouseover="changecolor('tr2','trr2')" onmouseout="backcolor('tr2','trr2')" >
<td colspan="5">2. question 2</td>
</tr>
<tr id="tr2" onmouseover="changecolor('tr2','trr2')" onmouseout="backcolor('tr2','trr2')">
<td>totaly agree <input id="s2" name="s2" type="radio" value="2" /></td>
<td>agree <input id="s2" name="s2" type="radio" value="1" /></td>
<td>none <input id="s2" name="s2" type="radio" value="0" /></td>
<td>dis-agree<input id="s2" name="s2" type="radio" value="-1" /></td>
<td>totaly dis-agree <input id="s2" name="s2" type="radio" value="-2" /></td>
</tr>
</div>

Consider adding jQuery and using the jQuery validation plugin. It's a much more convenient way to deal with this type of tasks. Forcing to choose one option will be as simple as:
radioGroup: {required :true}
Overriding message with error to inform user about not picking anything:
jQuery.extend(jQuery.validator.messages, {
required: "This field is required."
});

Categories