Develop Reference

how to get checked checkbox table row value in codeigniter

VIEW PAGE
<table>
<thead>
<tr>
<th><input type="checkbox" checked="checked" class="checkAll" name="checkAll" /></th>
<th>#</th>
<th>Beneficiary Name</th>
<th>Stipendiary Type</th>
<th class="text-right box">Bonus ₹</th>
<th class="text-right">Stipendiary ₹</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">
<input type="checkbox" checked="checked" class="chkclass " name="bene_id[]" value="1" /><input type="hidden" name="amount[]" value="500" tabindex ="-1" />
</td>
<td>1</td>
<td>Jeinbai Nesamony</td>
<td>Poor Pension</td>
<td class="text-right box" id="hideshow">
<input type="text" name="bonus[]" id="bonus" value="" class="tbl-input-cus bonus" tabindex ="1" />
</td>
<td class="text-right wagein">500.00</td>
</tr>
<tr>
<td align="center">
<input type="checkbox" checked="checked" class="chkclass " name="bene_id[]" value="2" /><input type="hidden" name="amount[]" value="400" tabindex ="-1" />
</td>
<td>2</td>
<td>Chellammal Kochimoni</td>
<td>Poor Aid</td>
<td class="text-right box" id="hideshow">
<input type="text" name="bonus[]" id="bonus" value="" class="tbl-input-cus bonus" tabindex ="1" />
</td>
<td class="text-right wagein">400.00</td>
</tr>
<tr>
<td align="center">
<input type="checkbox" checked="checked" class="chkclass " name="bene_id[]" value="3" /><input type="hidden" name="amount[]" value="400" tabindex ="-1" />
</td>
<td>3</td>
<td>Thasammal Thangaiah</td>
<td>Poor Aid</td>
<td class="text-right box" id="hideshow">
<input type="text" name="bonus[]" id="bonus" value="" class="tbl-input-cus bonus" tabindex ="1" />
</td>
<td class="text-right wagein">400.00</td>
</tr>
<tr>
<td align="center">
<input type="checkbox" checked="checked" class="chkclass " name="bene_id[]" value="4" /><input type="hidden" name="amount[]" value="400" tabindex ="-1" />
</td>
<td>4</td>
<td>Roselet</td>
<td>Poor Aid</td>
<td class="text-right box" id="hideshow">
<input type="text" name="bonus[]" id="bonus" value="" class="tbl-input-cus bonus" tabindex ="1" />
</td>
<td class="text-right wagein">400.00</td>
</tr>
<tr>
<td align="center">
<input type="checkbox" checked="checked" class="chkclass " name="bene_id[]" value="5" /><input type="hidden" name="amount[]" value="400" tabindex ="-1" />
</td>
<td>5</td>
<td>Kamalam Chellam R.</td>
<td>Poor Aid</td>
<td class="text-right box" id="hideshow">
<input type="text" name="bonus[]" id="bonus" value="" class="tbl-input-cus bonus" tabindex ="1" />
</td>
<td class="text-right wagein">400.00</td>
</tr>
</tbody>
MY REQUIREMENT
I want to save bellowed data's to table
1. bene_id
2. Bonus ₹
3. Stipendiary ₹
I've fetch this table data form existing Beneficiary Table. So Bene_id and Stipendiary ₹ value get from that tabel. Bonus ₹ will be an input.
Now i want to save table data to the payment table.
I'm trying to post the value by array. it's working fine.
now i've an issue with the check box. i want to neglect the row value that unchecked. That means i want row value which was checkbox : checked
i'm expecting jquery for passing checkbox : checked row value to hidden input array.

As i told you in the comments section, you can use normal HTML forms to submit to the action method on your controller, but you need to modify your form a little bit, this is the easiest solution.
Despite of option one simplicity i decided to give you another approach to solve this problem, so first look at the code of HTML and JavaScript:
<table>
<thead>
<tr>
<th><input type="checkbox" checked="checked" class="checkAll" name="checkAll" /></th>
<th>#</th>
<th>Beneficiary Name</th>
<th>Stipendiary Type</th>
<th class="text-right box">Bonus ₹</th>
<th class="text-right">Stipendiary ₹</th>
</tr>
</thead>
<tbody id="details">
<tr>
<td align="center">
<input type="checkbox" checked="checked" class="chkclass " id="bene_id" value="1" />
</td>
<td>1</td>
<td>Jeinbai Nesamony</td>
<td>Poor Pension</td>
<td class="text-right box" id="hideshow">
<input type="text" name="bonus" id="bonus" value="" class="tbl-input-cus bonus" tabindex ="1" />
</td>
<td class="text-right wagein" id="amount">500.00</td>
</tr>
<tr>
<td align="center">
<input type="checkbox" checked="checked" class="chkclass " id="bene_id" value="2" />
</td>
<td>2</td>
<td>Chellammal Kochimoni</td>
<td>Poor Aid</td>
<td class="text-right box" id="hideshow">
<input type="text" name="bonus" id="bonus" value="" class="tbl-input-cus bonus" tabindex ="1" />
</td>
<td class="text-right wagein" id="amount" >400.00</td>
</tr>
<tr>
<td align="center">
<input type="checkbox" checked="checked" class="chkclass " id="bene_id" value="3" />
</td>
<td>3</td>
<td>Thasammal Thangaiah</td>
<td>Poor Aid</td>
<td class="text-right box" id="hideshow">
<input type="text" name="bonus" id="bonus" value="" class="tbl-input-cus bonus" tabindex ="1" />
</td>
<td class="text-right wagein" id="amount" >400.00</td>
</tr>
<tr>
<td align="center">
<input type="checkbox" checked="checked" class="chkclass " id="bene_id" value="4" />
</td>
<td>4</td>
<td>Roselet</td>
<td>Poor Aid</td>
<td class="text-right box" id="hideshow">
<input type="text" name="bonus" id="bonus" value="" class="tbl-input-cus bonus" tabindex ="1" />
</td>
<td class="text-right wagein" id="amount">400.00</td>
</tr>
<tr>
<td align="center">
<input type="checkbox" checked="checked" class="chkclass " id="bene_id" value="5" />
</td>
<td>5</td>
<td>Kamalam Chellam R.</td>
<td>Poor Aid</td>
<td class="text-right box" id="hideshow">
<input type="text" id="bonus" value="" class="tbl-input-cus bonus" tabindex ="1" />
</td>
<td class="text-right wagein" id="amount">400.00</td>
</tr>
</tbody>
</table>
<button id="submit">Submit</button>
<script type="text/javascript" src="<?= base_url(assets/js/jquery.min.js) ?>"></script>
<script type="text/javascript">
function jsonify(){
var rows = $('#details tr');
var a = [];
rows.each(function(){
if($(this).find('#bene_id').is(':checked'))
{
var bene_id = $(this).find('#bene_id').val();
var stipendiary = $(this).find('#amount').html();
var bonus = $(this).find('#bonus').val();
var x = {
bene_id:bene_id,
stipendiary:stipendiary,
bonus:bonus
};
a.push(x);
}
});
var c = JSON.stringify(a);
return c;
}
$(function(){
$('#submit').click(function(){
$data = jsonify();
$.ajax({
type:'POST',
url:'<?= base_url('controller/method_name') ?>',
data:{details:data},
success:function(response)
{
//if you data save successfuly, do sth here..
}
});
});
});
The following code is a PHP code of the action method on the specified controller:
public function method_name()
{
$details = json_decode($this->input->post('details'));
foreach($details as $det ){
$bene_id = $det->bene_id;
$stipendiary = $det->stipendiary;
$bonus = $det->bonus;
// your logic goes here
}
}
In this solution i didn't considered the validation and security issues, because i wanted to make it simple, so before you put it in your production server you must deal with these issues.
I hope it helps.

jquery input field changes all php loop items value in wordpress

I am trying to create a custom wordpress template for products. For which I need to update the Total quantity when 2 sub-quantity is increased or decreased. Also the value of total quantity will be multiplied with price.
Let's say:
sub-quantity-1 value = 2 and sub-quantity-2 value = 3,
So Total quantity value = 5 and price is 5 x $100 = $500
The problem is I am generating this input fields using wordpress loop, so all the inputs have same class & name.
Lets say: I am increasing sub-quantity for PRODUCT 1 which increases all Total Quantity for PRODUCT 1 to PRODUCT 100
PHP CODE:
<?php $wp_query = new WP_Query( array(
'post_type' => 'product',
'post__in' => array( 481, 478, 934, 178 ),
'posts_per_page' => 15,
'offset' => 0,
'orderby' => '',
'order' => 'ASC' ) );
?>
<?php if ( $wp_query->have_posts() ) : while ( $wp_query->have_posts() ) : $wp_querys->the_post();
global $product;
$product = get_product( get_the_ID() );
?>
<table>
<thead>
<tr>
<th>Price</th>
<th>Quantity</th>
<th>Total Quantity</th>
<th>Button</th>
</tr>
</thead>
<tbody class="products-container">
<tr class="product-<?php echo esc_attr( $product->id ); ?>">
<form action="<?php echo esc_url( $product->add_to_cart_url() ); ?>" class="cart" method="post" enctype='multipart/form-data'>
<td class="price">
<span class="woocommerce-Price-amount amount">
<span class="woocommerce-Price-currencySymbol">
<?php echo get_woocommerce_currency_symbol(); ?>
</span>
<?php echo $product->get_price() ?>
</span>
</td>
<td class="quantity">
<table>
<tr>
<?php echo qty-sz(); ?>
</tr>
<tr>
<?php echo qty-bn(); ?>
</tr>
</table>
</td>
<td class="quantity-total">
<?php woocommerce_quantity_input(); ?>
</td>
<td class="button">
<input type="hidden" name="add-to-cart" value="<?php echo esc_attr( $product->id ); ?>" />
<input type="hidden" name="product_id" value="<?php echo esc_attr( $product->id ); ?>" />
<input type="hidden" name="variation_id" class="variation_id" value="0" />
<button type="submit" class="button buy-now-btn cart-btn product_type_simple add_to_cart_button ajax_add_to_cart" />Add to Cart</button>
</td>
</form>
</tr>
</tbody>
<?php endwhile; wp_reset_query();?>
</table>
GENERATED HTML CODE:
<table>
<thead>
<tr>
<th></th>
<th>Product</th>
<th>Note Box</th>
<th>Price</th>
<th>Choose Your Keyblade</th>
<th>Product Total Quantity</th>
<th></th>
</tr>
</thead>
<tbody>
<tr class="product-934" data-role="product">
<form action="/testsite/wholesale-product-page-template-custom/?add-to-cart=934" class="cart" method="post" enctype="multipart/form-data"></form>
<td class="image">
<img src="https://localhost/testsite/wp-content/plugins/woocommerce/assets/images/placeholder.png" alt="Placeholder" width="150px" height="150px"> </td>
<td class="title">
<h3>Group Product</h3>
</td>
<td class="note">
<label>Type Your Letter</label><input class="letter-note wh-input" name="_wholesale_letter" value="" maxlength="1" placeholder="TYPE 1 LETTER"> </td>
<td class="price">
<span class="woocommerce-Price-amount amount">
<span class="woocommerce-Price-currencySymbol">
$ </span>
786 </span>
</td>
<td class="keyblade">
<table>
<tbody><tr>
<th>Schlage-SC1</th><td><input class="sc-note wh-input wh-qty" name="_wholesale_sc" value="" type="number"></td> </tr>
<tr>
<th>Kwikset-KW1</th><td><input class="kw-note wh-input wh-qty" name="_wholesale_kw" value="" type="number"></td> </tr>
</tbody></table>
</td>
<td class="quantity-field">
<div class="quantity">
<input step="1" min="1" max="" name="quantity" value="1" title="Qty" class="input-text qty text" size="4" pattern="[0-9]*" inputmode="numeric" type="number">
</div>
</td>
<td class="button">
<input name="add-to-cart" value="934" type="hidden">
<input name="product_id" value="934" type="hidden">
<input name="variation_id" class="variation_id" value="0" type="hidden">
<button type="submit" class="button buy-now-btn cart-btn product_type_simple add_to_cart_button ajax_add_to_cart">Add to Cart</button>
</td>
</tr>
</tbody>
<style>.product-type-variable .summary .price { display: inline-block; } .quantity { display: inline-block; }</style>
<tbody><tr class="product-719 variation-722 wrapper" data-role="product">
<form class="variations_form cart" method="post" enctype="multipart/form-data" data-product_id="719" data-product_variations="null"></form>
<td class="image">
<img src="https://localhost/testsite/wp-content/uploads/2016/10/151-Sterling-Silver-Pink-Tourmaline.png" alt="Custom Key Blades-722" width="150px" height="150px"> </td>
<td class="title">
<h3>Custom Key Blades</h3><br>
<b>18 K Yellow Gold </b>
</td>
<td class="note">
<label>Type Your Letter</label><input class="letter-note wh-input" name="_wholesale_letter" value="" maxlength="1" placeholder="TYPE 1 LETTER"> </td>
<td class="price">
<span class="price"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>1,150.00</span></span> </td>
<td class="keyblade">
<table>
<tbody><tr>
<th>Schlage-SC1</th><td><input class="sc-note wh-input wh-qty" name="_wholesale_sc" value="" type="number"></td> </tr>
<tr>
<th>Kwikset-KW1</th><td><input class="kw-note wh-input wh-qty" name="_wholesale_kw" value="" type="number"></td> </tr>
</tbody></table>
</td>
<td>
<div class="quantity">
<input step="1" min="" max="" name="quantity" value="1" title="Qty" class="input-text qty text" size="4" pattern="[0-9]*" inputmode="numeric" type="number">
</div>
</td>
<td>
<input name="attribute_pa_setting" value="18-k-yellow-gold" type="hidden">
<button type="submit" class="single_add_to_cart_button btn btn-primary ajax_add_to_cart"><span class="glyphicon glyphicon-tag"></span> Add to cart</button>
<input name="variation_id" value="722" type="hidden">
<input name="product_id" value="719" type="hidden">
<input name="add-to-cart" value="719" type="hidden">
</td>
</tr>
<tr class="product-719 variation-723 wrapper" data-role="product">
<form class="variations_form cart" method="post" enctype="multipart/form-data" data-product_id="719" data-product_variations="null"></form>
<td class="image">
<img src="https://localhost/testsite/wp-content/uploads/2016/10/1470935641.png" alt="Custom Key Blades-723" width="150px" height="150px"> </td>
<td class="title">
<h3>Custom Key Blades</h3><br>
<b>18 K White Gold </b>
</td>
<td class="note">
<label>Type Your Letter</label><input class="letter-note wh-input" name="_wholesale_letter" value="" maxlength="1" placeholder="TYPE 1 LETTER"> </td>
<td class="price">
<span class="price"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>1,000.00</span></span> </td>
<td class="keyblade">
<table>
<tbody><tr>
<th>Schlage-SC1</th><td><input class="sc-note wh-input wh-qty" name="_wholesale_sc" value="" type="number"></td> </tr>
<tr>
<th>Kwikset-KW1</th><td><input class="kw-note wh-input wh-qty" name="_wholesale_kw" value="" type="number"></td> </tr>
</tbody></table>
</td>
<td>
<div class="quantity">
<input step="1" min="" max="" name="quantity" value="1" title="Qty" class="input-text qty text" size="4" pattern="[0-9]*" inputmode="numeric" type="number">
</div>
</td>
<td>
<input name="attribute_pa_setting" value="18-k-white-gold" type="hidden">
<button type="submit" class="single_add_to_cart_button btn btn-primary ajax_add_to_cart"><span class="glyphicon glyphicon-tag"></span> Add to cart</button>
<input name="variation_id" value="723" type="hidden">
<input name="product_id" value="719" type="hidden">
<input name="add-to-cart" value="719" type="hidden">
</td>
</tr>
<tr class="product-719 variation-724 wrapper" data-role="product">
<form class="variations_form cart" method="post" enctype="multipart/form-data" data-product_id="719" data-product_variations="null"></form>
<td class="image">
<img src="https://localhost/testsite/wp-content/uploads/2016/10/Modern-Iconic-Key-with-Black-Diamond-.png" alt="Custom Key Blades-724" width="150px" height="150px"> </td>
<td class="title">
<h3>Custom Key Blades</h3><br>
<b>18 K Rose Gold </b>
</td>
<td class="note">
<label>Type Your Letter</label><input class="letter-note wh-input" name="_wholesale_letter" value="" maxlength="1" placeholder="TYPE 1 LETTER"> </td>
<td class="price">
<span class="price"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>950.00</span></span> </td>
<td class="keyblade">
<table>
<tbody><tr>
<th>Schlage-SC1</th><td><input class="sc-note wh-input wh-qty" name="_wholesale_sc" value="" type="number"></td> </tr>
<tr>
<th>Kwikset-KW1</th><td><input class="kw-note wh-input wh-qty" name="_wholesale_kw" value="" type="number"></td> </tr>
</tbody></table>
</td>
<td>
<div class="quantity">
<input step="1" min="" max="" name="quantity" value="1" title="Qty" class="input-text qty text" size="4" pattern="[0-9]*" inputmode="numeric" type="number">
</div>
</td>
<td>
<input name="attribute_pa_setting" value="18-k-rose-gold" type="hidden">
<button type="submit" class="single_add_to_cart_button btn btn-primary ajax_add_to_cart"><span class="glyphicon glyphicon-tag"></span> Add to cart</button>
<input name="variation_id" value="724" type="hidden">
<input name="product_id" value="719" type="hidden">
<input name="add-to-cart" value="719" type="hidden">
</td>
</tr>
</tbody>
</table>
AND HERE IS THE JQUERY SCRIPT
<script src="https://code.jquery.com/jquery-1.11.0.js" integrity="sha256-zgND4db0iXaO7v4CLBIYHGoIIudWI5hRMQrPB20j0Qw=" crossorigin="anonymous"></script>
<script>
var quantity = 0;
$(document).ready(function () {
$('input.wh-qty').each(function () {
quantity += parseInt($(this).val());
});
$('input[name="quantity"]').val(quantity);
$('input.wh-qty').on('input', function () {
quantity = 0;
$('input.wh-qty').each(function () {
var amountInfo = parseInt($(this).val());
amountInfo = (amountInfo) ? amountInfo : 0;
quantity += amountInfo;
});
$('input[name="quantity"]').val(quantity);
});
});
</script>

I think you can give your <tr class="product-<?php... an attribute of <tr data-role="product" class="product-<?ph and then use jQuery to get and set values of each row:
$(document).ready(function(){
$('input.wh-qty').on('input', function () {
setQuantity();
});
})
const setQuantity = function(){
$.each(
$(`tr[data-role="product"]`), // add role="product" to tr
function(index,element){
const $el = $(element);
const sc = $el.find("input.sc-note.wh-qty").val();
const kw = $el.find("input.kw-note.wh-qty").val();
if(sc!=="" || kw!==""){
$el.find('input[name="quantity"]').val(
(sc*1)+(kw*1)
);
}
}
);
};
If that doesn't work could you please post the entire html so we don't need to puzzle together what the html is?

javascript for form validation works in firefox but not IE8

I am very new to javascript, and took a chunk of code and modified it for my own use. It works fine in Firefox (*NIX and Windows). In IE8, the text field validation works fine, but the select drop downs return as invalid even when an option is selected.
<!DOCTYPE html>
<head>
<meta charset="utf-8 />
<link href="/FNMOC/CSS/styles.main.css" rel="stylesheet" type="text/css">
<title>Fleet Numerical Meteorology and Oceanography Center</title>
<link rel="icon" href="favicon.ico">
<script type="text/javascript">
var RequiredFieldIDs =
'FirstName,LastName,Affiliation,Command,Email,Phone,METOC,Classification,Purpose,Priority,Due,NELat,SWLat,NELong,SWLong';
function CheckRequiredFields()
{
RequiredFieldIDs = RequiredFieldIDs.replace(/[, ]+/,",");
var idList = RequiredFieldIDs.split(",");
var Empties = new Array();
{
var s = TrimFormFieldValues(document.getElementbyId(idList[i]).value);
if (s.length<1) { Empties.push(idList[i]); }
}
if (! Empties.length) { return true; }
var ess = new String ("\n\nThe Following are required:\n");
for (var i=0; i<Empties.length; i++) { ess += '\n\t' + Empties[i]; }
alert (ess);
return false;
}
function TrimFormFieldValues(s)
{
s = s.replace (/^\s*/,"");
s = s.replace (/\s*$/,"");
}
</script>
<script type="text/javascript">
function ShowMenu()
{
var form = document.climo;
var field = form.Classification;
var select = field.selectedIndex;
{
if(select == 4) document.getElementById('tableHide').style.display = '';
else document.getElementById('tableHide').style.display = 'none';
}
}
</script>
<script type="text/javascript">
function ShowMenu2()
{
var form = document.climo;
var field = form.Affiliation;
var select = field.selectedIndex;
{
if(select == 1)document.getElementById('tableHide2').style.display = "";
else document.getElementById('tableHide2').style.display = 'none';
}
}
</script>
</head>
<body>
<div class="wrapper">
<div class="banner">
<iframe src="/FNMOC/banner.html" width="100%" height="30" frameBorder="0" scrolling="no">
</iframe>
</div>
<div class="classification">
<h2>THIS PAGE UNCLASSIFIED</h2>
</div>
<div class="header">
<a href="/FNMOC/index.html">
<img class="floatright" src="/FNMOC/IMAGES/fnmoc.png" />
</a>
<br />
<h3>
We produce and deliver weather, ocean and climate information for Fleet Safety, Warfighting Effectiveness and National Defense.
<br />
<br />
Atmospheric and Oceanographic Prediction enabling Fleet Safety and Decision Superiority
</h3>
<br />
<br />
</div>
<div class="left_col">
<iframe src="/FNMOC/menu.html" width="100%" height="800" frameBorder="0" scrolling="no">
</iframe>
</div>
<div class="main_col">
<center>
<h2>FORM UNCLASSIFIED UNTIL FILLED OUT</h2>
<h2>Climatology Support Request</h2>
</center>
<form name=climo action="/CGI/mail-form-climo.cgi" method="post" onsubmit="return CheckRequiredFields();">
<table border="0" cellpadding="5" width="100%">
<tr>
<td width="100%" colspan="2" align="center">
<hr>
<b>
<h2>
<center>
Contact Information
</h2>
</b>
<i>
* indicates required field
</i>
</center>
<hr>
</td>
</tr>
<tr>
<td width="30%">
<b>* First Name:</b>
</td>
<td width="70%">
<input type="text" id="FirstName" size="20" maxlength="250" name="1. First Name:">
</input>
</td>
</tr>
<tr>
<td width="30%">
<b>* Last Name:</b>
</td>
<td width="70%">
<input type="text" id="LastName" size="30" maxlength="250" name="2. Last Name:">
</input>
</td>
</tr>
<tr>
<td width="30%">
<b>* Affiliation:</b>
</td>
<td width="70%">
<select id="Affiliation" name="3. Affiliation:" onchange="!!(ShowMenu2());" size="1">
<option></option>
<option>MIL</option>
<option>CIV</option>
<option>CTR></option>
</select>
</td>
</tr>
<tr>
<td width="30%">
</td>
<td width="70%">
<table style="display:none" id="tableHide2">
<tr>
<td>
Branch of Service:
<select name="4. Branch of Service:" size="1">
<option></option>
<option>USN</option>
<option>USAF</option>
<option>USA</option>
<option>USMC</option>
<option>USCG</option>
</select>
</td>
</tr>
<tr>
<td>
Rank:
<input type="text" id="Rank" size="10" maxlength="10" name="5. Rank:">
</input>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="30%">
<b>
* Command/Organization:
</b>
</td>
<td width="70%">
<input="text" id="Command" size="30" maxlength="250" name="6. Command/Organization:">
</input>
</td>
</tr>
<tr>
<td width="30%">
<b>* Email:</b>
</td>
<td width="70%">
<input type="text" id="Email" size="30" maxlength="250" name="7. Email:"
</input>
</td>
</tr>
<tr>
<td width="30%">
<b>* Phone Number:</b>
</td>
<td width="70%">
<input type="text" id="Phone" size="30" maxlength="30" name="8. Phone number:">
</input>
</td>
</tr>
<tr>
<td width="30%">
<b>DSN:</b>
</td>
<td width="70%">
<input type="text" size="13" maxlength="13" name="9. DSN:">
</input>
</td>
</tr>
<tr>
<td width="30%>
<b>* Are you meterologist or Oceanographer personnel?</b>
</td>
<td width="70%">
<select id="METOC" name="11. METOC:">
<option></option>
<option>YES</option>
<option>NO</option>
</select>
</td>
</tr>
<tr>
<tr width="100%" colspan="2" align="center">
<hr>
<b>
<h2>
Security Classification
</h2>
</b>
<center>
<i>
* indicates required field
</i>
</center>
<hr>
<i>
If classified, provide derivative and declassification info please.
</i>
<hr>
<br />
</td>
</tr>
<tr>
<td width="30%">
<b>* Classification of this request:</b>
</td>
<td width="70%">
<select id="Classification" name="12. Classification:" onchange="!!(ShowMenu()); size="1">
<option></option>
<option>UNCLASSIFIED</option>
<option>CONFIDENTIAL</option>
<option>SECRET</option>
<option>TOP SECRET</option>
</select>
</td>
</tr>
<tr>
<td width="30%">
</td>
<td width="70">
<table style="display:none" id="tableHide">
<tr>
<td>
<input type=checkbox name="12a. Caveat:" value="SI">SI</input>
<input type=checkbox name="12b. Caveat:" value="TK">TK</input>
<input type=checkbox name="12c. Caveat:" value="NOFORN">NOFORN</input>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="30%">
<b>Classified By:</b>
</td>
<td width="70%">
<input type="text" size="40" maxlength="250" name="13. Classified By:">
</input>
</td>
</tr>
<td width="100%" colspan="2" align="center">
<hr>
<b>
<h2>
Request Information
</h2>
</b>
<i>
* Indicates Required Field
</i>
<hr>
</td>
</tr>
<tr>
<td width="100%" colspan="2" align="center">
<b>
MISSION INFORMATION
</b>
<hr>
<br />
</td>
</tr>
<tr>
<td width="30%">
<b>* Mission Support Catagory:</b>
</td>
<td width="70%">
<select id=Purpose name="17. Purpose:" size="1">
<option></option>
<option>Combat/Operation</option>
<option>Contingency</option>
<option>Exercise</option>
<option>Training</option>
<option>Experiment</option>
<option>Research</option>
</select>
<b>Mission Name:</b>
<input type="text" size="20" maxlength="250" name="18. Purpose name:">
</input>
</td>
</tr>
<tr>
<td width="30%">
<b>* Priority</b>
</td>
<td width="70%">
<select id="Priority" name="19. Priority:" size="1">
<option></option>
<option>LOW</option>
<option>MED</option>
<option>HIGH</option>
<option>URGENT</option>
</select>
</td>
</tr>
<tr>
<td width="30%">
<b>* Due date:</b>
</td>
<td width="70%">
<input type="text" size="10" maxlength="10" id="Due" name="20. Date due:">
</input>
</td>
</tr>
<tr>
<td width="30%">
<b>* Location</b>
<br />
provide NE/SW corner latitude and longitude in decimal format of each mesh you will use for applicataion/forcasting.
<br />
Northern hemisphere latitude is + and Southern hemisphere latitude is -, Eastern longitude from GMT is + and Western longitude from GMT is -.
</td>
<td width="70%">
<table>
<tr>
<td width="50%" aligh="right">
NE Latitude: <input type="text" id=NELat size="10" maxlength="250" name="22. NE Lat:">
</input>
<br />
SW Latitude: <input type="text" id=SWLat size="10" maxlength="250" name="23. SW Lat:">
</input>
</td>
<td width="50%" align="right">
NE Longitude: &nbsp<input type="text" id=NELong size="10" maxlength="250" name="24. NE Long:">
</input>
<br />
SW Longitude: <input type="text" id=SWLong size="10" maxlength="250" name="25. SW Long:">
</input>
</td>
</tr>
</table>
</td>
</tr>
</table>
<hr>
<center>
<input type="submit" name="Submit" value="Submit">
</input>
<input type="reset" name="Reset" value="Reset">
</input>
</center>
</form>
</div>
<br class="cleaner" />
<div class="classification">
<h2>THIS PAGE UNCLASSIFIED</h2>
</div>
<div class="banner">
<iframe src="/FNMOC/banner.html" width="100%" height="30" frameBorder="0" scrolling="no">
</iframe>
</div>
</div>
</body>
</html>
The other select fields have the same code, just different names/values. No selection validates in IE8. Your help greatly appreciated.
edited to add all code as per request

The way you validate select box is not correct. You can get value of the selected option like select.value and it will work in Forefox and Chrome. However the proper way to do it so that IE could also understand it, is using the value of selected option:
var el = document.getElementbyId(idList[i]);
var s = TrimFormFieldValues(el.options[el.selectedIndex].value);
If you have different type of controls in your form, you can check if the current one is selectbox with this check:
if (idList[i].tagName == 'SELECT') {
// this is select, get the value using el.options[el.selectedIndex].value
}

Extracting about 10 variables from Javascript code(after running) and writing to page?

I finished my Javascript code and its about 3,000 lines long. There are many variables within the code(60+), but a few of the variables I'd like to write to my page such as
totalTime
longitudinalAcceleration
shiftTime
numberOfShifts
corneringTime
numberOfCorners
instantaneousCoefficientOfFriction
totalFuel
meanLongAccel
meanHorsepower
These are all variables within the Jscript code(not included because it would be too long). What I'd like to be able to do is to write this code to my main HTML page which calls the function. THe javascript function is called images.js(dont ask lol). I'm pretty sure I need an output variable thats an object within the Jscript file. This part I'm not too sure about how to do, or how to later write parts of the object variable in the actual HTML page.
Basically I am running Main Calculation() which is contained within image.js, after this function is ran, I want to pull those variables and write them to my HTML page. Those are the variables you see above. How do I grab those variables after the calculation has been ran? I'm pretty sure I need to use jQuery or Javascript to write the variables to the page??
Here is a link to the page if it helps
http://www.fsaesim.com/Products.html
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="images.js"></script>
<script type="text/javascript">
function ShowCalculation() {
Main($("#vehicleWeightTxt").val(), $("#tireChoiceSel").val(), $("#wheelBaseTxt").val(), $("#wheelRadiusTxt").val(), $("#trackWidthTxt").val(), $("#hcgTxt").val(), $("#weightDistributionTxt").val(), $("#shiftRpmTxt").val(), $("#ntTxt").val());
}
</script>
</head>
<body id="page4">
<div class="body1">
<div class="body2">
<div class="body5">
<div class="main">
<header>
<div class="wrapper">
<h1>Progress Business Company</h1>
<nav>
<ul id="menu">
<li id="nav1" class="active">Home<span>Page</span></li>
<li id="nav2">News<span>Updates</span></li>
<li id="nav3">Available<span>Features</span></li>
<li id="nav4">Run<span>Simulation</span></li>
<li id="nav5">Contact<span>Support</span></li>
</ul>
</nav>
</div>
</header>
</div>
</div>
</div>
</div>
<div class="body1">
<div class="main">
<br />
<table border="0">
<tr>
<td>
Tire Choice
</td>
<td>
<select id="tireChoiceSel">
<option value="1">Michelin 13"</option>
<option value="2">Hoosier 13" Large</option>
<option value="3">Hoosier 13" Small</option>
<option value="4">Mexican Tires</option>
</select>
</td>
<td>
Engine:
</td>
<td><select id="engineSelectionSel">
<option value="1">Yamaha R6 - 4 Cylinder</option>
<option value="2">Yamaha WR450 - 1 Cylinder</option>
<option value="3">Honda CBR600RR - 4 Cylinder </option>
<option value="4">Suzuki GSXR600 - 4 Cylinder</option>
</select>
</td>
<td>
Torque Curve:
</td>
<td>
<select id="torqueCurveSel">
<option value="1">Cornell Curve 2008</option>
<option value="2">MIT Curve 2008</option>
<option value="3">RMIT Curve 2008 </option>
<option value="4">Fullerton Curve 2008</option>
</select>
</td>
</tr>
<tr>
<td>
Vehicle Weight:
</td>
<td>
<input type="text" id="vehicleWeightTxt" value="530" size="3" />
</td>
<td>
Number of NOS:
</td>
<td>
<input type="text" id="Text1" value="100" size="3" />
</td>
<td>
NOS Bottle #1:
</td>
<td>
<input type="text" id="Text2" value="3000" size="3" />
</td>
</tr>
<tr>
<td>
Wheel Base:
</td>
<td>
<input type="text" id="wheelBaseTxt" value="61" size="3" />
</td>
<td>
NOS Bottle #2:
</td>
<td>
<input type="text" id="Text3" value="3000" size="3" />
</td>
<td>
NOS Bottle #3:
</td>
<td>
<input type="text" id="Text4" value="3000" size="3" />
</td>
</tr>
<tr>
<td>
Wheel Radius:
</td>
<td>
<input type="text" id="wheelRadiusTxt" value="10.25" size="3" />
</td>
<td>
NOS Bottle #4:
</td>
<td>
<input type="text" id="Text5" value="3000" size="3" />
</td>
<td>
NOS Bottle #5:
</td>
<td>
<input type="text" id="Text6" value="3000" size="3" />
</td>
</tr>
<tr>
<td>
Track Width:
</td>
<td>
<input type="text" id="trackWidthTxt" value="50" size="3" />
</td>
<td>
NOS Bottle #6:
</td>
<td>
<input type="text" id="Text7" value="3000" size="3" />
</td>
<td>
NOS Bottle #7:
</td>
<td>
<input type="text" id="Text8" value="3000" size="3" />
</td>
</tr>
<tr>
<td>
Center of Gravity:
</td>
<td>
<input type="text" id="hcgTxt" value="12" size="3" />
</td>
<td>
NOS Bottle #8:
</td>
<td>
<input type="text" id="Text9" value="3000" size="3" />
</td>
<td>
NOS Bottle #9:
</td>
<td>
<input type="text" id="Text10" value="3000" size="3" />
</td>
</tr>
<tr>
<td>
Weight Distribution:
</td>
<td>
<input type="text" id="weightDistributionTxt" value="0.50" size="3" />
</td>
<td>
NOS Bottle #10:
</td>
<td>
<input type="text" id="Text11" value="3000" size="3" />
</td>
<td>
NOS Bottle #11:
</td>
<td>
<input type="text" id="Text12" value="3000" size="3" />
</td>
</tr>
<tr>
<td>
Shift RPM:
</td>
<td>
<input type="text" id="shiftRpmTxt" value="9500" size="3" />
</td>
<td>
NOS Bottle #12:
</td>
<td>
<input type="text" id="Text13" value="3000" size="3" />
</td>
<td>
NOS Bottle #13:
</td>
<td>
<input type="text" id="Text14" value="3000" size="3" />
</td>
</tr>
<tr>
<td>
Final Drive Ratio:
</td>
<td>
<input type="text" id="ntTxt" value="2.86" size="3" />
</td>
<td>
NOS Bottle #14:
</td>
<td>
<input type="text" id="Text15" value="3000" size="3" />
</td>
<td>
NOS Bottle #15:
</td>
<td>
<input type="text" id="Text16" value="3000" size="3" />
</td>
</tr>
</table>
<center><input type="submit" value="Calculate" onclick="ShowCalculation(); return false;" /></center>
</div>
</div>
<div class="body4">
<div class="main">
<article id="content2">
<div class="wrapper">
<section class="col3">
<h4>Why Us?</h4>
<ul class="list1">
<li>Professional Engineers</li>
<li>Years of Experience</li>
<li>Vehicle Dynamics Experts</li>
</ul>
</section>
<section class="col3 pad_left2">
<h4>Address</h4>
<ul class="address">
<li><span>Location:</span>United States, CA</li>
<li><span>City:</span>Northridge</li>
<li><span>Phone:</span>1-888-888-8888</li>
<li><span>Email:</span>Contact Us</li>
</ul>
</section>
<section class="col3 pad_left2">
<h4>Follow Us</h4>
<ul id="icons">
<li><img src="images/icon1.jpg" alt="">Facebook</li>
<li><img src="images/icon2.jpg" alt="">Twitter</li>
</ul>
</section>
<section class="col2 right">
<h4>Search The Site</h4>
<form id="newsletter" method="post">
<div>
<div class="wrapper">
<input class="input" type="text" value="Type Your Email Here" onblur="if(this.value=='') this.value='Type Your Email Here'" onFocus="if(this.value =='Type Your Email Here' ) this.value=''" />
</div>
Search
</div>
</form>
</section>
</div>
</article>
<!-- content end -->
</div>
</div>

if I get it right, you compute these values, they are a result you want to display,
I would suggest to create a div where you want to show them (like, under the calculate button)(or a modal box, that would replace the alert).
and in js, a bit basic but well:
var stuffToShow = [
'totalTime',
'longitudinalAcceleration',
'shiftTime',
'numberOfShifts',
'corneringTime',
'numberOfCorners',
'instantaneousCoefficientOfFriction',
'totalFuel',
'meanLongAccel',
'meanHorsepower'
];
var someHtml = '';
$(stuffToShow).each( function () {
someHtml += '<div id="'+this+'">'+this+': '+youResultObject[this]+</div>;
});
$('#yourResultDiv').html(someHtml).slidedown('slow');

It is not completely clear what you are trying to do, but if this page is linked to from a javascript-based page that does the calculations, you can pass the variables using GET or POST (see here: http://www.php.net/manual/en/reserved.variables.post.php).
If you are trying to alter the html using php based on javascript running in that same page, it's going to be impossible. I recommend using only javascript, not php, in that case.

Well, assuming you have a javascript object e.g
var data = { totalTime: 12, shiftTime: 10 }
You could loop through the data object, create a label and an input for each data item in the array. Let's assume you would like to display this in a div called show_data
for( var i in data )
{
$('#show_data').append( "<label for='"+ i + "'>" + i + "</label>" );
$('#show_data').append( "<input id='"+ i +"' value='"+ data[i] + "' />" );
{
Not sure if this is what you were asking. This could be improved a lot but it gives you a rough idea.

It appears that your images.js file is obfuscated. I'm going out on a limb here, but it is possible you are asking about how to access variable names defined in that JS file before it gets compiled. If that is the case I have a few recommendations...
First, don't obfuscate your code like that; it is pointless and affects performance. If that is not an option, it is possible that the obfuscator will let you define specific keywords not to munge; set the variables you want to access in the obfuscator's configuration.
If none of this helps, then you will likely need to post more information.

copy value of one textbox with same ID to another in javascript

Below is the html code of my problem I need to copy the contents of one textbox to another onblur or onkeyup of similar ID. Kindly help me. The javascript function "sync" should be updated for my issue. Thanks in advance.
<html>
</head>
<body>
<div id="container">
<script type="text/javascript">
function sync(order){
var val, i, val1;
val = document.getElementsByTagName('input');
alert(val.length);
for (i=0;i<val.length;i++){
if(val[i].getAttribute('id')==order){
val1 = document.getElementById(order).value;
if(val1 != '')
break;
}
}
}
</script>
<div id="body">
<div id="wrapper">
<form id="assignship" name="assignship" action="/drivewise-dst/assignship" method="post">
<table class="wwFormTable">
<table width="1024" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="10" colspan="3" class="titlebar"
style="background-repeat: no-repeat; align: right"> </td>
</tr>
<tr>
<td colspan="3">
<table width="1011" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="17"> </td>
<td width="10" bgcolor="#CCCCCC" class="header"> </td>
<td width="110" bgcolor="#CCCCCC" class="header">Export To Excel</td>
<td width="130" bgcolor="#CCCCCC" class="header">Order #</td>
<td width="175" bgcolor="#CCCCCC" class="header">First Name</td>
<td width="205" bgcolor="#CCCCCC" class="header">Last Name</td>
<td width="142" bgcolor="#CCCCCC" class="header">Tracking #</td>
<td width="115" bgcolor="#CCCCCC" class="header">Serial #</td>
</tr>
</table>
</td>
</tr>
<tr>
<td></td>
<td>
<div
style="width: 993px; height: 350px; overflow: auto; overflow-x: hidden; background-color: #f9f5e3;">
<table width="1024" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="7">
<div align="center"></div>
</td>
</tr>
<tr>
<td width="114">
<div align="center"><input name="Export7" type="checkbox"
id="Export7" onclick="javascript:checkedAll();" /></div>
</td>
<td width="105"> </td>
<td width="175"> </td>
<td width="175"> </td>
<td width="142"> </td>
<td width="142"> </td>
</tr>
<input type="hidden" name="vinHidden" value="VIN" id="assignship_vinHidden"/>
<tr>
<td width="114" align="center"><input
value="0"
type=checkbox name="chkbox" id="chkbox"></input></td>
<td width="105" class="chartcopy">1067</td>
<td width="175" class="chartcopy">ELEPHANT</td>
<td width="175" class="chartcopy">FOX</td>
<td width="142"><input type="text" name="trackingNumber" size="15" maxlength="50" value="" id="1067" onblur="javascript:sync('1067')"/></td>
<td width="160">
<div class="action-error"></div>
<input type="text" name="serial" size="15" maxlength="10" value="" id="serial"/>
</td>
</tr>
<input type="hidden" name="vinHidden" value="VIN" id="assignship_vinHidden"/>
<tr>
<td width="114" align="center"><input
value="1"
type=checkbox name="chkbox" id="chkbox"></input></td>
<td width="105" class="chartcopy">1067</td>
<td width="175" class="chartcopy">ELEPHANT</td>
<td width="175" class="chartcopy">FOX</td>
<td width="142"><input type="text" name="trackingNumber" size="15" maxlength="50" value="" id="1067" onblur="javascript:sync('1067')"/></td>
<td width="160">
<div class="action-error"></div>
<input type="text" name="serial" size="15" maxlength="10" value="" id="serial"/>
</td>
</tr>
<input type="hidden" name="vinHidden" value="VIN" id="assignship_vinHidden"/>
<tr>
<td width="114" align="center"><input
value="2"
type=checkbox name="chkbox" id="chkbox"></input></td>
<td width="105" class="chartcopy">1067</td>
<td width="175" class="chartcopy">ELEPHANT</td>
<td width="175" class="chartcopy">FOX</td>
<td width="142"><input type="text" name="trackingNumber" size="15" maxlength="50" value="" id="1067" onblur="javascript:sync('1067')"/></td>
<td width="160">
<div class="action-error"></div>
<input type="text" name="serial" size="15" maxlength="10" value="" id="serial"/>
</td>
</tr>
<input type="hidden" name="vinHidden" value="VIN" id="assignship_vinHidden"/>
<tr>
<td width="114" align="center"><input
value="3"
type=checkbox name="chkbox" id="chkbox"></input></td>
<td width="105" class="chartcopy">1085</td>
<td width="175" class="chartcopy">CAT</td>
<td width="175" class="chartcopy">DOG</td>
<td width="142"><input type="text" name="trackingNumber" size="15" maxlength="50" value="" id="1085" onblur="javascript:sync('1085')"/></td>
<td width="160">
<div class="action-error"></div>
<input type="text" name="serial" size="15" maxlength="10" value="" id="serial"/>
</td>
</tr>
<input type="hidden" name="vinHidden" value="VIN" id="assignship_vinHidden"/>
<tr>
<td width="114" align="center"><input
value="4"
type=checkbox name="chkbox" id="chkbox"></input></td>
<td width="105" class="chartcopy">3333</td>
<td width="175" class="chartcopy">APPLE</td>
<td width="175" class="chartcopy">BOY</td>
<td width="142"><input type="text" name="trackingNumber" size="15" maxlength="50" value="" id="3333" onblur="javascript:sync('3333')"/></td>
<td width="160">
<div class="action-error"></div>
<input type="text" name="serial" size="15" maxlength="10" value="" id="serial"/>
</td>
</tr>
<input type="hidden" name="vinHidden" value="VIN" id="assignship_vinHidden"/>
<tr>
<td width="114" align="center"><input
value="5"
type=checkbox name="chkbox" id="chkbox"></input></td>
<td width="105" class="chartcopy">3333</td>
<td width="175" class="chartcopy">APPLE</td>
<td width="175" class="chartcopy">BOY</td>
<td width="142"><input type="text" name="trackingNumber" size="15" maxlength="50" value="" id="3333" onblur="javascript:sync('3333')"/></td>
<td width="160">
<div class="action-error"></div>
<input type="text" name="serial" size="15" maxlength="10" value="" id="serial"/>
</td>
</tr>
<input type="hidden" name="vinHidden" value="VIN" id="assignship_vinHidden"/>
<tr>
<td width="114" align="center"><input
value="6"
type=checkbox name="chkbox" id="chkbox"></input></td>
<td width="105" class="chartcopy">3334</td>
<td width="175" class="chartcopy">APPLE</td>
<td width="175" class="chartcopy">BOY</td>
<td width="142"><input type="text" name="trackingNumber" size="15" maxlength="50" value="" id="3334" onblur="javascript:sync('3334')"/></td>
<td width="160">
<div class="action-error"></div>
<input type="text" name="serial" size="15" maxlength="10" value="" id="serial"/>
</td>
</tr>
<input type="hidden" name="vinHidden" value="VIN" id="assignship_vinHidden"/>
<tr>
<td width="114" align="center"><input
value="7"
type=checkbox name="chkbox" id="chkbox"></input></td>
<td width="105" class="chartcopy">3335</td>
<td width="175" class="chartcopy">APPLE</td>
<td width="175" class="chartcopy">BOY</td>
<td width="142"><input type="text" name="trackingNumber" size="15" maxlength="50" value="" id="3335" onblur="javascript:sync('3335')"/></td>
<td width="160">
<div class="action-error"></div>
<input type="text" name="serial" size="15" maxlength="10" value="" id="serial"/>
</td>
</tr>
</table>
</div>
</td>
<td> </td>
</tr>
<tr>
<td colspan="3">
<table width="1011" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="43" bgcolor="#FFFFFF"> </td>
</td>
<td width="157" bgcolor="#FFFFFF"><input type="button" alt="" id="xxx" name="xxx" value="submit"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</table></form>
</div>
</div>
</div>
</body>
</html>

Your main issue is all your <input> elements have the same id, "1067". Not only is this not XHTML compliant, but it will cause issues with your javascript, as document.getElementById(order) will return multiple elements, a scenario which this function is not designed to handle.
I'd suggest applying classes to all your <input> elements, use jQuery to bind the .blur() event to each element of that class, and perform your logic that way (use jQuery's foreach enumerator rather than a for loop with id matching).
Of course you could accomplish this with regular JavaScript too (as you have done, inline "onblur" event wiring on the actual elements).
But first things first, fix up the HTML so it can play nice with JavaScript.

id is supposed to be unique, you should not have more than one element with the same id on a page, and you cannot use getElementById to reference them (it will probably return the first element in document order with the id).
You can do it...if you must, by using getElementsByTagName and a loop (somewhat similar to your code)
function getIds(id) {
var inputs = document.getElementsByTagName('input'), matches = [];
for (var i=0; i<inputs.length; i++)
if (inputs[i].getAttribute('id') == id) matches.push(inputs[i]);
return matches;
}
But you should really re-factor and put "similar" values in element classes, in which case, the code above will still work, just replace 'id' with 'class'