Develop Reference

Enable submit button for Cancel even if required fields are empty

I have 2 submit buttons, one for submitting the form and the other for cancelling the submission and redirecting. When clicking the Cancel submit button, it doesn't simply cancel and go back to the processing PHP script. It requires the required fields to be filled for the cancel button to work. I don't understand what is wrong with this. Please check my code below and suggest possible solutions.
{include file="header.tpl" page_name='Amazon Order Adjustment' extra_javascript='<script language="JavaScript" src="includes/update_shipping_info.js"></script>'}
{literal}
<style type="text/css">
#loading-icon {
position: absolute;
top: 75px;
right: 250px; width:
32px; height: 32px;
display: none;
background: url('/images/lightbox/loading.gif');
}
</style>
{/literal}
{if isset($tpl_error_msg) }
<div id="message">{$tpl_error_msg}</div>
{/if}
{include file='view_order_snippet.tpl'}
<form name="amazon_order_adjustment" id="amazon_order_adjustment" method="post" action="amazon_order_adjustment.php?id={$id}&{$search_params}">
<div class="row">
<fieldset>
<legend>Order Line Items</legend>
<table id="table2" style="position: relative; float: left;">
<tr valign="top">
<th width="10%"></th>
<th width="10%">SKU</th>
<th width="30%">Item</th>
<th width="5%">Qty</th>
<th width="10%">Status</th>
<th width="15%">Ship Mode</th>
<th width="20%">Tracking#</th>
</tr>
{if !($update_shipping_info_flag)}
<tr>
<td colspan="7" align="center">No Items to display</td>
</tr>
{else}
{section name=lineitems loop=$tpl_order_list}
<tr id=row1 valign="top">
<td><input type="radio" name="check[]" value="{$tpl_order_list[lineitems].id}">
<input type="hidden" name="vendor_id_array[]" value="{$tpl_order_list[lineitems].vendor_fk}">
</td>
<td>{$tpl_order_list[lineitems].sku}
<td>{$tpl_order_list[lineitems].item_description}</td>
<td>{$tpl_order_list[lineitems].quantity}</td>
<td>{$tpl_order_list[lineitems].item_status}</td>
<td>{$tpl_order_list[lineitems].shipping_mode}</td>
{if $tpl_order_list[lineitems].shipping_tracking_no == ""}
<td>N/A</td>
{else}
<td>{$tpl_order_list[lineitems].shipping_tracking_no}</td>
{/if}
</tr>
{/section}
{/if}
<tr>
<td align="right" colspan="3">Action Type</td>
<td align="left" colspan="4">
<select id="action_type" name="action_type" required>
<option value="">Select Action</option>
{html_options options=$tpl_action_type}
</select>
</td>
</tr>
<tr>
<td align="right" colspan="3">Enter Refund Amount</td>
<td align="left" colspan="4"><input type="number" step="1" min="" id="refund_amount" name="refund_amount" value="" required /></td>
</tr>
<tr>
<td align="right" colspan="3">Adjustment Reason</td>
<td align="left" colspan="4">
<select id="AdjustmentReason" name="AdjustmentReason" required>
<option value="" selected="selected">Select Adjustment Reason</option>
{html_options options=$tpl_adjustment_reason}
</select>
</td>
</tr>
<tr>
<td align="right" colspan="3">Adjustment Type</td>
<td align="left" colspan="4">
<select id="adjustment_type" name="adjustment_type" required>
<option value="" selected="selected">Select Adjustment Type</option>
{html_options options=$tpl_adjustment_type}
</select>
</td>
</tr>
<tr id="adjustment_buyer_price">
<td align="right" colspan="3">Adjustment Buyer Price Type</td>
<td align="left" colspan="4">
<select id="AdjustmentBuyerPrice" name="AdjustmentBuyerPrice">
<option value="">Select Adjustment Buyer Price Type</option>
{html_options options=$tpl_adjustment_buyer_price}
</select>
</td>
</tr>
</table>
</fieldset>
</div>
<div class="row">
<input type="hidden" id="tpl_grand_total_box" name="tpl_grand_total_box" value="{$tpl_grand_total}">
<input type="hidden" id="tpl_tax_box" name="tpl_tax_box" value="{$tpl_tax}">
<input type="submit" id="save_button" name="submit_action" value="refund" class="button">
<input type="button" id="cancel_button" name="submit_action" value="Cancel" class="button">
</div>
</div>
</form>
{literal}
<script type="text/javascript">
$(document).ready(function() {
$('#adjustment_buyer_price').hide();
$("#adjustment_type").change(function () {
var cur_option_val = $(this).val();
if (cur_option_val == "ItemPriceAdjustments") {
$('#adjustment_buyer_price').show();
$('#AdjustmentBuyerPrice').attr("required", "required") //add required
} else {
$('#adjustment_buyer_price').hide();
$('#AdjustmentBuyerPrice').removeAttr("required") //remove required.
}
});
$(function() {
$('#cancel_button').click(function() {
$("#amazon_order_adjustment").submit();
});
});
});
</script>
{/literal}
{include file="footer.tpl"}

When your cancel button is clicked you can remove required attribute from all inputs and then submit your form in this way $_POST datas for input will also get send to server .
Demo Code :
$(function() {
$('#cancel_button').click(function() {
$("input , select ").removeAttr("required") //remove required attr
$("#amazon_order_adjustment").append("<input type='hidden' name='submit_action' value='Cancel'>") //add this to know which button click
$("#amazon_order_adjustment").submit(); //submit
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="amazon_order_adjustment" id="amazon_order_adjustment" method="post" action="amazon_order_adjustment.php?id={$id}&{$search_params}">
<div class="row">
<fieldset>
<legend>Order Line Items</legend>
<table id="table2" style="position: relative; float: left;">
<tr valign="top">
<th width="10%"></th>
<th width="10%">SKU</th>
<th width="30%">Item</th>
<th width="5%">Qty</th>
<th width="10%">Status</th>
<th width="15%">Ship Mode</th>
<th width="20%">Tracking#</th>
</tr>
<tr>
<td colspan="7" align="center">No Items to display</td>
</tr>
<tr id=row1 valign="top">
<td><input type="radio" name="check[]" value="1">
<input type="hidden" name="vendor_id_array[]" value="2">
</td>
<td>A
<td>B</td>
<td>5</td>
<td>ok</td>
<td>htm</td>
<td>N/A</td>
</tr>
<tr>
<td align="right" colspan="3">Action Type</td>
<td align="left" colspan="4">
<select id="action_type" name="action_type" required>
<option value="">Select Action</option>
<option value="">A</option>
</select>
</td>
</tr>
<tr>
<td align="right" colspan="3">Enter Refund Amount</td>
<td align="left" colspan="4"><input type="number" step="1" min="" id="refund_amount" name="refund_amount" value="" required /></td>
</tr>
<tr>
<td align="right" colspan="3">Adjustment Reason</td>
<td align="left" colspan="4">
<select id="AdjustmentReason" name="AdjustmentReason" required>
<option value="" selected="selected">Select Adjustment Reason</option>
<option value="">A</option>
</select>
</td>
</tr>
<tr>
<td align="right" colspan="3">Adjustment Type</td>
<td align="left" colspan="4">
<select id="adjustment_type" name="adjustment_type" required>
<option value="" selected="selected">Select Adjustment Type</option>
<option value="ItemPriceAdjustments">ItemPriceAdjustments</option>
<option value="ItemPriceAdjustments1">5</option>
</select>
</td>
</tr>
<tr id="adjustment_buyer_price">
<td align="right" colspan="3">Adjustment Buyer Price Type</td>
<td align="left" colspan="4">
<!--remove required from here-->
<select id="AdjustmentBuyerPrice" name="AdjustmentBuyerPrice">
<option value="">Select Adjustment Buyer Price Type</option>
<option value="">A</option>
</select>
</td>
</tr>
</table>
</fieldset>
</div>
<div class="row">
<input type="hidden" id="tpl_grand_total_box" name="tpl_grand_total_box" value="{$tpl_grand_total}">
<input type="hidden" id="tpl_tax_box" name="tpl_tax_box" value="{$tpl_tax}">
<input type="submit" id="save_button" name="submit_action" value="refund" class="button">
<input type="button" id="cancel_button" name="submit_action" value="Cancel" class="button">
</div>
</form>

Use <input type="button" ...> instead that <input type="submit" ...> for cancel button

Datatable inputs get along with row

I have added inputs for only 10 columns in my datatable and trying to save with button click. Below is my code
$('#tblFormBtn').click( function() {
let datas = tblListUpload.$("input").serializeArray();
});
it's getting all the inputs in separate array values. Is it possible to get that array by row?
Update:
working sample
http://live.datatables.net/bucawete/1/

You can map each row to create a serializeArray, here's an example:
const table = $('#example').DataTable();
const data = table.rows().nodes().map((e) => $(e).find('input, select').serializeArray());
console.log(data.toArray());
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Position</th>
<th>Office</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Age</th>
<th>Position</th>
<th>Office</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td><input type="text" id="row-1-age" name="row-1-age" value="61"></td>
<td><input type="text" id="row-1-position" name="row-1-position" value="System Architect"></td>
<td>
<select size="1" id="row-1-office" name="row-1-office">
<option value="Edinburgh" selected="selected">Edinburgh</option>
<option value="London">London</option>
<option value="New York">New York</option>
<option value="San Francisco">San Francisco</option>
<option value="Tokyo">Tokyo</option>
</select>
</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td><input type="text" id="row-2-age" name="row-2-age" value="63"></td>
<td><input type="text" id="row-2-position" name="row-2-position" value="Accountant"></td>
<td>
<select size="1" id="row-2-office" name="row-2-office">
<option value="Edinburgh">Edinburgh</option>
<option value="London">London</option>
<option value="New York">New York</option>
<option value="San Francisco">San Francisco</option>
<option value="Tokyo" selected="selected">Tokyo</option>
</select>
</td>
</tr>
<tbody>
</table>

Adding event handlers to input fields inside bootstrap table

I am using bootstrap table.
My table contains cells that contains input fields.
I try to add event handlers (using jquery) to those input fields but it does not seem to work.
If I add the event handlers to a non bootstrap table it works.
The code below demonstrates the issue. When the user change input fields in the upper table (a bootstrap table), nothing is written to the console.When user change input fields in the lower table (non bootstrap table), a message is written to the console.
How do I add event handlers to the input fields in a bootstrap-table?
$(document).ready(function() {
console.log('ready');
$('#my_table_1').find('input[type="date"]').change(function() {
console.log('Table 1.Date was changed. Need to check if table is sorted by column C.If so - call the table sort.');
});
$('#my_table_1').find('select').change(function() {
console.log('Table 1.Selection was changed. Need to check if table is sorted by column B.If so - call the table sort.');
});
$('#my_table_2').find('input[type="date"]').change(function() {
console.log('Table 2.Date was changed. Need to check if table is sorted by column C.If so - call the table sort.');
});
$('#my_table_2').find('select').change(function() {
console.log('Table 2.Selection was changed. Need to check if table is sorted by column B.If so - call the table sort.');
});
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table#1.15.4/dist/bootstrap-table.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<span>A Bootstrap table</span>
<table id="my_table_1" data-toggle="table" data-sort-stable="true">
<thead>
<tr>
<th data-sortable="true">A</th>
<th data-sortable="true">B</th>
<th data-sortable="true">C</th>
<th data-sortable="false">D</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<select>
<option val="112">A</option>
<option val="2">B</option>
<option val="356" selected>C</option>
</select>
</td>
<td><input type="date" value="2018-07-22"></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>123</td>
<td>
<select>
<option val="1" selected>A</option>
<option val="2">B</option>
<option val="3">C</option>
</select>
</td>
<td><input type="date" value="2014-07-22"></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>56</td>
<td>
<select>
<option val="1">A</option>
<option val="2" selected>B</option>
<option val="3">C</option>
</select>
</td>
<td><input type="date" value="2014-08-23"></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>14</td>
<td>
<select>
<option val="1">A</option>
<option val="2" selected>B</option>
<option val="3">C</option>
</select>
</td>
<td><input type="date" value="2014-07-23"></td>
<td><input type="checkbox"></td>
</tr>
</tbody>
</table>
<!------------------------------------------------------------------->
<hr>
<span>A Non Bootstrap table</span>
<table id="my_table_2">
<thead>
<tr>
<th data-sortable="true">A</th>
<th data-sortable="true">B</th>
<th data-sortable="true">C</th>
<th data-sortable="false">D</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<select>
<option val="112">A</option>
<option val="2">B</option>
<option val="356" selected>C</option>
</select>
</td>
<td><input type="date" value="2018-07-22"></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>123</td>
<td>
<select>
<option val="1" selected>A</option>
<option val="2">B</option>
<option val="3">C</option>
</select>
</td>
<td><input type="date" value="2014-07-22"></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>56</td>
<td>
<select>
<option val="1">A</option>
<option val="2" selected>B</option>
<option val="3">C</option>
</select>
</td>
<td><input type="date" value="2014-08-23"></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>14</td>
<td>
<select>
<option val="1">A</option>
<option val="2" selected>B</option>
<option val="3">C</option>
</select>
</td>
<td><input type="date" value="2014-07-23"></td>
<td><input type="checkbox"></td>
</tr>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/bootstrap-table#1.15.4/dist/bootstrap-table.min.js"></script>

u need to add your script at the bottom and not in top of the table html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table#1.15.4/dist/bootstrap-table.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<title>sorted table</title>
</head>
<body>
<span>A Bootstrap table</span>
<table id="my_table_1" data-toggle="table" data-sort-stable="true">
<thead>
<tr>
<th data-sortable="true">A</th>
<th data-sortable="true">B</th>
<th data-sortable="true">C</th>
<th data-sortable="false">D</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td><select>
<option val="112">A</option>
<option val="2">B</option>
<option val="356" selected>C</option>
</select>
</td>
<td><input type="date" value="2018-07-22"></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>123</td>
<td><select>
<option val="1" selected>A</option>
<option val="2">B</option>
<option val="3">C</option>
</select>
</td>
<td><input type="date" value="2014-07-22"></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>56</td>
<td><select>
<option val="1">A</option>
<option val="2" selected>B</option>
<option val="3">C</option>
</select>
</td>
<td><input type="date" value="2014-08-23"></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>14</td>
<td><select>
<option val="1">A</option>
<option val="2" selected>B</option>
<option val="3">C</option>
</select>
</td>
<td><input type="date" value="2014-07-23"></td>
<td><input type="checkbox"></td>
</tr>
</tbody>
</table>
<!------------------------------------------------------------------->
<hr>
<span>A Non Bootstrap table</span>
<table id="my_table_2">
<thead>
<tr>
<th data-sortable="true">A</th>
<th data-sortable="true">B</th>
<th data-sortable="true">C</th>
<th data-sortable="false">D</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td><select>
<option val="112">A</option>
<option val="2">B</option>
<option val="356" selected>C</option>
</select>
</td>
<td><input type="date" value="2018-07-22"></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>123</td>
<td><select>
<option val="1" selected>A</option>
<option val="2">B</option>
<option val="3">C</option>
</select>
</td>
<td><input type="date" value="2014-07-22"></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>56</td>
<td><select>
<option val="1">A</option>
<option val="2" selected>B</option>
<option val="3">C</option>
</select>
</td>
<td><input type="date" value="2014-08-23"></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>14</td>
<td><select>
<option val="1">A</option>
<option val="2" selected>B</option>
<option val="3">C</option>
</select>
</td>
<td><input type="date" value="2014-07-23"></td>
<td><input type="checkbox"></td>
</tr>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-table#1.15.4/dist/bootstrap-table.min.js"></script>
<script>
$(document).ready(function() {
console.log('ready');
$('#my_table_1').find('input[type="date"]').change(function() {
console.log('Table 1.Date was changed. Need to check if table is sorted by column C.If so - call the table sort.');
});
$('#my_table_1').find('select').change(function() {
console.log('Table 1.Selection was changed. Need to check if table is sorted by column B.If so - call the table sort.');
});
$('#my_table_2').find('input[type="date"]').change(function() {
console.log('Table 2.Date was changed. Need to check if table is sorted by column C.If so - call the table sort.');
});
$('#my_table_2').find('select').change(function() {
console.log('Table 2.Selection was changed. Need to check if table is sorted by column B.If so - call the table sort.');
});
});
</script>
</body>
</html>

Chrome css position absolute for freezing table headers

I currently have two tables that is on top of each other. the front table only shows it's header and the body is hidden using the css "visibility:hidden". this table is using "position:absolute" to make it freeze in place, the table is a complete clone of the 2nd table.
As i was testing on IE, the dropdown and link on the tbody of the 2nd table is working fine but when i tested it on chrome, the 2nd table cannot be clicked as it was blocked by the hidden table body in-front of it.
Are there any alternatives that i can use to implement the freezing of headers on chrome?
Note: The data that will be loaded is dynamically with different sizes. the width of each column will be adjusted accordingly.
Here is a sample code but this works fine on fiddle but won't be working when used as html file and run on chrome: https://fiddle.jshell.net/3poz4o4q/3/
Added the whole HTML file that i tested with.
Got the jquery from here http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js
and saved it on the file name "jquery-1.9.1.min.js" and referenced it.
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script>
function onLoad() {
var cloneData = $('#actualData tr').clone(false);
$("#sampleData").append(cloneData);
var cloneHeader = $('#behindHeader tr').clone();
$("#showingHeader").append(cloneHeader);
$("#sampleData").css("visibility", "collapse");
$("#behindHeader").css("visibility", "collapse");
$("#tableHeader").css("position", "absolute");
}
</script>
<body onload="onLoad()">
<div class="table-header" id="tableHeader">
<table class="editableTable" id="editTable" border="1">
<thead id="showingHeader"/>
<tbody id="sampleData"/>
</table>
</div>
<div class="table-body" id="tableBody">
<table class="editableTable" id="bodytable" border="1">
<thead id="behindHeader">
<tr id="entity-header">
<th colspan="13">
<a id="Create Something">Create Something</a>
<a id="Create another thing">Create another thing</a>
Save
</th>
</tr>
<tr id="column-headers">
<th id="data link">data link</th>
<th id="data 1">data 1</th>
<th id="data 2">data 2</th>
<th id="data 3">data 3</th>
<th id="data 4">data 4</th>
<th id="data 5">data 5</th>
<th id="data 6">data 6</th>
<th id="drop down 1">drop down 1</th>
<th><span id="checkbox 1">checkbox 1</span></th>
<th id="drop down 2">drop down 2</th>
<th><span id="checkbox 2">checkbox 2</span></th>
<th id="drop down 3">drop down 3</th>
<th><span id="checkbox 3">checkbox 3</span></th>
</tr>
</thead>
<tbody id="actualData">
<tr id="actual id" class="modified">
<td ><a href="#" >Data ID</a></td>
<td >Data Description 1</td>
<td >Data Description 2</td>
<td >Data Description 3</td>
<td >Data Description 4</td>
<td >Data Description 6</td>
<td >Data Description 7</td>
<td >
<select>
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select></td>
<td >
<div class="checkbox">
<input id="1" type="checkbox"><label for="1"></label>
</div>
</td>
<td >
<select>
<option value="1" selected="selected">1</option>
<option value="2">2</option>
</select></td>
<td >
<div class="checkbox">
<input id="2" type="checkbox"><label for="2"></label>
</div>
</td>
<td >
<select disabled="disabled">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select></td>
<td >
<div class="checkbox" disabled="disabled">
<input id="3" type="checkbox" disabled="disabled"><label for="3" disabled="disabled"></label>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</body>

Please try 'div class="table-header" id="tableHeader" style="z-index:-1" ';
Put the header div to back;

give space between particular <td> elements in a table

i have two html table's inside a main table. I have to give the space between td of first table so that Heading one should be on top of Element1 and text box and Heading two should be on top of Element2 and select lists which are available in other table. Please suggest how can i achieve this, do i need to modify the html table structure.
Please find the fiddle:https://jsfiddle.net/x5tLdbz4/1/
Below is the css code:
td:nth-child(1) {
padding-right: 90px;
}
HTML code:
<table>
<table>
<tr>
<td class="hone" class="more-padding-on-right">
Heading One
</td>
<td class="htwo">
Heading Two
</td>
</tr>
</table>
<table>
<tr valign="top">
<td> Element1:<input id="myTest" type="text" value=""> </td>
<td>
Element2:<SELECT id="one" size="10" multiple>
<OPTION value="a">AAA</OPTION>
<OPTION value="b">BB</OPTION>
<OPTION value="c">CCC</OPTION>
</SELECT>
</td>
<td valign="center">
>>
</td>
<td>
<SELECT id="two" size="10" multiple>
<OPTION value="a">FF</OPTION>
<OPTION value="b">GG</OPTION>
<OPTION value="c">BHH</OPTION>
</SELECT>
</td>
</tr>
</table>
</table>

I would merge the two tables into one, with colspan values.
Another correction, it should be valign="middle" not center.
http://jsfiddle.net/w8kvm0d9/
.hone, .htwo {
background-color: #EEEEEE;
font-weight:bold;
color:red;
font-size:12px;
height:15px;
}
td {
border: 1px solid silver;
}
td:nth-child(2) {
border: 0;
width: 80px;
}
td select {
vertical-align: top;
}
<table>
<tr>
<td class="hone" class="more-padding-on-right">Heading One</td>
<td> </td>
<td class="htwo" colspan="3">Heading Two</td>
</tr>
<tr>
<td valign="top">Element1:<input id="myTest" type="text" value=""/></td>
<td> </td>
<td valign="top">
Element2:
<SELECT id="one" size="10" multiple>
<OPTION value="a">AAA</OPTION>
<OPTION value="b">BB</OPTION>
<OPTION value="c">CCC</OPTION>
</SELECT>
</td>
<td valign="middle">>></td>
<td valign="top">
<SELECT id="two" size="10" multiple>
<OPTION value="a">FF</OPTION>
<OPTION value="b">GG</OPTION>
<OPTION value="c">BHH</OPTION>
</SELECT>
</td>
</tr>
</table>

I would recommend putting everything into a single table. When you have two separate tables but you want to the columns to align you'll find it nearly impossible to ensure that they always do (especially when a user resizes the browser window). You could also add <thead> and <tbody> tags to distinguish between the header rows and body rows. Also, since you've got 3 columns in the second table you'll need to use the colspan attribute for the second column of the header to tell it span 2 columns, thus allowing the columns to fit in (or, if I didn't understand the alignment you want you might need the colspan on the first header column instaed).
<table>
<thead>
<tr>
<th class="hone" class="more-padding-on-right">
Heading One
</th>
<th class="htwo" colspan="2">
Heading Two
</th>
</tr>
</thead>
<tbody>
<tr valign="top">
<td> Element1:<input id="myTest" type="text" value=""> </td>
<td>
Element2:<SELECT id="one" size="10" multiple>
<OPTION value="a">AAA</OPTION>
<OPTION value="b">BB</OPTION>
<OPTION value="c">CCC</OPTION>
</SELECT>
</td>
<td valign="center">
>>
</td>
<td>
<SELECT id="two" size="10" multiple>
<OPTION value="a">FF</OPTION>
<OPTION value="b">GG</OPTION>
<OPTION value="c">BHH</OPTION>
</SELECT>
</td>
</tr>
</tbody>
</table>

you can use one table structure and it'll look something like this:
http://jsfiddle.net/swm53ran/267/
<table>
<thead>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Element 1<input type="text"/>
</td>
<td>
Element 2
<SELECT id="one" size="10" multiple>
<OPTION value="a">AAA</OPTION>
<OPTION value="b">BB</OPTION>
<OPTION value="c">CCC</OPTION>
</SELECT>
>>
<SELECT id="two" size="10" multiple>
<OPTION value="a">FF</OPTION>
<OPTION value="b">GG</OPTION>
<OPTION value="c">BHH</OPTION>
</SELECT>
</td>
</tr>
</tbody>
</table>

A better way (if sticking with tables) is to use a single table for this:
<table>
<tr>
<td class="hone" class="more-padding-on-right">Heading One</td>
<td class="htwo">Heading Two</td>
<td></td>
<td class="hthree">Heading Three</td>
</tr>
<tr valign="top">
<td>Element1:
<input id="myTest" type="text" value="">
</td>
<td>Element2:
<SELECT id="one" size="10" multiple>
<OPTION value="a">AAA</OPTION>
<OPTION value="b">BB</OPTION>
<OPTION value="c">CCC</OPTION>
</SELECT>
</td>
<td valign="center">
>>
</td>
<td>
<SELECT id="two" size="10" multiple>
<OPTION value="a">FF</OPTION>
<OPTION value="b">GG</OPTION>
<OPTION value="c">BHH</OPTION>
</SELECT>
</td>
</tr>
</table>
https://jsfiddle.net/rcj1xgur/3/