We Keep Coding

HTML/JS My "Name:" field will not submit to output form onclick=

My "sign out" Name: form will not populate/output to the "Name" column in the chart under my forms. My time, drop down boxes and sign in/sign out buttons all work but even if I change the "id" to something like "tname" it still won't populate. I'm interested in ideas for a workaround if nothing else can be done to solve this. I will list my code below. Please advise.
<form name="SIGN IN" id="form1" value="1" border="5" align="center">
<h4><br></strong>
<table align="center" border="5">
<tr>
<td><label for="Name">Name:</label></tr< /td>
<input list="Names" name="Name" id="fname">
<tr>
<td><input type="button" value="SIGN IN" onclick="display()" /></td>
</tr>
<form name="SIGN OUT" id="form2" value="1" border="5">
<tr>
<td>Name:<input id="fname2"> <br></td>
</tr>
</form>
<tr>
<td><input type="button" value="SIGN OUT" onclick="display()" /></td>
</tr>
<table width="400px" align="center" colspan="40" table border="5">
<thead>
<tr style="background-color:#8FBC8F;" id='header'>
<td align="center"><b>Name</b></td>
<td align="center"><b>Company</b></td>
<td align="center" class="wide"><b>Time In</b></td>
<td align="center" class="wide"><b>Time Out</b></td>
<td align="center" class="wide"><b>Description of Work</b></td>
</tr>
</thead>
<tbody>
<template id="row">
<tr style="background-color:#8F8FBC;" class="data">
<td align="center">
<div class="displayarea"></div>
</td>
<td align="center">
<div class="displayarea1"></div>
</td>
<td align="center">
<div class="displayarea2"></div>
</td>
<td align="center">
<div class="displayarea3"></div>
</td>
<td align="center">
<div class="displayarea4"></div>
</td>
</tr>
</template>
</tbody>
</table>
function alternateGetValue() {
const Items = [...document.querySelectorAll('.data')]
.map(row => [...row.querySelectorAll('td>div')]
.map(d => d.textContent).join(',')
).join('\n');
console.log(Items);
return Items;
}
function display() {
const template = document.getElementById("row");
const clone = template.content.cloneNode(true);
const additem = (dest, src) => {
const s = document.querySelector(src);
clone.querySelector(dest).innerHTML = s.value;
s.value = "";
};
additem(".displayarea", "#fname");
additem(".displayarea1", "#lname");
additem(".displayarea2", "#sname");
additem(".displayarea3", "#pname");
additem(".displayarea4", "#jname");
template.insertAdjacentElement('beforebegin', clone.firstElementChild);
}
function destroyClickedElement(event) {
document.body.removeChild(event.target);
}

Considering the code provided, you need to get value from input with id #fname2 in case of SIGN OUT. You can either call separate functions on SIGN IN and SIGN OUT, or you can pass a value to display() function, based on which you can determine which input id to get value from. Below is the implementation of the second approach.
function alternateGetValue() {
const Items = [...document.querySelectorAll('.data')]
.map(row => [...row.querySelectorAll('td>div')]
.map(d => d.textContent).join(',')
).join('\n');
console.log(Items);
return Items;
}
function display(isSignOut) {
const template = document.getElementById("row");
const clone = template.content.cloneNode(true);
const additem = (dest, src) => {
const s = document.querySelector(src);
clone.querySelector(dest).innerHTML = s.value;
s.value = "";
};
additem(".displayarea", isSignOut ? "#fname2" : "#fname");
template.insertAdjacentElement('beforebegin', clone.firstElementChild);
}
function destroyClickedElement(event) {
document.body.removeChild(event.target);
}
<table align="center" border="5">
<form name="SIGN IN" id="form1" value="1" border="5" align="center">
<tr>
<td>
<label for="Name">Name:</label>
<input list="Names" name="Name" id="fname">
</td>
</tr>
<tr>
<td align="center">
<input type="button" value="SIGN IN" onclick="display(false)" />
</td>
</tr>
</form>
<form name="SIGN OUT" id="form2" value="1" border="5" align="center">
<tr>
<td>Name:<input id="fname2"> <br></td>
</tr>
</form>
<tr>
<td align="center">
<input type="button" value="SIGN OUT" onclick="display(true)" />
</td>
</tr>
</table>
<table width="400px" align="center" colspan="40" table border="5">
<thead>
<tr style="background-color:#8FBC8F;" id='header'>
<td align="center"><b>Name</b></td>
<td align="center"><b>Company</b></td>
<td align="center" class="wide"><b>Time In</b></td>
<td align="center" class="wide"><b>Time Out</b></td>
<td align="center" class="wide"><b>Description of Work</b></td>
</tr>
</thead>
<tbody>
<template id="row">
<tr style="background-color:#8F8FBC;" class="data">
<td align="center">
<div class="displayarea"></div>
</td>
<td align="center">
<div class="displayarea1"></div>
</td>
<td align="center">
<div class="displayarea2"></div>
</td>
<td align="center">
<div class="displayarea3"></div>
</td>
<td align="center">
<div class="displayarea4"></div>
</td>
</tr>
</template>
</tbody>
</table>

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>

Checkboxlist check uncheck not working in javascript

I want to show/Hide the div on the basis of selection of checkbox values from the list.
Here is what I tried:-
function valueChanged() {
if ($('#ddlStatus_1').is(":checked"))
$("#divExpense").hide();
else
$("#divExpense").show();
}
and the html is
<div style="overflow-y: scroll; width: 320px; height: 100px;">
<table id="Table1" name="Status" onchange="valueChanged()">
<tr>
<td>
<input id="ddlStatus_0" type="checkbox" name="ddlStatus$0" value="20" /><label for="ddlStatus_0">Agreement</label>
</td>
</tr>
<tr>
<td>
<input id="ddlStatus_1" type="checkbox" name="ddlStatus$1" value="30" /><label for="ddlStatus_1">Registration
/ Conveyance Deed</label>
</td>
</tr>
<tr>
<td>
<input id="ddlStatus_2" type="checkbox" name="ddlStatus$2" value="40" /><label for="ddlStatus_2">7/12
Transfer on Name</label>
</td>
</tr>
<tr>
<td>
<input id="ddlStatus_3" type="checkbox" name="ddlStatus$3" value="50" /><label for="ddlStatus_3">Sold</label>
</td>
</tr>
<tr>
<td>
<input id="ddlStatus_4" type="checkbox" name="ddlStatus$4" value="60" /><label for="ddlStatus_4">Cancelled</label>
</td>
</tr>
</table>
</div>
<br />
<div id="div1">
<table cellpadding="0" cellspacing="2" width="100%">
<tr>
<td class="otab">
This is test Expense Information :
</td>
</tr>
</table>
</div>
<div id="divPayment">
<table cellpadding="0" cellspacing="2" width="100%">
<tr>
<td class="otab">
This is test Payment Information :
</td>
</tr>
</table>
</div>
But it is not working for me.

Add the change event to #ddlStatus_1 instead of table like following.
$('#ddlStatus_1').change(function() {
$("#divExpense").toggle(!this.checked);
})

Here is a running version of the code in my comment. You do not want to add the change to the table tag. If you need all checkboxes in the form to toggle something, then add a class to them and use data-attributes to see what to toggle
Note I changed div1 to divExpense
$(function() {
$('#ddlStatus_1').on("click", function() {
$("#divExpense").toggle(!this.checked);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<div style="overflow-y: scroll; width: 320px; height: 100px;">
<table id="Table1" name="Status">
<tr>
<td>
<input id="ddlStatus_0" type="checkbox" name="ddlStatus$0" value="20" />
<label for="ddlStatus_0">Agreement</label>
</td>
</tr>
<tr>
<td>
<input id="ddlStatus_1" type="checkbox" name="ddlStatus$1" value="30" />
<label for="ddlStatus_1">Registration / Conveyance Deed</label>
</td>
</tr>
<tr>
<td>
<input id="ddlStatus_2" type="checkbox" name="ddlStatus$2" value="40" />
<label for="ddlStatus_2">7/12 Transfer on Name</label>
</td>
</tr>
<tr>
<td>
<input id="ddlStatus_3" type="checkbox" name="ddlStatus$3" value="50" />
<label for="ddlStatus_3">Sold</label>
</td>
</tr>
<tr>
<td>
<input id="ddlStatus_4" type="checkbox" name="ddlStatus$4" value="60" />
<label for="ddlStatus_4">Cancelled</label>
</td>
</tr>
</table>
</div>
<br />
<div id="divExpense">
<table cellpadding="0" cellspacing="2" width="100%">
<tr>
<td class="otab">
This is test Expense Information :
</td>
</tr>
</table>
</div>
<div id="divPayment">
<table cellpadding="0" cellspacing="2" width="100%">
<tr>
<td class="otab">
This is test Payment Information :
</td>
</tr>
</table>
</div>

Scroll to the top of a scrollable pop div atomaticaly using jquery

First thing first, I am having a popup div, which contains a form
Here's is my div
<div class="addnewrule" id="add_message_0">
<form method="post" action="" id="frmadd">
<input type="hidden" name="filter" value="1">
<input name="rule_id" type="hidden" value="0">
<table class="table-responsive" width="100%" border="0" cellspacing="0" cellpadding="10" id="" style="text-align:center; margin-top:0px;">
<tr>
<td colspan="2" align="left"><div id="display_msg_0"></div></td>
</tr>
<tr>
<td width="40%" align="left">Name:</td>
<td width="60%" align="left"><input class="input_field" name="rule_name" type="text"></td>
</tr>
<tr>
<td align="left">Type:</td>
<td align="center">
<input type="radio" name="rule_type" value="0" style="display:none;" />
<input type="radio" name="rule_type" value="1" checked="checked" style="display:none;" />
<div class="btn-group equal_btn">
<button id="block_click" class="btn btn-default" type="button" onclick="setRules(0);">Block Clicks</button>
<button id="filter_click" class="btn btn-default active" type="button" onclick="setRules(1);">Filter Clicks</button>
</div></td>
</tr>
<tr>
<td align="left">Rule Active:</td>
<td align="center">
<input type="radio" id="active_0" name="active" value="1" checked="checked" style="display:none;" />
<input type="radio" id="inactive_0" name="active" value="0" style="display:none;" />
<div class="btn-group">
<button type="button" id="status_enb_0" class="btn btn-default active_btn active" onclick="setruleStatus(0,1);">Enable</button>
<button type="button" id="status_dis_0" class="btn btn-default inactive_btn" onclick="setruleStatus(0,0);">Disable</button>
</div></td>
</tr>
<tr>
<td align="left">Campaign ID:</td>
<td align="left"><input class="input_field" name="camp_id" type="text" /></td>
</tr>
<tr>
<td align="left" id="rRange">Filter IP Ranges:</td>
<td align="left"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="padding:0;" width="45%"><input class="input_field" name="start_ip" type="text" /></td>
<td width="10%" align="center">To</td>
<td style="padding:0;" width="45%" align="right"><input class="input_field" name="end_ip" type="text" /></td>
</tr>
</table></td>
</tr>
<tr>
<td align="left" id="rUAs">Filter users agents that contains:</td>
<td align="left"><input class="input_field" name="user_agent" type="text" /></td>
</tr>
<tr>
<td align="left" id="rRefs">Filter referers that contains:</td>
<td align="left"><input class="input_field" name="referer" type="text" /></td>
</tr>
<tr id="rUrl" style="display:none;">
<td align="left">Send Blocked Clicks to:</td>
<td align="left"><input class="input_field" type="text" id="rule_url" name="rule_url" value="" /></td>
</tr>
<tr>
<td align="left" colspan="2"><table class="copypaste" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>Apply <a href="javascript:void(0)" class="btn orange_button tab2" onclick="cancel_popup('add_new_rule')" >Cancel</a></td>
</tr>
</table></td>
</tr>
</table>
</form>
</div>
Now, here is the jquery ajax function given below.. It checks for the validation and displays the validation message in a message div...
function submitRule(frmId,rule_id)
{
var data=$('#'+frmId).serializeArray();
$.ajax({
type:'POST',
url:'ajax/rule_update_process.php',
data: data,
dataType:'json',
success:function(jData)
{
if(jData.status==1)
{
$("#display_msg_"+rule_id).html(jData.error);
$("#display_msg_"+rule_id).addClass('error');
var child_div = $("#display_msg_"+rule_id);
var parent_div = $("#add_message_"+rule_id);
parent_div.scrollTop(parent_div.scrollTop() + child_div.position().top);
}
else
{
window.location.href='settings_rules.php';
}
}
});
}
Since the popup is a scrollable div, i want to scroll(only within the popup div) to the top so that i can show the message div with the error message..
here'sw how i am getting the screens,.
I used this piece if code to scroll to the top of the popup div to show the error message div,
but this piece of code doesn't seem to work..
What am i doing wrong??
$("#display_msg_"+rule_id).html(jData.error);
$("#display_msg_"+rule_id).addClass('error');
var child_div = $("#display_msg_"+rule_id);
var parent_div = $("#add_message_"+rule_id);
parent_div.scrollTop(parent_div.scrollTop() + child_div.position().top);

replace ur last line of code with this
parent_div.scrollTop(0,0);

I will suggest a very simple apprach:
$("#apply_button").click(function () {
var error_message = $("#your_error_message").css("display");
if (error_message != "none") {
$("#add_message_0").scrollTop(0);
};
});
Code speaks for itself.
BR

You can use css only brother. Example this is your form.
<div>
<form class="has-error">
<p>error</p>
<input name="" value="">
</form>
<div>
you can use the class .has-error to set a css codes. your css codes will only use if the error message is displayed.
div{ overflow-y: scroll; }
div .has-error{ height: 400px; }
height will defend your current section height with errors message.
Something like this on fiddle demo
if the message is not visible on button click, add this to your click function code
$( '#add_message_1' ).delay( 200 ).animate({scrollTop: 0 }, 300);}

unable to get elements passed from html

i'm having the below jsp page created.
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script type="text/javascript">
function show(x)
{
document.getElementById(x).style.display='block';
}
function hide(x)
{
document.getElementById(x).style.display='none';
}
function handleKeyEvent(e) {
var charCode;
if (e && e.which) {
charCode = e.which;
} else if (window.event) {
e = window.event;
charCode = e.keyCode;
}
if (charCode == 13) {
//document.getElementById("yourForm").submit();
var m=document.getElementById(e);
alert(m);
hide(x);
}
}
</script>
</head>
<body>
<form name="form1" method="post" action="abc.jsp">
<table width="722">
<tr>
<td width="431" height="190">
<table width="439" >
<tr>
<td width="129">PARTS Updated</td>
<td width="108"><p>
<select name="PARTS_Updated" id="PARTS_Updated" >
<option value=""></option>
<option value="N/A">N/A</option>
</select>
</p></td>
<td width="186"><label for="PARTS_Updated"></label></td>
</tr>
<tr>
<td>TSI OK
</td>
<td><p>
<input type="radio" name="radio" id="TSI_N/A" value="TSI_N/A" onClick="hide('TSI_Query_Box')">
N/A
</p>
<p>
<input type="radio" name="radio" id="TSI_Query" value="TSI_Query" onClick="show('TSI_Query_Box')"> TSI Query</p></td>
<td><label for="TSI_Query_Box"></label>
<textarea name="TSI_Query_Box" id="TSI_Query_Box" cols="15" rows="5" style="display:none" onkeypress="handleKeyEvent('TSI_Query_Box')"></textarea></td>
</tr>
<tr>
<td height="65">Special Ins OK
</td>
<td><p>
<input type="radio" name="radio" id="SI_N/A" value="TSI_OK" onClick="hide('SI_Query_Box')">
N/A
</p>
<p>
<input type="radio" name="radio" id="SI_Query" value="SI_Query" onClick="show('SI_Query_Box')"> SI Query</p></td>
<td><label for="SI_Query_Box"></label>
<textarea name="SI_Query_Box" id="SI_Query_Box" cols="15" rows="5" style="display:none" onkeypress="handleKeyEvent('SI_Query_Box')"></textarea></td>
</tr>
</table></td>
<td width="279">
<table width="279" align="center">
<tr>
<td width="87"><p>Shipment ID
</p></td>
<td width="97"><label for="Ship_ID"></label>
<input type="text" name="Ship_ID" id="Ship_ID"></td>
</tr>
</table></td>
</tr>
</table>
<p> </p>
<table width="721" border="1">
<tr>
<td width="374" align="center">
<input type="submit" name="Send for CT Review (SCTR)" id="Send for CT Review (SCTR)" value="Send for CT Review (SCTR)"></td>
<td width="331" align="center">
<input type="submit" name="CT Review Complete (CTRC" id="CT Review Complete (CTRC)" value="CT Review Complete (CTRC)"></td>
</tr>
<tr>
<td align="center">
<input type="submit" name="Cleanup Queries" id="Cleanup Queries" value="Cleanup Queries"></td>
<td align="center">
<input type="submit" name="Cleanup Complete" id="Cleanup Complete" value="Cleanup Complete"></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" name="Go_To_Main_Page" id="Go_To_Main_Page" value="Go To Main Page"></td>
</tr>
</table>
<p> </p>
</form>
<h1> </h1>
</body>
</html>
i wanted to see when i enter the text in textarea and hit enter, i want to see the text assed. in the present case it is alerting a message [object]. Also when i check radio buttons, if i check TSI Query Radio button followed SI Query Radio button or vice versa, both are getting displayed, i want only one textarea to be displayed once.
for screenshot you can have a look at this link
http://jsfiddle.net/dYy26/
Thanks.

Check this code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script type="text/javascript">
function show(x,y)
{
document.getElementById(x).style.display='block';
document.getElementById(y).style.display='none';
document.getElementById('Ship_IDl').style.display='block';
}
function hide(x,y)
{
document.getElementById(x).style.display='none';
document.getElementById(y).style.display='block';
document.getElementById('Ship_IDl').style.display='none';
}
function handleKeyEvent(e) {
var charCode;
if (e && e.which) {
charCode = e.which;
} else if (window.event) {
e = window.event;
charCode = e.keyCode;
}
if (charCode == 13) {
//document.getElementById("yourForm").submit();
var m=document.getElementById(e);
alert(m);
hide(x);
}
}
</script>
</head>
<body>
<form name="form1" method="post" action="abc.jsp">
<table width="722">
<tr>
<td width="431" height="190">
<table width="439" >
<tr>
<td width="129">PARTS Updated</td>
<td width="108"><p>
<select name="PARTS_Updated" id="PARTS_Updated" >
<option value=""></option>
<option value="N/A">N/A</option>
</select>
</p></td>
<td width="186"><label for="PARTS_Updated"></label></td>
</tr>
<tr>
<td>TSI OK
</td>
<td><p>
<input type="radio" name="radio" id="TSI_N/A" value="TSI_N/A" onClick="hide('TSI_Query_Box','SI_Query_Box')">
N/A
</p>
<p>
<input type="radio" name="radio" id="TSI_Query" value="TSI_Query" onClick="show('TSI_Query_Box','SI_Query_Box')"> TSI Query</p></td>
<td><label for="TSI_Query_Box"></label>
<textarea name="TSI_Query_Box" id="TSI_Query_Box" cols="15" rows="5" style="display:none" onkeypress="handleKeyEvent('TSI_Query_Box')"></textarea></td>
</tr>
<tr>
<td height="65">Special Ins OK
</td>
<td><p>
<input type="radio" name="radio" id="SI_N/A" value="TSI_OK" onClick="hide('SI_Query_Box','TSI_Query_Box')">
N/A
</p>
<p>
<input type="radio" name="radio" id="SI_Query" value="SI_Query" onClick="show('SI_Query_Box','TSI_Query_Box')"> SI Query</p></td>
<td><label for="SI_Query_Box"></label>
<textarea name="SI_Query_Box" id="SI_Query_Box" cols="15" rows="5" style="display:none" onkeypress="handleKeyEvent('SI_Query_Box')"></textarea></td>
</tr>
</table></td>
<td width="279">
<table width="279" align="center">
<tr>
<td width="87"><p>Shipment ID
</p></td>
<td width="97"><label for="Ship_ID"></label>
<input type="text" name="Ship_ID" id="Ship_ID"></td>
</tr>
</table></td>
</tr>
</table>
<p> </p>
<table width="721" border="1">
<tr>
<td width="374" align="center">
<input type="submit" name="Send for CT Review (SCTR)" id="Send for CT Review (SCTR)" value="Send for CT Review (SCTR)"></td>
<td width="331" align="center">
<input type="submit" name="CT Review Complete (CTRC" id="CT Review Complete (CTRC)" value="CT Review Complete (CTRC)"></td>
</tr>
<tr>
<td align="center">
<input type="submit" name="Cleanup Queries" id="Cleanup Queries" value="Cleanup Queries"></td>
<td align="center">
<input type="submit" name="Cleanup Complete" id="Cleanup Complete" value="Cleanup Complete"></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" name="Go_To_Main_Page" id="Go_To_Main_Page" value="Go To Main Page"></td>
</tr>
</table>
<p> </p>
</form>
<h1> </h1>
</body>
</html>

Check this:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script type="text/javascript">
function show(x,y)
{
document.getElementById(x).style.display='block';
document.getElementById(y).style.display='none';
document.getElementById('Ship_IDl').style.display='block';
}
function hide(x,y)
{
document.getElementById(x).style.display='none';
document.getElementById(y).style.display='block';
document.getElementById('Ship_IDl').style.display='none';
}
function myKeyPress(e,x,y){
var keynum;
if(window.event){ // IE
keynum = e.keyCode;
}else
if(e.which){ // Netscape/Firefox/Opera
keynum = e.which;
}
//alert(String.fromCharCode(keynum));
//alert(keynum);
if (keynum == 13) {
//document.getElementById("yourForm").submit();
var m=document.getElementById(x).value;
alert(m);
hide(x,y);
}
}
</script>
</head>
<body>
<form name="form1" method="post" action="abc.jsp">
<table width="722">
<tr>
<td width="431" height="190">
<table width="439" >
<tr>
<td width="129">PARTS Updated</td>
<td width="108"><p>
<select name="PARTS_Updated" id="PARTS_Updated" >
<option value=""></option>
<option value="N/A">N/A</option>
</select>
</p></td>
<td width="186"><label for="PARTS_Updated"></label></td>
</tr>
<tr>
<td>TSI OK
</td>
<td><p>
<input type="radio" name="radio" id="TSI_N/A" value="TSI_N/A" onClick="hide('TSI_Query_Box','SI_Query_Box')">
N/A
</p>
<p>
<input type="radio" name="radio" id="TSI_Query" value="TSI_Query" onClick="show('TSI_Query_Box','SI_Query_Box')"> TSI Query</p></td>
<td><label for="TSI_Query_Box"></label>
<textarea name="TSI_Query_Box" id="TSI_Query_Box" cols="15" rows="5" style="display:none" onkeypress="return myKeyPress(event,'TSI_Query_Box','SI_Query_Box')"></textarea></td>
</tr>
<tr>
<td height="65">Special Ins OK
</td>
<td><p>
<input type="radio" name="radio" id="SI_N/A" value="TSI_OK" onClick="hide('SI_Query_Box','TSI_Query_Box')">
N/A
</p>
<p>
<input type="radio" name="radio" id="SI_Query" value="SI_Query" onClick="show('SI_Query_Box','TSI_Query_Box')"> SI Query</p></td>
<td><label for="SI_Query_Box"></label>
<textarea name="SI_Query_Box" id="SI_Query_Box" cols="15" rows="5" style="display:none" onkeypress="return myKeyPress(event,'SI_Query_Box','TSI_Query_Box')""></textarea></td>
</tr>
</table></td>
<td width="279">
<table width="279" align="center">
<tr>
<td width="87"><p>Shipment ID
</p></td>
<td width="97"><label for="Ship_ID" id="Ship_IDl"></label>
<input type="text" name="Ship_ID" id="Ship_ID"></td>
</tr>
</table></td>
</tr>
</table>
<p> </p>
<table width="721" border="1">
<tr>
<td width="374" align="center">
<input type="submit" name="Send for CT Review (SCTR)" id="Send for CT Review (SCTR)" value="Send for CT Review (SCTR)"></td>
<td width="331" align="center">
<input type="submit" name="CT Review Complete (CTRC" id="CT Review Complete (CTRC)" value="CT Review Complete (CTRC)"></td>
</tr>
<tr>
<td align="center">
<input type="submit" name="Cleanup Queries" id="Cleanup Queries" value="Cleanup Queries"></td>
<td align="center">
<input type="submit" name="Cleanup Complete" id="Cleanup Complete" value="Cleanup Complete"></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" name="Go_To_Main_Page" id="Go_To_Main_Page" value="Go To Main Page"></td>
</tr>
</table>
<p> </p>
</form>
<h1> </h1>
</body>
</html>