Develop Reference

Use Dropdown List to Update Pricing Table

I have a pricing table which contains some variables that depend on a dropdown list selection. The JSFIDDLE shows the desired outcome.
The desired outcome is dependable on the drop-down selection. As a selection is picked, then the following changes should take place in the table:
The "Item Cost" should display the price selected.
The "Total" price should be multiplied by the "Qty." to display the total shipping cost.
The grand "Total" should be the sum of the total column that includes Product + Shipping Costs.
Here's the dropdown options:
<div class="input-group full-width">
<span class="input-group-addon main-color hidden-sm hidden-xs">$</span>
<select id="shippingmethod" class="selectpicker form-control shipping-method" name="shippingmethod" aria-label="Shipping Method" tabindex="">
<option value="" selected="">Selet a Shipping Method</option>
<option value="2.95">US Mail - $2.95</option>
<option value="3.50">Priority Mail - $3.50</option>
<option value="4.67">Fedex - $4.67</option>
</select>
</div>
The table is as follows:
<table id="product-list">
<thead>
<tr>
<th class="text-left">Item</th>
<th class="text-center">Qty.</th>
<th class="text-center">Item Cost</th>
<th class="text-center">Tax</th>
<th class="text-right">Total</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="5" class="pt5"></td>
</tr>
<tr>
<td>Product Name</td>
<td class="qty">2</td>
<td class="item-cost">$10.00</td>
<td class="tax">$0.68</td>
<td class="total">$10.68</td>
</tr>
<tr>
<td colspan="5" class="pt5"></td>
</tr>
<tr>
<td>Shipping Cost</td>
<td class="qty red">1</td>
<td class="item-cost red">$2.95</td>
<td class="tax">$0.00</td>
<td class="total red">$5.90</td>
</tr>
<tr>
<td colspan="5" class="pt5"></td>
</tr>
<tr id="product-totals">
<td colspan="4"></td>
<td class="total red">$13.02</td>
</tr>
</tbody>
</table>
I would appreciate any help I can get regarding this scenario. Thanks.

If you want changes on the client-side to update some content, you'll need to use javascript/jQuery .change() function on the element you want to observe.
See here for more details
in your case, this would be:
$("#shippingmethod").change(function() {
// start by fetching the value of the selected option
var shippingPrice = $(this).val();
// do some other stuff to get other values, calculate, and display results
});
That other stuff you'll need to do will include using .html() function to change the values displayed in some elements of your table, like so: $("#shippingprice").html("$" + shippingPrice);
Note that the .html() func can also fetch a value form an element:
// Get the value displayed inside the id="shippingqty" td
var shippingQty = $("#shippingqty").html();
Please note however that this will provide you with a String type var, you'll need to use parseFloat(shippingQty); to make some maths with it.
Edit: As of your comment, there's a quick (and somewhat dirty) fiddle for you to examine (Note the comments in the html). Regarding javascript, best place to start id probably the javascript basics # MDN.
$("#shippingmethod").change(function() {
// Get the value from dropdown
var shippingPrice = $(this).val()
// Get the value from id="shippingqty" td content
var shippingQty = $("#shippingqty").html();
// get the value from id="producttotal" td content
var prodPriceWithSymbol = $("#producttotal").html();
// remove the $ symbol from prodPriceWithSymbol text
var productTotal = prodPriceWithSymbol.substring(1, prodPriceWithSymbol.length);
// strings to floats, multiply, round to 2 decimals
var shippingTotal = (parseFloat(shippingPrice) * parseFloat(shippingQty)).toFixed(2);
// strings to float, add, round to 2 decimals
var grandTotal = (parseFloat(shippingTotal) + parseFloat(productTotal)).toFixed(2);
// Set id="shippingprice" td content
$("#shippingprice").html("$" + shippingPrice);
// set id="shippingtotal" td content
$("#shippingtotal").html("$" + shippingTotal);
// set id='grandtotal" td content
$("#grandtotal").html("$" + grandTotal);
});
.pr8 {
padding-right: 8px;
}
.red {
font-weight: 600!important;
color: #ff0000;
}
.spacer,
.help-block {
clear: both;
padding: 0 7px;
}
.fw6 {
font-weight: 600;
}
.full-width {
width: 100%;
}
table#product-list {
width: 100%;
}
table#product-list thead tr th {
background-color: #fff !important;
font-weight: 500;
color: #0080a6 !important;
border-bottom: solid 2px #0080a6;
padding: 5px 2px 8px 2px;
}
table#product-list tbody {
background-color: #fff;
color: #333 !important;
}
table#product-list tbody tr td:first-child {
font-weight: 500;
text-align: left !important;
}
table#product-list tbody tr td {
font-weight: 300;
text-align: right !important;
}
table#product-list tbody tr td:last-child {
font-weight: 600;
text-align: right !important;
}
table#product-list tbody tr#product-totals {
clear: both;
padding-top: 10px;
margin-top: 10px;
}
table#product-list tbody tr#product-totals td:last-child {
border-top: dotted 1px #0080a6;
padding: 4px 0;
text-align: left;
font-weight: 600;
border-bottom: solid 1px #0080a6;
}
table#product-list tbody tr td.qty {
text-align: center !important;
}
table#product-list tbody tr td.item-cost {
padding: 0 4px 0 0;
}
table#product-list tbody tr td.tax {
margin: 0 5px 0 3px;
}
table#product-list tbody tr td.total {
margin: 0 0 0 5px;
}
<!-- Added jQuery loading -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="ReviewShippingAndPayment" name="ReviewShippingAndPayment" method="post" action="/Distributor/Shop/Product-List">
<div class="container col-lg-12 col-md-12 col-sm-12 col-xs-12 p0">
<div class="pl8 bbcustom p0">
<h2 class="page-header"><i class="fa fa-cube pr8 hidden-sm hidden-xs"></i>Shipping Method Selection</h2>
<p>
The desired outcome is driven by the "<span class="fw6">Select a Shipping Method</span>" dropdown.<br /><br />When a shipping method is selected, then the "Item Cost" should be multiplied by the "Qty." and displayed in the Shipping Cost Total
column.<br /><br />Such selection should also update the final cost that include the Product Cost + Total Shipping.
</p>
<span class="spacer"></span>
</div>
<div class="spacer"></div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 p0">
<div class="shipping-method-container">
<div class="field-wrapper">
<div class="input-group full-width">
<span class="input-group-addon main-color hidden-sm hidden-xs">$</span>
<select id="shippingmethod" class="selectpicker form-control shipping-method" name="shippingmethod" aria-label="Shipping Method" tabindex="">
<!-- Added value="0" here -->
<option value="0" selected="">Selet a Shipping Method</option>
<option value="2.95">US Mail - $2.95</option>
<option value="3.50">Priority Mail - $3.50</option>
<option value="4.67">Fedex - $4.67</option>
</select>
</div>
</div>
<span class="help-block"></span>
</div>
<div class="clearfix"></div>
<hr style="margim:0px;padding:0;" />
<div class="clearfix"></div>
<table id="product-list">
<thead>
<tr>
<th class="text-left">Item</th>
<th class="text-center">Qty.</th>
<th class="text-center">Item Cost</th>
<th class="text-center">Tax</th>
<th class="text-right">Total</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="5" class="pt5"></td>
</tr>
<tr>
<td>Product Name</td>
<td class="qty">1</td>
<td class="item-cost">$10.00</td>
<td class="tax">$0.68</td>
<td class="total" id="producttotal">$10.68</td>
</tr>
<tr>
<td colspan="5" class="pt5"></td>
</tr>
<tr>
<td>Shipping Cost</td>
<!-- Added id here -->
<td class="qty red" id="shippingqty">1</td>
<!-- Added id here -->
<td class="item-cost red" id="shippingprice">$2.95</td>
<!-- May add an id to be accessed if needed -->
<td class="tax">$0.00</td>
<!-- Added id here -->
<td class="total red" id="shippingtotal">$5.90</td>
</tr>
<tr>
<td colspan="5" class="pt5"></td>
</tr>
<tr id="product-totals">
<td colspan="4"></td>
<!-- Added id here -->
<td class="total red" id="grandtotal">$13.02</td>
</tr>
</tbody>
</table>
</div>
</div>
</form>

Button Add will generate new Textarea

Is there possible button "Add" will generate new textarea in form? I've searching for whole day but couldn't find any logic to make "Add" function that generate new textarea.
h1,h2,h3,h4,h5,p,table {font-family: Calibri;}
.content {
margin: 0 auto;
width: 75%;
margin-top: 15px;
}
table.addbutton {
border: solid black 1px;
width: 100%;
height: auto;
}
td,th,tr {
border: solid black 1px;
text-align: center;
}
textarea {
width: 100%;
margin: 0;
overflow: hidden
}
<div class="content">
<table class="addbutton">
<form action="" method="post">
<!-- Title -->
<tr style="color:White;">
<th bgcolor="#82BBE8">Fixed Title A</th>
<th bgcolor="#82BBE8">Fixed Title B</th>
<th bgcolor="#82BBE8">Fixed Title C</th>
<th bgcolor="black">Fixed Title D</th>
<th bgcolor="#82BBE8">Fixed Title E</th>
<th bgcolor="black">Fixed Title F</th>
<th bgcolor="#82BBE8">Fixed Title G</th>
</tr>
<!-- Title end -->
<tr style="color:White;">
<td rowspan="2" width="auto" bgcolor="#82BBE8">Title Example</td>
<td style="color:Black">
<p align="right"><input type="button" alt="AddColumn" value="Add"></p>
<br>
<h5>When we click "Add" button will show new textarea</h5>
<textarea placeholder="Please input text here.."></textarea>
</td>
<td style="color:Black">
Example 1
</td>
<td style="color:Black">
Example 2
</td>
<td style="color:Black">
Example 3
</td>
<td style="color:Black">
Example 4
</td>
<td style="color:Black">
Example 5
</td>
</tr>
<tr>
<td>
<br>
<p align="right"><input type="button" alt="AddColumn" value="Add"></p>
<h5>When we click "Add" button will show new textarea</h5>
<textarea placeholder="Please input text here.."></textarea>
</td>
<td style="color:Black">
Example 5
</td>
<td style="color:Black">
Example 6
</td>
<td style="color:Black">
Example 7
</td>
<td style="color:Black">
Example 8
</td>
<td style="color:Black">
Example 9
</td>
</tr>
</table>
</form>
</div>
</body>

Here's a sample to generate text-area
function myFunction() {
var x = document.createElement("FORM");
x.setAttribute("id", "myForm");
document.body.appendChild(x);
var y = document.createElement("TEXTAREA");
document.getElementById("myForm").appendChild(y);
}
<button onclick="myFunction()">Add</button>

AngularJS increment id value of items in nested repeater

I have the following code in which there are questions and choices and I need the choices to have incremented id values.
However, I need the incrementation to restart each time there is a new question. Most of the examples I've found so far increment for all (e.g. using $index). But I've looked at several articles here on SO such as this one and not getting the results that I need:
What I need is this:
Question 1
Choice10 (the first numerical value is the Id of the question,
Choice11 the second numerical value should be the incremented id)
Choice12
Question 2
Choice20
Choice21
Choice22
Choice23
The html code looks like this:
<table summary="" style="border: none; width: 100%; background: none;" id="rptQuestions">
<tbody>
<tr style="width: 100%;" ng-repeat-start="q in questions track by $index">
...Question details here...
</tr>
<tr>
<td class="Bold_10" colspan="4">
<table summary="" style="border: none; background: none">
<tbody>
<tr ng-repeat-start="c in choices" ng-if="c.QuestionId==q.QuestionId">
<td style="width: 2em;">X</td>
<td>
<input type="text" id="inLetter{{c.QuestionId}}{{ value?? }}" ng-model="c.Letter" style="width: 2em;" /></td>
<td style="text-align: left;">
<input type="text" id="inChoice{{c.QuestionId}}{{ value?? }}" ng-model="c.Choice" style="width: 60em;" /> <input type="hidden" id="inChoiceId{{c.QuestionId}}{{ value?? }}" ng-value="{{c.Id}}" /></td>
</tr>
<tr ng-repeat-end ng-if="c.QuestionId==null"><td colspan="3"></td></tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

<table summary="" style="border: none; width: 100%; background: none;" id="rptQuestions">
<tbody>
<tr style="width: 100%;" ng-repeat-start="q in questions">
...Question details here...
</tr>
<tr ng-repeat-end="">
<td class="Bold_10" colspan="4">
<table summary="" style="border: none; background: none">
<tbody>
<tr ng-repeat-start="c in choices" ng-if="c.QuestionId==q.QuestionId">
<td style="width: 2em;">X</td>
<td>
<input type="text" id="inLetter{{$parent.$index}}{{$index}}" ng-model="c.Letter" style="width: 2em;" /></td>
<td style="text-align: left;">
<input type="text" id="inChoice{{$parent.$index}}{{$index}}" ng-model="c.Choice" style="width: 60em;" /> <input type="hidden" id="inChoiceId{{$parent.$index}}{{$index}}" ng-value="{{c.Id}}" /></td>
</tr>
<tr ng-repeat-end ng-if="c.QuestionId==null"><td colspan="3"></td></tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Each ng-repeat has its own index and you can access the index from the nested loop. However be aware that with your implementation the id inChoice111 might be misleading.
Question 1.11 == Question 11.1

display 3 table rows and hide remaining rows

Am trying to shorten the table.I have to display only first 3 rows and remaining are hidden.and at the bottom of the table thers is a link to display remaining rows.How it is possible
code
$.ajax({
url: currentUrl,
cache: false
}).done(function (report) {
var testhistbl =
'<br><table width="680px" id="report" > <tbody id="mytbody"><tr style="display: table-row;"><th valign="center">User</th><th valign="center" >Test Name</th><th valign="center">VM</th><th valign="center">Browsers</th><th valign="center">Result</th><th id="headerid"></th></tr>';
recentreport.forEach(function (test) {
testhistbl += '<tr class="odd"><td >' + email + '</td><td>' +
test.names + ' </td><td >' + test.os + '</td><td >' +
result.browser + '</td><td >' + test.replace('Test ', '') +
' </td> <td><div class="arrow" onclick="expandRow();"></div></td></tr><tr style="display: none;" ><td style="background-color: #C0C0C0;color:black;" colspan="5">' +
test.passfail +
' </td><td style="background-color: #C0C0C0;color:white;" ></td></tr>';
});
})
testhistbl +=
'<tr id="more"><td >Show More</td> </tr></tbody></table>';
$('#testhistyTbl').html(testhistbl);
showMore(report.length);
});
function showMore(len) {
var $table = $('table').find('tbody'); // tbody containing all the rows
var numRows = $('.odd').length;
if (len > '3') {
$("#more").show();
} else {
$("#more").hide();
}
$('#more').click(function () {
});
}
i don’t know whatto perform inside the more.click function.
Please look at table mytable
here i only want to display first 3 rows and while clicking show more link i have to display the remaining rows also

Here is a JavaScript Code for you:
function DisplayOnlyRows(count){
var i =0;
$('#report tr.odd').each(function(){
if(i >= count){
$(this).hide();
}
i++;
});
}
DisplayOnlyRows(3);
$("#show_more").click(function(){
$("#mytbody tr.odd").not(':visible').show();
$(this).hide(); // To hide the `show_more` button
});
So, DisplayOnlyRows takes count of table rows that should be visible, all the rest rows will be hidden. Also, on show_more button click event we are showing all hidden table rows. That's it.

Here's how a "show more" button could be implemented:
<button>Show more/less</button>
with the JQuery toggle function
$("button").click(function () {
var countrows = 0;
$('#report tr.odd').each(function () {
countrows++;
if (countrows > 3) {
$(this).toggle();
}
})
});
Explanation: with $('#report tr.odd').each(function() you loop through all the rows in the table #report of class odd. When the counter countrows is greater than 3 you change the visibility of the row with toggle().
Snippet:
$("button").click(function() {
var countrows = 0;
$('#report tr.odd').each(function() {
countrows++;
if (countrows > 3) {
$(this).toggle();
}
})
});
body {
font-family: Arial, Helvetica, Sans-Serif;
font-size: 0.8em;
}
#report {
border-collapse: collapse;
}
#report h4 {
margin: 0px;
padding: 0px;
}
#report img {
float: right;
}
#report ul {
margin: 10px 0 10px 40px;
padding: 0px;
}
#report th {
background: #0196AC repeat-x scroll center left;
color: #fff;
padding: 7px 15px;
text-align: left;
}
#report td {
background: #C7DDEE none repeat-x scroll center left;
color: #000;
padding: 7px 15px;
}
#report tr.odd td {
background: #fff url(http://www.jankoatwarpspeed.com/wp-content/uploads/examples/expandable-rows/row_bkg.png) repeat-x scroll center left;
cursor: pointer;
}
#report div.arrow {
background: transparent url(http://www.jankoatwarpspeed.com/wp-content/uploads/examples/expandable-rows/arrows.png) no-repeat scroll 0px -16px;
width: 16px;
height: 16px;
display: block;
}
#report div.up {
background-position: 0px 0px;
}
#report
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="report" width="680px">
<tbody id="mytbody">
<tr style="display: table-row;">
<th valign="center">User</th>
<th valign="center">Test Name</th>
<th valign="center">VM</th>
<th valign="center">Browsers</th>
<th valign="center">Result</th>
<th id="headerid"></th>
</tr>
<tr class="odd">
<td>anju#gmail.com</td>
<td>Purchase</td>
<td>VM-WIN7-64</td>
<td>FF,GC,IE</td>
<td><span class="pass"><b><font color="green">Passed<b></b></font></b></span><b><font color="green"><b> </b>
</font>
</b>
</td>
<td>
<div class="arrow" onclick="expandRow();"></div>
</td>
</tr>
<tr style="display: none;">
<td style="background-color: #C0C0C0;color:black;" colspan="5">Checking Start button: Ok
<br>Selecting Art: Ok
<br>Test <span class="pass"><b><font color="green">Passed<b></b></font></b></span><b><font color="green"><b><br> </b>
</font>
</b>
</td>
<td style="background-color: #C0C0C0;color:white;"></td>
</tr>
<tr class="odd">
<td>anju#gmail.com</td>
<td>Art Test</td>
<td>VM-WIN7-64</td>
<td>FF,GC,IE</td>
<td><span class="pass"><b><font color="green">Passed<b></b></font></b></span><b><font color="green"><b> </b>
</font>
</b>
</td>
<td>
<div class="arrow" onclick="expandRow();"></div>
</td>
</tr>
<tr style="display: none;">
<td style="background-color: #C0C0C0;color:black;" colspan="5">Checking Start button: Ok
<br>Selecting Art: Ok
<br>Test <span class="pass"><b><font color="green">Passed<b></b></font></b></span><b><font color="green"><b><br> </b>
</font>
</b>
</td>
<td style="background-color: #C0C0C0;color:white;"></td>
</tr>
<tr class="odd">
<td>anju#gmail.com</td>
<td>email confirmation</td>
<td>VM-WIN7-64</td>
<td>GC</td>
<td><span class="pass"><b><font color="green">Passed<b></b></font></b></span><b><font color="green"><b> </b>
</font>
</b>
</td>
<td>
<div class="arrow" onclick="expandRow();"></div>
</td>
</tr>
<tr style="display: none;">
<td style="background-color: #C0C0C0;color:black;" colspan="5">Checking Start button: Ok
<br>Selecting Art: Ok
<br>Test <span class="pass"><b><font color="green">Passed<b></b></font></b></span><b><font color="green"><b><br> </b>
</font>
</b>
</td>
<td style="background-color: #C0C0C0;color:white;"></td>
</tr>
<tr class="odd" style="display: none;">
<td>anju#gmail.com</td>
<td>Art Test</td>
<td>VM-WIN7-64</td>
<td>FF</td>
<td><span class="fail"><b><font color="red">Failed</font></b></span>
<font color="red"></font>
</td>
<td>
<div class="arrow" onclick="expandRow();"></div>
</td>
</tr>
<tr style="display: none;">
<td style="background-color: #C0C0C0;color:black;" colspan="5">Checking Start button: Ok
<br>Selecting Art: Ok
<br>Test <span class="fail"><b><font color="red">Failed</font></b></span>
<font color="red">
<br>
</font>
</td>
<td style="background-color: #C0C0C0;color:white;"></td>
</tr>
<tr class="odd" style="display: none;">
<td>anju#gmail.com</td>
<td>Art Test</td>
<td>VM-WIN7-64</td>
<td>FF</td>
<td><span class="pass"><b><font color="green">Passed<b></b></font></b></span><b><font color="green"><b> </b>
</font>
</b>
</td>
<td>
<div class="arrow" onclick="expandRow();"></div>
</td>
</tr>
<tr style="display: none;">
<td style="background-color: #C0C0C0;color:black;" colspan="5">Checking Start button: Ok
<br>Selecting Art: Ok
<br>Test <span class="pass"><b><font color="green">Passed<b></b></font></b></span><b><font color="green"><b><br> </b>
</font>
</b>
</td>
<td style="background-color: #C0C0C0;color:white;"></td>
</tr>
</tbody>
</table>
<button> Show more/less</button>
Updated Jsfiddle here

Get value from td when button is clicked.

This is a part of my JSP code:
<tr style="background-color: #F0F0F0; ">
<td class="leavehistory" style="width: 6%; padding: 7px;"><%=i++%></td>
<td id="leaveID" class="leavehistory" style="width: 9%;"><%=rs.getString(7)%></td>
<td class="leavehistory" style="width: 12%;"><%=rs.getTimestamp(1)%></td>
<td class="leavehistory" style="width: 10%;"><%=rs.getInt(2)%> days</td>
<td class="leavehistory" style="width: 15%;"><%=rs.getString(3)%> - <%=rs.getString(4)%></td>
<td class="leavehistory" style="width: 15%;"><%=rs.getString(5)%></td>
<td style="width: 30%;"><select>
<option value="0">Pending</option>
<option value="1">Cancel</option>
</select> <input class="button" type="button" name="bttn" onClick="cancelSub();"value="View"/><input class="button" type="button" name="bttnDelete" onClick="cancelSub();"value="Change"/></td>
</tr>
<% } %>
This is how 2 rows of the generated HTML output look like:
<tr style="background-color: #F0F0F0; ">
<td class="leavehistory" style="width: 6%; padding: 7px;">1</td>
<td id="leaveID" class="leavehistory" style="width: 9%;">LE000002</td>
<td class="leavehistory" style="width: 12%;">2012-01-17 19:31:18.0</td>
<td class="leavehistory" style="width: 10%;">2 days</td>
<td class="leavehistory" style="width: 15%;">18/01/2012 - 19/01/2012</td>
<td class="leavehistory" style="width: 15%;">Sick</td>
<td style="width: 30%;"><select>
<option value="0">Pending</option>
<option value="1">Cancel</option>
</select> <input class="button" type="button" name="bttn" onClick="cancelSub();"value="View"/><input class="button" type="button" name="bttnDelete" onClick="cancelSub();"value="Change"/></td>
</tr>
<tr style="background-color: #F0F0F0; ">
<td class="leavehistory" style="width: 6%; padding: 7px;">2</td>
<td id="leaveID" class="leavehistory" style="width: 9%;">LE000003</td>
<td class="leavehistory" style="width: 12%;">2012-01-18 03:04:15.0</td>
<td class="leavehistory" style="width: 10%;">1 days</td>
<td class="leavehistory" style="width: 15%;">19/01/2012 - 20/01/2012</td>
<td class="leavehistory" style="width: 15%;">Sick</td>
<td style="width: 30%;"><select>
<option value="0">Pending</option>
<option value="1">Cancel</option>
</select> <input class="button" type="button" name="bttn" onClick="cancelSub();"value="View"/><input class="button" type="button" name="bttnDelete" onClick="cancelSub();"value="Change"/></td>
</tr>
These 2 rows of data are retrieved from database. For each row there is one View and Change button. If I click on the Change button for the LE000001's row, then I will get the value - "LE000001". Then I can use the value to update the status of leave record.
If I click on the Change button for the LE000002's row, then I will get the value - "LE000002". Since there are only 2 rows shown.
It can be as many as possible if the database has more records. Is there any way to get the value?

First of all, your HTML is invalid, because you have several elements with the same leaveID ID.
Now to answer your question, why don't you simply make your JS functions take the ID of the row as argument:
onClick="cancelSub('LE000001');"
and thus to generate it:
onClick="cancelSub('<%= rs.getString(7) %>');"
That said, using scriptlets and accessing JDBC resultsets from a JSP shows a lack of proper MVC architecture. Read How to avoid Java code in JSP files?