This question already has an answer here:
Text box appear on radio button check
(1 answer)
Closed 6 years ago.
I have a form that has multiple groups of radio buttons. When I choose a radio button, it gives output on the same page.
I want to add a radio button for Other. When Other is selected a textbox should display so the user can enter text.
The user input in the textbox will be displayed on the same sequence.
$(document).ready(function() {
$("input").click(function() {
$("#result").html(function() {
var str = '';
$(":checked").each(function() {
str += $(this).val()+ " ";
});
return str;
});
});
});
<table width="100%">
<tr>
<td><input type="radio" name="RadioGroup1" id="a1" value="Accomplished" /><label for="accomplished">Accomplished</label></td>
<td><input type="radio" name="RadioGroup1" id="a2" value="Exciting" /><label for="exciting">Exciting</label></td>
<td><input type="radio" name="RadioGroup1" id="a3" value="Dynamic" /><label for="dynamic">Dynamic</label></td>
<td><input type="radio" name="RadioGroup1" id="a4" value="Holistic" /><label for="holistic">Holistic</label></td>
<td><input type="radio" name="RadioGroup1" id="a5" value="Animated" /><label for="animated">Animated</label></td>
</tr>
</table>
<table width="100%">
<tr>
<td><input type="radio" name="RadioGroup2" id="b1" value="CEO" /><label for="ceo">CEO</label></td>
<td><input type="radio" name="RadioGroup2" id="b2" value="Account Manager" /><label for="a-manager">Account Manager</label></td>
<td><input type="radio" name="RadioGroup2" id="b3" value="Customer Service" /><label for="c-services">Customer Service</label></td>
<td><input type="radio" name="RadioGroup2" id="b4" value="Project Manager" /><label for="p-manager">Project Manager</label></td>
</tr></table>
$("input").click(function() {
$("#result").html(function() {
var str = '';
$(":checked").each(function() {
str += $(this).val()+ " ";
});
return str;
});
});
});
You can add one <input type="text"> in your other <td> and turn it visible whenever user selects the other <radio> button. I have it done using CSS. I have made a change in HTML for this: added other class to the <td>.
td.other div.text{
display: none;
}
td.other input[type=radio]:checked+label + div.text{
display:block;
}
Whenever user selects 'other', it shows the <input type="text"> to enter the new value. User can see the result in realtime while the user is pressing the keys.
Here is the snippet:
console.clear();
function inputSelected() {
$("#result").html(function() {
var str = '';
$(":checked").each(function() {
str += $(this).val() + " ";
});
return str;
});
}
$(document).ready(function() {
$("input[type=radio]").click(inputSelected);
$("td.other").click(function() {
$(this).find('input[type=text]').focus();
});
$("td.other input[type=text]").keyup(function(e) {
var value = $(this).val().trim();
if (value.length <= 0) {
value = 'Other';
}
$(this).parent().siblings("input[type=radio]").val(value);
$(this).parent().siblings("label").html(value);
inputSelected();
})
});
//$(".other label").click();
td.other div.text {
display: none;
}
td.other input[type=radio]:checked+label + div.text {
display: block;
}
td.other input[type=radio]:checked+label {
display: none;
}
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Jquery: Add new radio field for selection">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<table width="100%">
<tr>
<td>
<input type="radio" name="RadioGroup1" id="a1" value="Accomplished" />
<label for="a1">Accomplished</label>
</td>
<td>
<input type="radio" name="RadioGroup1" id="a2" value="Exciting" />
<label for="a2">Exciting</label>
</td>
<td>
<input type="radio" name="RadioGroup1" id="a3" value="Dynamic" />
<label for="a3">Dynamic</label>
</td>
<td>
<input type="radio" name="RadioGroup1" id="a4" value="Holistic" />
<label for="a4">Holistic</label>
</td>
<td>
<input type="radio" name="RadioGroup1" id="a5" value="Animated" />
<label for="a5">Animated</label>
</td>
<td class="other">
<input type="radio" name="RadioGroup1" id="a6" value="Other" />
<label for="a6">Other</label>
<div class="text">
<input type="text" id="other1" value="Other">
</div>
</td>
</tr>
</table>
<table width="100%">
<tr>
<td>
<input type="radio" name="RadioGroup2" id="b1" value="CEO" />
<label for="b1">CEO</label>
</td>
<td>
<input type="radio" name="RadioGroup2" id="b2" value="Account Manager" />
<label for="b2">Account Manager</label>
</td>
<td>
<input type="radio" name="RadioGroup2" id="b3" value="Customer Service" />
<label for="b3">Customer Service</label>
</td>
<td>
<input type="radio" name="RadioGroup2" id="b4" value="Project Manager" />
<label for="b4">Project Manager</label>
</td>
<td class="other">
<input type="radio" name="RadioGroup2" id="b5" value="Other">
<label for="b5">Other</label>
</input>
<div class="text">
<input type="text" id="other2" value="Other">
</div>
</td>
</tr>
</table>
<div id="result">
</div>
</body>
</html>
In this snippet, I have updated the for in <label> to refer to the <radio>.
Related
I have a form with a table and when the user click the radio button No the content of the following cells in that row should be visible. And when clicking Yes, the content should be hidden again. There is no difference now. It works outside the table.
I have tried style="display:table-cell" in a div-tag and in the td-tag - no success.
Picture of the form for the user
The error message in DevTools is: TypeError: Cannot read properties of null (reading 'checked')
at yesnoCheck
Picture of error message in DevTools
function yesnoCheck(var1, var2) {
if (document.getElementById(var1).checked) {
document.getElementById(var2).style.display = 'none';
} else document.getElementById(var2).style.display = 'block';
}
th {
background-color: #dddddd
}
<h1>Hide input fields based on radio button selection</h1>
<h3>Frame</h3>
Propellers OK?<br />
<input type="radio" name="yesno" id="noCheck" onclick="javascript:yesnoCheck('noCheck', 'ifNo');">Yes
<input type="radio" name="yesno" id="noCheck" onclick="javascript:yesnoCheck('noCheck', 'ifNo');">No<br>
<div id="ifNo" style="display:none">
<input type="checkbox" /> Replaced<br /> Date <input type="date" /><br /> Checked by <input type="text" />
</div>
<br /> Frame arms OK?<br />
<input type="radio" name="framearms" onclick="javascript:yesnoCheck('framearms', 'framearmsDiv');" id="framearms" />Yes
<input type="radio" name="framearms" onclick="javascript:yesnoCheck('framearms', 'framearmsDiv');" id="framearms" />No
<div id="framearmsDiv" style="display:none">
<input type="checkbox" /> Replaced<br /> Date <input type="date" /><br /> Checked by <input type="text" />
</div>
<br /><br />
<form>
<table style="width:100%">
<tr>
<th>What to do</th>
<th>OK</th>
<th>Replaced</th>
<th>Date</th>
<th>Checked by</th>
</tr>
<tr>
<td>The propellers, motors, and aircraft body are intact, and there is no sign for collision or loose or broken structures.</td>
<td><input type="radio" name="aftercheckbodyR" id="aftercheckbodyR" value="Yes" onclick="javascript:yesnoCheck(aftercheckbodyR, aftercheckbodyDiv);" />Yes
<input type="radio" name="aftercheckbodyR" id="aftercheckbodyR" value="No" onclick="javascript:yesnoCheck(aftercheckbodyR, aftercheckbodyDiv);" />No
</td>
<div id="aftercheckbodyDiv" style="display:table-cell">
<td><input type="checkbox" id="aftercheckbodyC" value="Yes" /></td>
</div>
<td><input type="date" id="aftercheckbodyD" /></td>
<td><input type="text" id="aftercheckbodyT" /></td>
</tr>
<tr>
<td>The temperature of the motors is normal and there are no signs of uneven heating.</td>
<td> <input type="radio" name="afterchecktempR" value="Yes" />Yes
<input type="radio" name="afterchecktempR" value="No" />No
</td>
<td><input type="checkbox" id="afterchecktempC" value="Yes" /></td>
<td><input type="date" id="afterchecktempD" /></td>
<td><input type="text" id="afterchecktempT" /></td>
</tr>
</table>
</form>
There is not a element with id 'framearms' that's why it's null
<input type="radio" name="framearms" onclick="javascript:yesnoCheck('framearms', 'framearmsDiv');" id="framearms" />Yes
You need
Valid HTML - you have divs between the cells
Unique IDs.
Consistent use of name, tags, values etc.
No need to prefix everything with javascript:
I strongly recommend you wrap each set in a container, then you do not need inline JS you can just look at the value and use hidden=value==="Yes"
document.getElementById("container").addEventListener("click", function(e) {
const tgt = e.target;
const hide = tgt.value === "Yes";
tgt.closest("div").querySelector("div").hidden = hide; // hide the nested div
})
th {
background-color: #dddddd
}
<div id="container">
<h1>Hide input fields based on radio button selection</h1>
<h2>Frame</h2>
<div>
<h3>Propellers OK?</h3>
<input type="radio" name="yesno" value="Yes">Yes
<input type="radio" name="yesno" value="No">No<br>
<div hidden>
<input type="checkbox" /> Replaced<br /> Date <input type="date" /><br /> Checked by <input type="text" />
</div>
</div>
<div>
<h3>Frame arms OK?</h3>
<input type="radio" name="framearms" value="Yes" />Yes
<input type="radio" name="framearms" value="No" />No
<div id="framearmsDiv" hidden>
<input type="checkbox" /> Replaced<br /> Date <input type="date" /><br /> Checked by <input type="text" />
</div>
</div>
...
</div>
Two issues found in your code
1. <input type="radio" name="aftercheckbodyR" id="aftercheckbodyR" value="Yes" onclick="javascript:yesnoCheck(aftercheckbodyR, aftercheckbodyDiv);" >
Quotes are missing for input field as it should be string - id of control
- <input type="radio" name="aftercheckbodyR" id="aftercheckbodyR" value="Yes" onclick="javascript:yesnoCheck('aftercheckbodyR', 'aftercheckbodyDiv');"
2. In correct HTML - include 'aftercheckbodyDiv' <div> tag inside <td>
<td>
<div id="aftercheckbodyDiv" style="display:table-cell">
<input type="checkbox" id="aftercheckbodyC" value="Yes" />
</div>
</td>
<form id="payments" >
<input type="radio" id="firstpay" name="pay" value="999" >
<label for="firpay">999 €</label>
<input type="radio" id="secondpay" name="pay" value="1599" >
<label for="firpay">1599 €</label>
<input type="radio" id="thirdpay" name="pay" value="2999">
<label for="firpay">2999 €</label>
</form>
So i select 1 input from here and one from below:
<input name="answer" id="answer_1" type="radio" value="0">
</td>
<td>
<input name="answer" id="answer_2" type="radio" value="7">
</td>
<td>
<input name="answer" id="answer_3" type="radio" value="15">
</td>
<td>
<input name="answer" id="answer_4" type="radio" value="24">
</td>
<td>
<input name="answer" id="answer_5" type="radio" value="36">
</td>
<td>
<input name="answer" id="answer_6" type="radio" value="50">
So lets say i select input with id firstpay and when i select other inputs from the second form i wanna get ( 999 / 0 , 7 , 15...) depending on the second input. I want the result to come as alert
Track the values of pay and answer.
Register 'change' event for input, When both values available show the alert. Try the snippet.
const track = {
pay: null,
answer: null,
};
document.querySelectorAll("input").forEach((el) =>
el.addEventListener("change", (e) => {
const type = e.target.name;
const value = e.target.value;
track[type] = value;
if (track.pay !== null && track.answer !== null) {
alert(
`Avg is ${track.pay} / ${track.answer} = ${track.pay / track.answer}`
);
}
})
);
<form id="payments" >
<input type="radio" id="firstpay" name="pay" value="999" >
<label for="firpay">999 €</label>
<input type="radio" id="secondpay" name="pay" value="1599" >
<label for="firpay">1599 €</label>
<input type="radio" id="thirdpay" name="pay" value="2999">
<label for="firpay">2999 €</label>
</form>
<td>
<input name="answer" id="answer_1" type="radio" value="0">
</td>
<td>
<input name="answer" id="answer_2" type="radio" value="7">
</td>
<td>
<input name="answer" id="answer_3" type="radio" value="15">
</td>
<td>
<input name="answer" id="answer_4" type="radio" value="24">
</td>
<td>
<input name="answer" id="answer_5" type="radio" value="36">
</td>
<td>
<input name="answer" id="answer_6" type="radio" value="50">
</td>
I have two tables, table 1 with the fields of webID, project, web, and I use below PHP code(ThinkPHP framework) to get project list:
$project = M('WebProjectList')->where(array('web' => self::$web))->getField('project', true);
table 2 with the fields of userID, issue, web, project and I use below PHP code to get issue list:
$where['web'] = self::$web;
$where['project'] = array('in', $project);
$issue = M('UserIssue')->where($where)->group('issue')->getField('issue',true);
Below code in .js is the multiple-choice/checkbox of both projects and issues that let user choose, when user choose an issue which does not belong to that project, how to reminder user to check again before submitting?
$('.project2').each(function (index) {
var project = result[index].project;
for (var i in project) {
var item = $('input[value="' + project[i] + '"]');
$(this).find(item).attr('checked', 'checked');
}
});
$('.issue2').each(function (index) {
var issue = result[index].issue;
for (var i in issue) {
var item1 = $('input[value="' + issue[i] + '"]');
$(this).find(item1).attr('checked', 'checked');
}
});
And html code as below:
<th>Project</th>
<td>
<div style="width: 800px" class="project2">
<foreach name="projectlist" item="item">
<label style="display: inline-block">
<input type="checkbox" name="project" style="height: 18px;width: 18px" value="{$item}"/>
{$item}
</label>
</foreach>
<input type="checkbox" name="project" style="display: none" value="all" checked>
</div>
</td>
</tr>
<tr>
<th>Issue</th>
<td>
<div style="width: 800px" class="issue2">
<foreach name="issueList" item="item1">
<label style="display: inline-block">
<input type="checkbox" name="issue" style="height: 18px;width: 18px" value="{$item1}"/>
{$item1}
</label>
</foreach>
<input type="checkbox" name="issue" style="display: none" value="all" checked>
</div>
</td>
</tr>
and the actual html from inspect as below:
$('.project2').each(function(index) {
var project = result[index].project;
for (var i in project) {
var item = $('input[value="' + project[i] + '"]');
$(this).find(item).attr('checked', 'checked');
}
});
$('.issue2').each(function(index) {
var issue = result[index].issue;
for (var i in issue) {
var item1 = $('input[value="' + issue[i] + '"]');
$(this).find(item1).attr('checked', 'checked');
}
});
label {
display: inline-block;
}
input[type=checkbox] {
height: 18px;
width: 18px;
}
<table>
<tbody>
<tr>
<th>project</th>
<td>
<div style="width: 800px" class="project2">
<label>
<input type="checkbox" name="project[]" value="crosserver">
crosserver
</label>
<label>
<input type="checkbox" name="project[]" value="dev">
dev
</label>
<label>
<input type="checkbox" name="project[]" value="ceshi">
ceshi
</label>
<label>
<input type="checkbox" name="project[]" value="klfqios">
klfqios
</label>
<label>
<input type="checkbox" name="project[]" value="banshu">
banshu
</label>
<label>
<input type="checkbox" name="project[]" value="tishen">
tishen
</label>
<label>
<input type="checkbox" name="project[]" value="del">
del
</label>
<label>
<input type="checkbox" name="project[]" value="dyb">
dyb
</label>
<label>
<input type="checkbox" name="project[]" value="kuaiwan">
kuaiwan
</label>
<label>
<input type="checkbox" name="project[]" value="ddleios">
ddleios
</label>
<label>
<input type="checkbox" name="project[]" value="ybguios">
ybguios
</label>
<label>
<input type="checkbox" name="project[]" value="lgybios">
lgybios
</label>
<label>
<input type="checkbox" name="project[]" value="leboios">
leboios
</label>
<label>
<input type="checkbox" name="project[]" value="qpcios">
qpcios
</label>
<input type="checkbox" name="project[]" value="all" checked="">
</div>
</td>
</tr>
<tr>
<th>issue</th>
<td>
<div style="width: 800px" class="issue2">
<label>
<input type="checkbox" name="issue[]" value="cjsgios_lg">
cjsgios_lg
</label>
<label>
<input type="checkbox" name="issue[]" value="dev">
dev
</label>
<label>
<input type="checkbox" name="issue[]" value="dyb_msg">
dyb_msg
</label>
<label>
<input type="checkbox" name="issue[]" value="dyb_msgios">
dyb_msgios
</label>
<label>
<input type="checkbox" name="issue[]" value="dyb_testin_android">
dyb_testin_android
</label>
<label>
<input type="checkbox" name="issue[]" value="dyb_wjlgz_android">
dyb_wjlgz_android
</label>
<label>
<input type="checkbox" name="issue[]" value="huixie_banshu">
huixie_banshu
</label>
<label>
<input type="checkbox" name="issue[]" value="kdmsios_jq">
kdmsios_jq
</label>
<label>
<input type="checkbox" name="issue[]" value="kw_msg">
kw_msg
</label>
<label>
<input type="checkbox" name="issue[]" value="unkonwn">
unkonwn
</label>
<label>
<input type="checkbox" name="issue[]" value="wjlgzios_lg">
wjlgzios_lg
</label>
<label>
<input type="checkbox" name="issue[]" value="zgtxios_ll">
zgtxios_ll
</label>
<label>
<input type="checkbox" name="issue[]" value="zqsgios_Runhero">
zqsgios_Runhero
</label>
<label>
<input type="checkbox" name="issue[]" value="{4ff036a1-3254eafe}">
{4ff036a1-3254eafe}
</label>
<input type="checkbox" name="issue[]" value="all" checked="">
</div>
</td>
</tr>
</tbody>
</table>
I have a table for Purchase orders. Each row has a Purchase order number and rate button. On clicking the rate button a popup will open in which the user can give rating and remarks to the vendor of that row. if rating is already given then the popup will show rating and remarks in read-only mode.
But my issue is rate button is working for only first row i.e., rating of only first-row purchase order is showing on clicking any row button.
HTML Code
<table class="table table-hover o_my_status_table quotation_table">
<thead>
<tr class="active">
<th> </th>
<th>Purhase Order</th>
</tr>
</thead>
<t t-foreach="orders" t-as="order">
<tr class="order_lines">
<td><input type="submit" name="rate" id="rate" value="Rate" class="btn btn-primary" /> </td>
<td><a t-attf-id="order_{{order.id}}" class="from-open-link" t-attf-href="#">
<t t-esc="order.name" /></a>
</td>
</tr>
</t>
</table>
Modal Code
<div id="hidden_box" class="modal fade">
<div class="modal-dialog modal-content" style="min-height:200px;max-width:400px;">
<div class="modal-body" id="pop_html">
<input type="hidden" t-att-value="order.name" t-esc="order.name" name="id" invisible="1" />
<div align="center">
<div class="rate">
<t t-if="order.company_rating == False">
<input type="radio" id="star5" name="rate" value="5" />
<label for="star5" title="text">5 stars</label>
<input type="radio" id="star4" name="rate" value="4" />
<label for="star4" title="text">4 stars</label>
<input type="radio" id="star3" name="rate" value="3" />
<label for="star3" title="text">3 stars</label>
<input type="radio" id="star2" name="rate" value="2" />
<label for="star2" title="text">2 stars</label>
<input type="radio" id="star1" name="rate" value="1" />
<label for="star1" title="text">1 star</label>
</t>
<t t-else="">
<t t-if="order.company_rating=='5'">
<input type="radio" id="dstar5" name="rate" value="5" checked="checked" />
</t>
<t t-else="">
<input type="radio" id="dstar5" name="rate" value="5" />
</t>
<label for="star5" title="text">5 stars</label>
<t t-if="order.company_rating=='4'">
<input type="radio" id="dstar4" name="rate" value="4" checked="checked" />
</t>
<t t-else="">
<input type="radio" id="dstar4" name="rate" value="4" />
</t>
<label for="star4" title="text">4 stars</label>
<t t-if="order.company_rating=='3'">
<input type="radio" id="dstar3" name="rate" value="3" checked="checked" />
</t>
<t t-else="">
<input type="radio" id="dstar3" name="rate" value="3" />
</t>
<label for="star3" title="text">3 stars</label>
<t t-if="order.company_rating=='2'">
<input type="radio" id="dstar2" name="rate" value="2" checked="checked" />
</t>
<t t-else="">
<input type="radio" id="dstar2" name="rate" value="2" />
</t>
<label for="star2" title="text">2 stars</label>
<t t-if="order.company_rating=='1'">
<input type="radio" id="dstar1" name="rate" value="1" checked="checked" />
</t>
<t t-else="">
<input type="radio" id="dstar1" name="rate" value="1" />
</t>
<label for="star1" title="text">1 star</label>
</t>
</div>
</div>
</div>
<br />
<t t-if="order.company_remarks">
<input type="text" name="remarks" t-att-value="order.company_remarks" id="remarks" />
</t>
<t t-else="">
<input type="text" name="remarks" id="remarks" value="" class="form-control text-left" style="margin-top:20px;margin-left:10px;" />
</t>
<t t-if="order.company_rating == False">
<input type="submit" name="button_id" value="Rate" id="rate_submit" class="btn btn-primary" />
</t>
</div>
<style type="text/css">
.rate {
margin: 0;
padding: 0;
}
.rate {
float: left;
height: 46px;
padding: 0 10px;
}
.rate:not(:checked)>input {
position: absolute;
top: -9999px;
}
.rate:not(:checked)>label {
float: right;
width: 1em;
overflow: hidden;
white-space: nowrap;
cursor: pointer;
font-size: 30px;
color: #ccc;
}
.rate:not(:checked)>label:before {
content: '★ ';
}
.rate>input:checked~label {
color: #ffc700;
}
.rate:not(:checked)>label:hover,
.rate:not(:checked)>label:hover~label {
color: #deb217;
}
.rate>input:checked+label:hover,
.rate>input:checked+label:hover~label,
.rate>input:checked~label:hover,
.rate>input:checked~label:hover~label,
.rate>label:hover~input:checked~label {
color: #c59b08;
}
</style>
Javascript
<script type="text/javascript">
document.getElementById("remarks").defaultValue = "";
$(".btn").on('click', function () {
$('#hidden_box').modal('show');
});
</script>
I know the button would not work like this as written in js. Kindly help me with this.
The jQuery selector $(".btn") only works for the first element with that class.
If you want to trigger your script for clicks on every row, you need to get all the relevant elements another way. I would suggest querySelectorAll(), using something like this:
<script type="text/javascript">
var buttons = querySelectorAll("input.btn")
buttons.forEach(element => {
element.addEventListener('click', () => {
// using vanilla JS
var el = querySelector("#hidden_box")
el.classList.toggle("show"); // you would need a CSS class of "show" to make the modal visible
// or using your original jQuery
$('#hidden_box').modal('show');
})
});
</script>
I have a dynamic table the user add's rows to by clicking the Add row button. In the row i have a button 'Select Scope' that opens a new window full of checkbox's I'm trying to get all of the selected checkbox's values to post to a text input in the dynamic table from the parent page. Dynamic Table PicSelect Scope Pic I know that this is possible just using javascript and I feel like I am on the right track from everything that I have read. For whatever reason though it's not passing the checkbox values back to the text input.
Parent Page Code
<h2>Please fill in the information below</h2>
<form action="pmUnitCreate.php" method="post">
<p>Click the Add button to add a new row. Click the Delete button to Delete last row.</p>
<input type="button" id="btnAdd" class="button-add" onClick="addRow('myTable')" value="Add"/>
<input type="button" id="btnDelete" class="button-delete" onClick="deleteRow('myTable')" value="Delete"/>
<br>
<table id="myTable" class="form">
<tr id="heading">
<th><b><font size="4">Job Number</font></b></th>
<th><b><font size="4">Unit Number</font></b></th>
<th><b><font size="4">Job Code</font></b></th>
<th><b><font size="4">Model Number</font></b></th>
<th><b><font size="4">Scope</font></b></th>
</tr>
<tr id="tableRow">
<td>
<input type="text" name="JobNumber[]" value="<?php echo $JobNumber;?>" readonly>
</td>
<td>
<input type="text" name="UnitID[]" value="<?php echo $JobNumber;?>-01" readonly>
</td>
<td>
<select name="JobCode[]" style="background-color:#FFE68C" required>
<option></option>
<option>F</option>
<option>FS</option>
<option>PD</option>
</select>
</td>
<td>
<input type="text" name="ModelNumber[]" style="background-color:#FFE68C" required>
</td>
<td>
<button onclick="ScopeFunction()">Select Scope</button>
<input type"text" name="Scope[]" style="background-color:#FFE68C">
</td>
</tr>
</table>
<script>
function incrementUnitId(unitId) {
var arr = unitId.split('-');
if (arr.length === 1) {return;} // The unit id is not valid;
var number = parseInt(arr[1]) + 1;
return arr[0] + '-' + (number < 10 ? 0 : '') + number;
}
function addRow() {
var row = document.getElementById("tableRow"); // find row to copy
var table = document.getElementById("myTable"); // find table to append to
var clone = row.cloneNode(true); // copy children too
row.id = "oldRow"; // We want to take the last value inserted
clone.cells[1].childNodes[1].value = incrementUnitId(clone.cells[1].childNodes[1].value)
table.appendChild(clone); // add new row to end of table
}
function deleteRow() {
document.getElementById("myTable").deleteRow(-1);
}
var popup;
function SelectScope() {
window.open("http://fisenusa.net/pm/pmSelectScope.php", "_blank", "width=550,height=875");
popup.focus();
}
</script>
EDITED Popup Window Code
<h1>Select Scope</h1>
<h3>Select all that apply</h3>
<form name="childForm" id="updateParent();">
<li><input type="checkbox" name="S1" value="100OA"/><font size="4">100OA</font>
<input type="checkbox" name="S2" value="BTank"/><font size="4">BTank</font>
<input type="checkbox" name="S3" value="WSEcon"/><font size="4">WSEcon</font>
<input type="checkbox" name="S4" value="NetPkg"/><font size="4">NetPkg</font>
<input type="checkbox" name="S5" value="CstmCtrl"/><font size="4">CstmCtrl</font>
<br><br>
<li><input type="checkbox" name="S6" value="CstmRef"/><font size="4">CstmRef</font>
<input type="checkbox" name="S7" value="CstmSM"/><font size="4">CstmSM</font>
<input type="checkbox" name="S8" value="CstmHV"/><font size="4">CstmHV</font>
<input type="checkbox" name="S9" value="CPCTrl"/><font size="4">CPCtrl</font>
<input type="checkbox" name="S10" value="DesiHW"/><font size="4">DesiHW</font>
<br><br>
<li><input type="checkbox" name="S11" value="DigScroll"/><font size="4">DigScroll</font>
<input type="checkbox" name="S12" value="DFGas"/><font size="4">DFGas</font>
<input type="checkbox" name="S13" value="DWall"/><font size="4">DWall</font>
<input type="checkbox" name="S14" value="MZ-DD"/><font size="4">MZ-DD</font>
<input type="checkbox" name="S15" value="DPP"/><font size="4">DPP</font>
<input type="checkbox" name="S16" value="Encl"/><font size="4">Encl</font>
<br><br>
<li><input type="checkbox" name="S17" value="PlateHX"/><font size="4">PlateHX</font>
<input type="checkbox" name="S18" value="ERW"/><font size="4">ERW</font>
<input type="checkbox" name="S19" value="ERWModule"/><font size="4">ERWModule</font>
<input type="checkbox" name="S20" value="ERVMod"/><font size="4">ERVMod </font>
<input type="checkbox" name="S21" value="EvapBP"/><font size="4">EvapBP</font>
<br><br>
<li><input type="checkbox" name="S22" value="PreEvap"/><font size="4">PreEvap</font>
<input type="checkbox" name="S23" value="XP"/><font size="4">XP</font>
<input type="checkbox" name="S24" value="Extended"/><font size="4">Extend</font>
<input type="checkbox" name="S25" value="FanWall"/><font size="4">FanWall</font>
<input type="checkbox" name="S26" value="FillStat"/><font size="4">FillStat</font>
<input type="checkbox" name="S27" value="FFilt"/><font size="4">FFilt</font>
<br><br>
<li><input type="checkbox" name="S28" value="PFilt"/><font size="4">PFilt</font>
<input type="checkbox" name="S29" value="CarbFilt"/><font size="4">CarbFilt</font>
<input type="checkbox" name="S30" value="CustFilt"/><font size="4">CustFilt </font>
<input type="checkbox" name="S31" value="MGH(H)"/><font size="4">MGH(H)</font>
<input type="checkbox" name="S32" value="GHeat"/><font size="4">GHeat</font>
<br><br>
<li><input type="checkbox" name="S33" value="HighStatic"/><font size="4">HighStatic</font>
<input type="checkbox" name="S34" value="HGBP"/><font size="4">HGBP</font>
<input type="checkbox" name="S35" value="HGRH"/><font size="4">HGRH</font>
<input type="checkbox" name="S36" value="HPConv"/><font size="4">HPConv</font>
<input type="checkbox" name="S37" value="GFHumid"/><font size="4">GFHumid</font>
<br><br>
<li><input type="checkbox" name="S38" value="TOHumid"/><font size="4">TOHumid</font>
<input type="checkbox" name="S39" value="MHGRH"/><font size="4">MHGRH</font>
<input type="checkbox" name="S40" value="LowAF"/><font size="4">LowAF</font>
<input type="checkbox" name="S41" value="LowAFSF"/><font size="4">LowAFSF</font>
<input type="checkbox" name="S42" value="LowAmbient"/><font size="4">LowAmbient</font>
<br><br>
<li><input type="checkbox" name="S43" value="MEHeat(R)"/><font size="4">MEHeat(R)</font>
<input type="checkbox" name="S44" value="MEHeat(I)"/><font size="4">MEHeat(I)</font>
<input type="checkbox" name="S45" value="MGH(R)"/><font size="4">MGH(R)</font>
<input type="checkbox" name="S46" value="MGH(H)"/><font size="4">MGH(H)</font>
<input type="checkbox" name="S47" value="MtrRR"/><font size="4">MtrRR</font>
<br><br>
<li><input type="checkbox" name="S48" value="MotorGM"/><font size="4">MotorGM</font>
<input type="checkbox" name="S49" value="MZ-Mod"/><font size="4">MZ-Mod</font>
<input type="checkbox" name="S50" value="NatConv"/><font size="4">NatConv</font>
<input type="checkbox" name="S51" value="OAFMS"/><font size="4">OAFMS</font>
<input type="checkbox" name="S52" value="OSMotor"/><font size="4">OSMotor</font>
<br><br>
<li><input type="checkbox" name="S53" value="MZ-VAV"/><font size="4">MZ-VAV</font>
<input type="checkbox" name="S54" value="Mon"/><font size="4">Mon</font>
<input type="checkbox" name="S55" value="PumpPkg"/><font size="4">PumpPkg</font>
<input type="checkbox" name="S56" value="PipePkg"/><font size="4">PipePkg</font>
<input type="checkbox" name="S57" value="ServLite"/><font size="4">ServLite</font>
<br><br>
<li><input type="checkbox" name="S58" value="SparkRes"/><font size="4">SparkRes</font>
<input type="checkbox" name="S59" value="SSLube"/><font size="4">SSLube</font>
<input type="checkbox" name="S60" value="UVLights"/><font size="4">UVLights</font>
<input type="checkbox" name="S61" value="VSComp"/><font size="4">VSComp</font>
<br><br>
<li><input type="checkbox" name="S62" value="LCVAV"/><font size="4">LCVAV</font>
<input type="checkbox" name="S63" value="XFVAV"/><font size="4">XFVAV</font>
<input type="checkbox" name="S64" value="WCCond"/><font size="4">WCCond</font>
<input type="checkbox" name="S65" value="WSHPConv"/><font size="4">WSHPConv</font>
<input type="checkbox" name="S66" value="3RConv"/><font size="4">3RConv</font>
<br><br>
<li><input type="checkbox" name="S67" value="WiringGM"/><font size="4">WiringGM</font>
<input type="checkbox" name="S68" value="XFan"/><font size="4">XFan</font>
<input type="checkbox" name="S69" value="RFan"/><font size="4">RFan</font>
<input type="checkbox" name="S70" value="SFan"/><font size="4">SFan</font>
<input type="checkbox" name="S71" value="OAHood"/><font size="4">OAHood</font>
<br><br>
<li><input type="checkbox" name="S72" value="XAHood"/><font size="4">XAHood</font>
<input type="checkbox" name="S73" value="XALouver"/><font size="4">XALouver</font>
<input type="checkbox" name="S74" value="OALouver"/><font size="4">OALouver</font>
<input type="checkbox" name="S75" value="SteamCoil"/><font size="4">SteamCoil</font>
<input type="checkbox" name="S76" value="HWCoil"/><font size="4">HWCoil</font>
<br><br>
<li><input type="checkbox" name="S77" value="CHWCoil"/><font size="4">CHWCoil</font>
<input type="checkbox" name="S78" value="CondCoil"/><font size="4">CondCoil</font>
<input type="checkbox" name="S79" value="DXCoil"/><font size="4">DXCoil</font>
<input type="checkbox" name="S80" value="F&BP"/><font size="4">F&BP</font>
<input type="checkbox" name="S81" value="Xfrmr"/><font size="4">Xfrmr</font>
<br><br>
<li><input type="checkbox" name="S82" value="WCCond"/><font size="4">WCCond</font>
<input type="checkbox" name="S83" value="PLFrHX"/><font size="4">PlFrHX</li></font>
<br>
<input type="submit" value="Submit" />
</form>
<script>
function updateParent() {
s = "";
for (i = 0; i < 6; i++)
{
chk = eval("self.document.childForm.t" + i);
if (chk.checked)
s += chk.value + ", ";
}
opener.document.parentForm.toppings.value = s;
self.close();
}
</script>