We Keep Coding

Placing Check Boxes Next To Each Other

I want to place the check boxes and the tables next to each other with a proper alignment. I can seem to put the three check boxes that I've created beside each other in the same row but I am unable to align them all properly and neatly. I find some difficulties in formatting them by using Notepad++ as my developing tool.
Need help on this one.
Here is the CSS and HTML codes. Under this HTML section, the check boxes consist of respective table created in them. I have separated all the codes with the comment 'Scenario 1,2,3 and Main'.
td.left {
text-align: left;
}
th {
border: 1.5px solid #4682B4;
text-align: center;
padding: 2px;
}
<!--Scenario 1-->
<form id="checkbox1" method="get" align="left" style="display: inline-block; width:30%;">
<table style="width:20%" align="left">
<input type="checkbox" value="select" align="center" id="check1"> Calculate The Number of Head Count When Days Are Fixed<br>
<tr>
<td>Number of Days</td>
<td class="left"><input type="text" id="numDays" /></td>
</tr>
<tr>
<td>Head Count</td>
<td class="left"><input type="text" name="hc" id="hc" /> Per Shift</td>
</tr>
</table>
</form>
<!--End of Form For Scenario 1-->
<!--Scenario 2-->
<form id="checkbox2" method="get" align="left" style="display:inline-block; width:30%;">
<table style="width:20%" align="left">
<input type="checkbox" value="select" align="center" id="check2"> Calculate The Number of Days When Head Counts Are Fixed<br>
<tr>
<td>Number of Head Count</td>
<td class="left"><input type="text" id="numHeadC" /></td>
</tr>
<tr>
<td>Number of Days</td>
<td class="left"><input type="text" name="days" id="days" /> Days</td>
</tr>
</table>
</form>
<!--End of Form For Scenario 2-->
<!--Scenario 3-->
<form id="checkbox3" method="get" align="left" style="display: inline-block; width:30%;">
<table style="width:20%" align="left">
<input type="checkbox" value="select" align="center"> Calculate The Number of Head Counts According to The Daily Output<br>
<tr>
<td>Daily Output</td>
<td class="left"><input type="text" id="output" /></td>
</tr>
<tr>
<td>Headcount II</td>
<td class="left"><input type="text" name="hcperday" id="hcperday" /> Per Shift</td>
</tr>
</table>
</form>
<!--End of Form For Scenario 3-->
<br><br><br>
<!--Main-->
<form id="radioForm2" method="get" align="center">
<table style="width:30%" align="center">
<tr>
<td>Total</td>
<td class="left"><input type="text" name="total" id="total" align="center" /> Seconds</td>
</tr>
<tr>
<td>Standard Hour</td>
<td class="left"><input type="text" name="stdHour" id="stdHour" align="center" /> Hour</td>
</tr>
<tr>
<td>Earn Hour</td>
<td class="left"><input type="text" name="earnHour" id="earnHour" /> Hour</td>
</tr>
<tr>
<td>Output Per Day</td>
<td class="left"><input type="text" name="perday" id="perday" /> Per Day</td>
</tr>
</table>
</form>
<!--End of Form-->
<br><br><br>

I put the corrected input in an answer to show how it should look like. The comment is not the right place for html snippets. But this answer did still not resolve the view problem.
td.left {
text-align: left;
}
th {
border: 1.5px solid #4682B4;
text-align: center;
padding: 2px;
}
<!--Scenario 1-->
<form id="checkbox1" method="get" align="left" style="display: inline-block; width:30%;">
<table style="width:20%" align="left">
<tr>
<td colspan="2"><input type="checkbox" value="select" align="center" id="check1"> Calculate The Number of Head Count When Days Are Fixed</td>
</tr>
<tr>
<td>Number of Days</td>
<td class="left"><input type="text" id="numDays" /></td>
</tr>
<tr>
<td>Head Count</td>
<td class="left"><input type="text" name="hc" id="hc" /> Per Shift</td>
</tr>
</table>
</form>
<!--End of Form For Scenario 1-->
<!--Scenario 2-->
<form id="checkbox2" method="get" align="left" style="display:inline-block; width:30%;">
<table style="width:20%" align="left">
<tr>
<td colspan="2"><input type="checkbox" value="select" align="center" id="check2"> Calculate The Number of Days When Head Counts Are Fixed</td>
</tr>
<tr>
<td>Number of Head Count</td>
<td class="left"><input type="text" id="numHeadC" /></td>
</tr>
<tr>
<td>Number of Days</td>
<td class="left"><input type="text" name="days" id="days" /> Days</td>
</tr>
</table>
</form>
<!--End of Form For Scenario 2-->
<!--Scenario 3-->
<form id="checkbox3" method="get" align="left" style="display: inline-block; width:30%;">
<table style="width:20%" align="left">
<tr>
<td colspan="2"><input type="checkbox" value="select" align="center"> Calculate The Number of Head Counts According to The Daily Output</td>
</tr>
<tr>
<td>Daily Output</td>
<td class="left"><input type="text" id="output" /></td>
</tr>
<tr>
<td>Headcount II</td>
<td class="left"><input type="text" name="hcperday" id="hcperday" /> Per Shift</td>
</tr>
</table>
</form>
<!--End of Form For Scenario 3-->
<br><br><br>
<!--Main-->
<form id="radioForm2" method="get" align="center">
<table style="width:30%" align="center">
<tr>
<td>Total</td>
<td class="left"><input type="text" name="total" id="total" align="center" /> Seconds</td>
</tr>
<tr>
<td>Standard Hour</td>
<td class="left"><input type="text" name="stdHour" id="stdHour" align="center" /> Hour</td>
</tr>
<tr>
<td>Earn Hour</td>
<td class="left"><input type="text" name="earnHour" id="earnHour" /> Hour</td>
</tr>
<tr>
<td>Output Per Day</td>
<td class="left"><input type="text" name="perday" id="perday" /> Per Day</td>
</tr>
</table>
</form>
<!--End of Form-->
<br><br><br>

javascript regular expression replace html attribute except some tag

I want use regular expression to replace html attribute ng-model='model.xxx' to ng-model='model.newname.xxx', but I don't need replace attribute between <tbody>
<tr class='template' ng-repeat='model in model.child'></tr></tbody>;
<table width="592" height="842" border="1" align="center">
<tr>
<td align="center" colspan="2" width="16%">serve_resource_name</td>
<td colspan="8"><input class="text" name="serve_resource_name" type="text" ng-model="model.serve_resource_name" id="serve_resource_name" title="serve_resource_name" value="" maxlength="" plugins="text" fallowblank="false" datatype="text"/></td>
</tr>
<tr>
<td align="center" rowspan="4" width="8%">clinet</td>
<td align="center" style="width:8%">system</td>
<td colspan="3"><input class="text" name="system" type="text" ng-model="model.system" id="system" title="系统" value="" maxlength="" plugins="text" fallowblank="false" datatype="text"/></td>
<td align="center" colspan="2" width="16%">IP</td>
<td colspan="3"><input class="text" name="ip" type="text" ng-model="model.ip" id="ip" title="IP" value="" maxlength="" plugins="text" fallowblank="false" datatype="text"/></td>
</tr>
<tr>
<td align="center">username</td>
<td colspan="3"><input class="text" name="username" type="text" ng-model="model.username" id="username" title="用户名" value="" maxlength="" plugins="text" fallowblank="false" datatype="text"/></td>
<td align="center" colspan="2" width="16%">password</td>
<td colspan="3"><input class="text" name="password" type="text" ng-model="model.password" id="password" title="密码" value="" maxlength="" plugins="text" fallowblank="false" datatype="text"/></td>
</tr>
<tr>
<td align="center" width="16%">time_limit</td>
<td colspan="8"><input class="text" name="time_limit" type="text" ng-model="model.time_limit" id="time_limit" title="期限" value="" maxlength="" plugins="text" fallowblank="false" datatype="text"/></td>
</tr>``
<tr>
<td align="center" width="8%" height="150px">flow control</td>
<td colspan="9" style="padding:0; vertical-align:top;">
<div style="overflow:auto; height:150px;">
<table id="697e5afad8e540659efb412ea0347b5d" name="flowControl" fnote="flow control" fdatatype="1" plugins="childtable" border="1" cellspacing="0" cellpadding="0">
<thead>
<tr class="firstRow">
<td align="center" width="24%">time_quantum</td>
<td align="center" width="24%">interval</td>
<td align="center" width="24%">time_interval_min</td>
<td align="center" width="24%">visit_count_limit</td>
<td align="center" ><div class="img-add" ng-click="imgAdd('model.table')"></div></td>
</tr>
</thead>
<tbody>
<tr class="template" ng-repeat="model in model.child">
<td ><input name="time_start" type="text" ng-model="model.time_start" id="time_start" title="time_start" value="" maxlength="" placeholder="8:00"/>-<input name="time_end" type="text" ng-model="model.time_end" id="time_end" title="time_end" value=""placeholder="22:00"/></td>
<td ><input name="time_interval_count" type="text" ng-model="model.time_interval_count" id="time_interval_count" title="time_interval_count" value="" /></td>
<td ><input class="text" name="visit_count_limit" type="text" ng-model="model.visit_count_limit" id="visit_count_limit" title="visit_count_limit" value="" "/></td>
<td ><input class="text" name="visit_flux_limit" type="text" ng-model="model.visit_flux_limit" id="visit_flux_limit" title="visit_flux_limit" value="" /></td>
</tr>
</tbody>
</table></div>
</td>
</tr>
<tr>
<td align="center" width="8%">remark</td>
<td colspan="9">
<div class="word-text"><textarea class="bor" id="remark" name="remark" ng-model="model.remark" title="remark" maxlength="" plugins="textarea" fallowblank="false"></textarea></div>
</td>
</tr>
</table>`

How to hide elements depending on the state of radio buttons with Javascript

I have a data entry form on my site which contains multiple checkboxes, two radio buttons and a text fields. I want to make the text field show if "cheque" radio buttons is selected and hide that text box with value of Cheque text box's if "cash" radio button is selected.
The radio buttons and text area are as follows:
<tr>
<td valign="top" width="300">Balance Amount:</td>
<td valign="top" width="300" align="left">
<input type="number" class="k-textbox" name="balance_amount" id="balance_amount" placeholder="" size="30" value=" <?php echo $balance_amount; ?>" readonly ></input>
</td>
</tr>
<tr>
<td valign="top" width="300">Mode Of Payement :</td>
<td valign="top" width="300" align="left">
Cheque :<input type="radio" name="mode_of_payment" id="cheq" value="1" >
Cash :<input type="radio" name="mode_of_payment" id="cash" value="2" checked >
</td>
</tr>
<tr id="bankName">
<td valign="top" width="300">Bank Name :</td>
<td valign="top" width="300" align="left">
<input type="text" class="k-textbox" name="bank_name" id="bank_name" placeholder=""/>
</td>
</tr>
<tr id="branch">
<td valign="top" width="300">Branch :</td>
<td valign="top" width="300" align="left">
<input type="text" class="k-textbox" name="branch_name" id="branch_name" placeholder="" />
</td>
</tr>
<tr id="Acc_No">
<td valign="top" width="300">Account No :</td>
<td valign="top" width="300" align="left">
<input type="text" class="k-textbox" name="account_no" id="account_no" placeholder="" />
</td>
</tr>
<tr id="chq_no">
<td valign="top" width="300">Cheque No</td>
<td valign="top" width="300" align="left">
<input type="number" id="cheque_number" name="cheque_number" class="k-textbox" placeholder="Enter Cheque No" /></td>
</tr>
<tr id="chq_date">
<td valign="top" width="300">Cheque Date</td>
<td valign="top" width="300" align="left">
<input id="cheque_date" name="cheque_date" value="<?php echo $cheque_date; ?>" type="text" ></input></td>
</tr>
<tr id="pay_at">
<td valign="top" width="300">Payable At</td>
<td valign="top" width="300" align="left">
<input id="payable_at" name="payable_at" class="k-textbox" type="text" ></input></td>
</tr>
<tr>
<td valign="top" width="300">Paid Amount</td>
<td valign="top" width="300" align="left">
<input type="number" id="paid_amount" name="paid_amount" class="k-textbox" placeholder="Enter Digit" required validationMessage="Please Enter the Amount"/></td>
</tr>
<tr>
<td valign="top" width="300">Amount In Words</td>
<td valign="top" width="300" align="left">
<input type="number" id="amount_in_words" name="amount_in_words" class="k-textbox" placeholder="Enter Words" required validationMessage="Please Enter Amount In Words"/></td>
</tr>

Try a change handler for the radio buttons.
Also add a class cheque to the cheque specific rows like
<tr id="chq_no" class="cheque">
<td valign="top" width="300">Cheque No</td>
<td valign="top" width="300" align="left">
<input type="number" id="cheque_number" name="cheque_number" class="k-textbox" placeholder="Enter Cheque No" /></td>
</tr>
<tr id="chq_date" class="cheque">
<td valign="top" width="300">Cheque Date</td>
<td valign="top" width="300" align="left">
<input id="cheque_date" name="cheque_date" value="<?php echo $cheque_date; ?>" type="text" ></input></td>
</tr>
then
jQuery(function(){
$('input[name="mode_of_payment"]').change(function(){
$('.cheque').toggle(this.checked && this.value==1)
}).change()
})
Demo: Fiddle

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$("#chq_no").hide();
$("#chq_date").hide();
$(":radio").click(function(e) {
switch($(this).val()){
case "1":
$("#chq_no").show();
$("#chq_date").show();
break;
case "2":
$("#chq_no").hide();
$("#chq_date").hide();
break;
}
});
});
</script>
</head>
<body>
<table>
<tr>
<td valign="top" width="300">Balance Amount:</td>
<td valign="top" width="300" align="left">
<input type="number" class="k-textbox" name="balance_amount" id="balance_amount" placeholder="" size="30" value=" <?php echo $balance_amount; ?>" readonly ></input>
</td>
</tr>
<tr>
<td valign="top" width="300">Mode Of Payement :</td>
<td valign="top" width="300" align="left">
Cheque :<input type="radio" name="mode_of_payment" id="cheq" value="1" >
Cash :<input type="radio" name="mode_of_payment" id="cash" value="2" checked >
</td>
</tr>
<tr id="bankName">
<td valign="top" width="300">Bank Name :</td>
<td valign="top" width="300" align="left">
<input type="text" class="k-textbox" name="bank_name" id="bank_name" placeholder=""/>
</td>
</tr>
<tr id="branch">
<td valign="top" width="300">Branch :</td>
<td valign="top" width="300" align="left">
<input type="text" class="k-textbox" name="branch_name" id="branch_name" placeholder="" />
</td>
</tr>
<tr id="Acc_No">
<td valign="top" width="300">Account No :</td>
<td valign="top" width="300" align="left">
<input type="text" class="k-textbox" name="account_no" id="account_no" placeholder="" />
</td>
</tr>
<tr id="chq_no">
<td valign="top" width="300">Cheque No</td>
<td valign="top" width="300" align="left">
<input type="number" id="cheque_number" name="cheque_number" class="k-textbox" placeholder="Enter Cheque No" /></td>
</tr>
<tr id="chq_date">
<td valign="top" width="300">Cheque Date</td>
<td valign="top" width="300" align="left">
<input id="cheque_date" name="cheque_date" value="<?php echo $cheque_date; ?>" type="text" ></input></td>
</tr>
<tr id="pay_at">
<td valign="top" width="300">Payable At</td>
<td valign="top" width="300" align="left">
<input id="payable_at" name="payable_at" class="k-textbox" type="text" ></input></td>
</tr>
<tr>
<td valign="top" width="300">Paid Amount</td>
<td valign="top" width="300" align="left">
<input type="number" id="paid_amount" name="paid_amount" class="k-textbox" placeholder="Enter Digit" required validationMessage="Please Enter the Amount"/></td>
</tr>
<tr>
<td valign="top" width="300">Amount In Words</td>
<td valign="top" width="300" align="left">
<input type="number" id="amount_in_words" name="amount_in_words" class="k-textbox" placeholder="Enter Words" required validationMessage="Please Enter Amount In Words"/></td>
</tr>
</table>
</body>
</html>

Try This
$(document).ready(function () {
$('input[name=mode_of_payment]').change(function () {
$('#chq_no').toggle(this.checked && this.value == 1);
$('#chq_date').toggle(this.checked && this.value == 1);
}).change();
});

i think you have to try show() and hide() function of java script and also use Css property like display:block and display:hidden for hide and show text box.
#namrata shrivas

Filling multiple textboxes using javascript

Javascript rookie here. I have a small page with a first name/last name and a lookup/clear button. The page then has 15 textboxes below.
I would like for the user to be able to search for the first and last name, and fill up the next empty textbox.
Currently the user can search for a person, and fill the first textbox, but if they search again....it will just replace what is in the first textbox. Here is my relevant code:
<form name="isForm" action="">
<table width="75%" border="0" cellspacing="0">
<tr>
<td colspan="4" class="columnHeaderClass">Search for ID by Name</td>
</tr>
<tr>
<td>Last Name:
<input type="hidden" id=queryType name=queryType value="P" />
<input type="text" size="20" autocomplete="off" id="searchField" name="searchField" />
</td>
<td>First Name:
<input type="text" size="20" autocomplete="off" id="firstField" name="firstField" />
</td>
<td align="center" valign="bottom">
<input id="submit_btn" type="button" value="Lookup/Clear" class="buttonStyle"
onclick="initFieldsDivs(document.isForm.searchField, document.isForm.nameField, document.isForm.idField, document.isForm.firstField);
document.getElementById('nameField').innerHTML='';
this.disabled = true;
doCompletion();" >
</td>
<td><div id="nameField"></div></td>
</tr>
<tr>
<td colspan="4">
<table id="completeTable" border="1" bordercolor="black" cellpadding="0" cellspacing="0">
</table>
</td>
</tr>
<td colspan="3"> </td>
</tr>
</table>
<table width="75%" border="0" cellspacing="0">
<tr>
<td colspan="3" class="columnHeaderClass">ID(s)</td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td align="right"><input name="Student_ID" type="text" id="idField" /></td>
<td align="center"><input name="Student_ID1" type="text" id="idField1" /></td>
<td align="left"><input name="Student_ID2" type="text" id="idField2" /></td>
</tr>
<tr>
<td align="right"><input name="Student_ID3" type="text" id="idField3" /></td>
<td align="center"><input name="Student_ID4" type="text" id="idField4" /></td>
<td align="left"><input name="Student_ID5" type="text" id="idField5" /></td>
</tr>
<tr>
<td align="right"><input name="Student_ID6" type="text" id="idField6" /></td>
<td align="center"><input name="Student_ID7" type="text" id="idField7" /></td>
<td align="left"><input name="Student_ID8" type="text" id="idField8" /></td>
</tr>
<tr>
<td align="right"><input name="Student_ID9" type="text" id="idField9" /></td>
<td align="center"><input name="Student_ID10" type="text" id="idField10" /></td>
<td align="left"><input name="Student_ID11" type="text" id="idField11" /></td>
</tr>
<tr>
<td align="right"><input name="Student_ID12" type="text" id="idField12" /></td>
<td align="center"><input name="Student_ID13" type="text" id="idField13" /></td>
<td align="left"><input name="Student_ID14" type="text" id="idField14" /></td>
</tr>
<tr>
<td colspan="3">
<div class="submit">
<input type="submit" name="SUBMIT" value="SUBMIT" accesskey="S">
</div>
</td>
</tr>
</table>
So the small amount of javascript that is written.... initFieldDivs() grabs the id of whoever was chosen and puts it into the first textbox (I would like to solve this without changing this function). So, is there anyway to move on to the next textbox when the first is full? thanks in advance, and please ask if you have questions, I know this is confusing.

I think you want something like
function fillNextEmptyTb() {
var allInputs = document.getElementsByTagName("input");
for (var i = 0; i < allInputs.length; i++)
if (allInputs[i].type === "text" && allInputs[i].value == "") {
allInputs[i].value = "whatever you want";
return;
}
}
Or the jQuery way, if you're using it, or plan to try it:
var nextEmpty = $('input:text[value=""]')[0];
$(nextEmpty).val("whatever you want");

How can I select the second cancel button instead of the first?

I want to cancel the second line item instead of the first.
Below is some sample code for the 2 line items:
<div class="screenlet-body">
<form name="updateItemInfo" method="post" action="/ordermgr/control/updateOrderItems">
<input type="hidden" name="orderId" value="140070"/>
<input type="hidden" name="orderItemSeqId" value=""/>
<input type="hidden" name="shipGroupSeqId" value=""/>
<input type="hidden" name="supplierPartyId" value="10964"/>
<input type="hidden" name="orderTypeId" value="PURCHASE_ORDER"/>
<table class="basic-table order-items" cellspacing="0">
<tr class="header-row">
<td width="25%">Product</td>
<td width="10">Part Condition</td>
<td width="25%">Status</td>
<td width="5%" class="align-text">Quantity</td>
<td width="10%" class="align-text">Unit Price</td>
<td width="10%"> </td>
<td width="10%" class="align-text">Sub Total</td>
<td width="2%"> </td>
<td width="3%"> </td>
</tr>
<tr><td colspan="8"><hr/></td></tr>
<tr>
<td valign="top">
<div>
10588 -
NAS516-1A
- ZERk FITTING
</td>
<td>
<select name="icon_00001">
<option/>
<option value="ARM">As Removed</option>
<option value="INP">Inspected/ Tested</option>
<option value="NES">New Surplus</option>
<option value="NEW">New</option>
<option value="OVH">Overhauled/ Remanufactured</option>
<option value="RPR">Repaired/ Serviceable</option>
<option value="UNK">Unknown</option>
</select>
</td>
<td>
Current Created<br/>
2011-03-11 09:16:57.0 Created<br/>
</td>
<td class="align-text" valign="top" nowrap="nowrap">
Ordered 5 <br/>
Cancelled: 0 <br/>
Remaining: 5 <br/>
</td>
<td class="align-text" valign="top" nowrap="nowrap">
<input type="text" size="8" name="ipm_00001" value="10"/>
<input type="checkbox" name="opm_00001" value="Y"/>
</td>
<td> </td>
<td class="align-text" valign="top" nowrap="nowrap">
$50.00
<tr><td colspan="8"> </td></tr>
<tr>
<td align="right"><span class="label">Ship Group</span></td>
<td align="left"> [00001] 2920 E. Chambers St.</td>
<td align="right"><span class="label">Quantity</span></td>
<td align="right">
<input type="text" name="iqm_00001:00001" size="6" value="5"/>
<input type="checkbox" name="selectedItem" value="00001">
</td>
<td>
</td>
<td colspan="2"> </td>
<td align="right">
<a id="cancel_00001" name="cancel_00001 "href="javascript:document.updateItemInfo.action='/ordermgr/control/cancelOrderItem';document.updateItemInfo.orderItemSeqId.value='00001';document.updateItemInfo.shipGroupSeqId.value='00001';document.updateItemInfo.submit()" class="buttontext">Cancel</a>
</td>
</tr>
<tr>
<td align="right">
<span class="label">Comments</span>
</td>
<td colspan="7" align="left">
<input type="text" name="icm_00001" value="" size="30" maxlength="60"/>
</td>
</tr>
<tr>
<td align="right">
<span class="label">Delivery Date</span>
</td>
<td colspan="7" align="left" colspan="7">
<input type="text" name="iddm_00001" value="2011-03-31 12:49:16.000" size="25" maxlength="30"/>
<img src="/images/cal.gif" width="16" height="16" border="0" alt="Click here For Calendar"/>
</td>
</tr>
<div>
10602 -
MS21075L3N
- NUTPLATE
</td>
<td>
<select name="icon_00002">
<option/>
<option value="ARM">As Removed</option>
<option value="INP">Inspected/ Tested</option>
<option value="NES">New Surplus</option>
<option value="NEW" selected>New</option>
<option value="OVH">Overhauled/ Remanufactured</option>
<option value="RPR">Repaired/ Serviceable</option>
<option value="UNK">Unknown</option>
</select>
</td>
<td>
Current Created<br/>
</td>
<td class="align-text" valign="top" nowrap="nowrap">
Ordered 1 <br/>
Cancelled: 0 <br/>
Remaining: 1 <br/>
</td>
<td class="align-text" valign="top" nowrap="nowrap">
<input type="text" size="8" name="ipm_00002" value="100"/>
<input type="checkbox" name="opm_00002" value="Y"/>
</td>
<td> </td>
<td class="align-text" valign="top" nowrap="nowrap">
$100.00
<tr><td colspan="8"> </td></tr>
<tr>
<td align="right"><span class="label">Ship Group</span></td>
<td align="left"> [00001] 2920 E. Chambers St.</td>
<td align="right"><span class="label">Quantity</span></td>
<td align="right">
<input type="text" name="iqm_00002:00001" size="6" value="1"/>
<input type="checkbox" name="selectedItem" value="00002">
</td>
<td>
</td>
<td colspan="2"> </td>
<td align="right">
<a id="cancel_00002" name="cancel_00002 "href="javascript:document.updateItemInfo.action='/ordermgr/control/cancelOrderItem';document.updateItemInfo.orderItemSeqId.value='00002';document.updateItemInfo.shipGroupSeqId.value='00001';document.updateItemInfo.submit()" class="buttontext">Cancel</a>
</td>
</tr>
<tr>
<td align="right">
<span class="label">Comments</span>
</td>
<td colspan="7" align="left">
<input type="text" name="icm_00002" value="This is a comment." size="30" maxlength="60"/>
</td>
</tr>
<tr>
<td align="right">
<span class="label">Delivery Date</span>
</td>
<td colspan="7" align="left" colspan="7">
<input type="text" name="iddm_00002" value="" size="25" maxlength="30"/>
<img src="/images/cal.gif" width="16" height="16" border="0" alt="Click here For Calendar"/>
</td>
</tr>
<td colspan="7"> </td>
<td><input type="submit" value="Update Items" class="buttontext"/> </td>
What I need to do is cancel the second line item on the order.
There is 4 large windows showing code.
The second large one is the first line item and the fourth large one is the second line item.
I need to cancel the second.
Thanks in advance.

I actually figured out a way to do it using this line of code:
browser.link(:url, "javascript:document.updateItemInfo.action='/ordermgr/control/cancelOrderItem';document.updateItemInfo.orderItemSeqId.value='00002';document.updateItemInfo.shipGroupSeqId.value='00001';document.updateItemInfo.submit()").click
The way it works is I specify the first value to reflect the line item number which will cancel out the specified line item.
Thanks for your help guys.