Develop Reference

How to get input value from each td after attribute readonly applied?

I built a script which is clone every child rows from the parent typing on a checkbox checked here.
It was working until now. I want each child input value to be saved by ajax. But only the last child is echoed.
JS
function cloneAllz(clsName) {
var $input1 = $('.prdEdt').find('td.' + clsName + ' input[type="text"]').filter(':visible:first'); //master input
//console.log($input1.attr('id'));//test master input
$input1.on('input', function() {
var $this = $(this);
window.setTimeout(function() {
if ($('input.' + clsName).is(':checked')) {
var $child = $('.prdEdt').find('td.' + clsName + ' input[type="text"]');
$child.val($this.val()).attr('readonly', true).each(function() { //how to loop each input in the column???
console.log($this.attr('id'));
});
$input1.attr('readonly', false);
} else {
$('.prdEdt').find('td.' + clsName + ' input[type="text"]').removeAttr('readonly', ); //remove readonly
}
}, 0);
});
}
HTML
<table class="table table-bordered table-striped prdEdt">
<tr>
<th>ID</th>
<th>Code
<label class="pull-right label label-default">
<input type="checkbox" class="cde" onChange="cloneAllz('cde')" /> <em class="fa fa-clone"></em></label>
</th>
<th>Title
<label class="pull-right label label-default">
<input type="checkbox" class="tt_en" onChange="cloneAllz('tt_en')" /> <em class="fa fa-clone"></em></label>
</th>
<th>Cost</th>
</tr>
<tr>
<td>00067</td>
<td class="cde">
<input type="text" name="prd_cde" id="prd_cde|67" class="form-control" value="3000009" />
</td>
<td class="tt_en">
<input type="text" name="prd_title_en" id="prd_title_en|67" class="form-control" value="TRANSFER KRABI AIRPORT-AO NANG" />
</td>
<td>
<input type="number" name="prd_cost" id="prd_cost|67" class="form-control" value="800" />
</td>
</tr>
<tr>
<td>00068</td>
<td class="cde">
<input type="text" name="prd_cde" id="prd_cde|68" class="form-control " value="3000009" />
</td>
<td class="tt_en">
<input type="text" name="prd_title_en" id="prd_title_en|68" class="form-control " value="TRANSFER KRABI AIRPORT-AO NANG " />
</td>
<td>
<input type="number" name="prd_cost" id="prd_cost|68" class="form-control" value="600" />
</td>
</tr>
</table>
So the question is : How to echo each row input to save them data via ajax???
function cloneAllz(clsName) {
var $input1 = $('.prdEdt').find('td.' + clsName + ' input[type="text"]').filter(':visible:first'); //master input
//console.log($input1.attr('id'));//test master input
$input1.on('input', function() {
var $this = $(this);
window.setTimeout(function() {
if ($('input.' + clsName).is(':checked')) {
var $child = $('.prdEdt').find('td.' + clsName + ' input[type="text"]');
$child.val($this.val()).attr('readonly', true).each(function() { //how to loop each input in the column???
console.log($this.attr('id'));//only first row echoed twice!
});
$input1.attr('readonly', false);
} else {
$('.prdEdt').find('td.' + clsName + ' input[type="text"]').removeAttr('readonly', ); //remove readonly
}
}, 0);
});
}
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered table-striped prdEdt">
<tr>
<th>ID</th>
<th>Code
<label class="pull-right label label-default">
<input type="checkbox" class="cde" onChange="cloneAllz('cde')" /> <em class="fa fa-clone"></em></label>
</th>
<th>Title
<label class="pull-right label label-default">
<input type="checkbox" class="tt_en" onChange="cloneAllz('tt_en')" /> <em class="fa fa-clone"></em></label>
</th>
<th>Cost</th>
</tr>
<tr>
<td>00067</td>
<td class="cde">
<input type="text" name="prd_cde" id="prd_cde|67" class="form-control" value="3000009" />
</td>
<td class="tt_en">
<input type="text" name="prd_title_en" id="prd_title_en|67" class="form-control" value="TRANSFER" />
</td>
<td>
<input type="number" name="prd_cost" id="prd_cost|67" class="form-control" value="800" />
</td>
</tr>
<tr>
<td>00068</td>
<td class="cde">
<input type="text" name="prd_cde" id="prd_cde|68" class="form-control " value="3000009" />
</td>
<td class="tt_en">
<input type="text" name="prd_title_en" id="prd_title_en|68" class="form-control " value="TRANSFER" />
</td>
<td>
<input type="number" name="prd_cost" id="prd_cost|68" class="form-control" value="600" />
</td>
</tr>
</table>

HTML Radio Button

I have typed the following code in Front Page and it gives error in displaying Radio Button Values (as undefined):
function f1() {
var fn = document.frm.T1.value;
var ln = document.frm.T2.value;
var ad = document.frm.S1.value;
var sex = document.frm.R1.value;
var nat = document.frm.D1.value;
var typ = document.frm.R2.value;
var typ1 = document.frm.C1.value;
var typ2 = document.frm.C2.value;
var typ3 = document.frm.C3.value;
var budg = document.frm.R3.value;
var mail = document.frm.T5.value;
var mob = document.frm.T3.value;
var resi = document.frm.T4.value;
var city = document.frm.D2.value;
var com = document.frm.S2.value;
document.write("Welcome Dear " + fn + " " + ln + "<br>" + "Your Residential Address is " + ad + " and you are " + nat + " National " + "<br>" + "You are looking to " + typ + " the property " +
" and you are interested in " + typ1 + " " + typ2 + " " + typ3 + " Flat." + "<br>" + " Your estimated budget is INR " + budg + "<br>" +
" You will be informed using your e-mail address " + mail + " You will be contacted on your Mobile Number " + mob + " or Residence Number " + resi + "<br>" +
" You are looking for the property in " + city + " City" + " You have following comments " + "<br>" + com);
}
body {
background-color: #222;
}
<p align="center"> </p>
<p align="left"><font face="Berlin Sans FB Demi" color="#FFFFFF">
</font>
</p>
<p align="center"><span style="background-color: #FFFFFF">
<font face="Berlin Sans FB Demi">Kindly Fill - Up the details given below and
out Customer Support Team will contact you shortly!</font></span>
</p>
<p align="left"><font face="Berlin Sans FB Demi" color="#FFFFFF">
</font>
</p>
<form method="POST" name="frm" action="--WEBBOT-SELF--">
<!--webbot bot="SaveResults" U-File="../_private/form_results.csv" S-Format="TEXT/CSV" S-Label-Fields="TRUE" startspan -->
<input TYPE="hidden" NAME="VTI-GROUP" VALUE="0">
<!--webbot bot="SaveResults" i-checksum="43374" endspan -->
<div align="left">
<table border="1" width="39%">
<tr>
<td colspan="2">
<p align="center"><b><font color="#FFFF00">INQUIRY FORM</font></b>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>First Name</b></font>
</td>
<td>
<input type="text" name="T1" size="25">
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Last Name</b></font>
</td>
<td>
<input type="text" name="T2" size="25">
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Postal Address</b></font>
</td>
<td>
<textarea rows="2" name="S1" cols="20"></textarea>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Gender</b></font>
</td>
<td>
<input type="radio" value="MALE" name="R1"><font color="#FFFFFF">MALE
</font>
<input type="radio" value="FEMALE" name="R1"><font color="#FFFFFF">
FEMALE</font>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Nationality</b></font>
</td>
<td>
<select size="1" name="D1">
<option selected value="Indian">INDIAN</option>
<option value="British">BRITISH</option>
<option value="Canadian">CANADIAN</option>
<option value="Chinese">CHINESE</option>
<option value="Japanese">JAPANESE</option>
<option value="GCC">MID EASTERN</option>
</select>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Looking For</b></font>
</td>
<td>
<input type="radio" name="R2" value="Buy" id="1"><font color="#FFFFFF">BUY
<input type="radio" name="R2" value="Lease">LEASE</font>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Type</b></font>
</td>
<td>
<input type="checkbox" name="C1" value="1 BHK"><font color="#FFFFFF">1
BHK <input type="checkbox" name="C2" value="2 BHK">2 BHK
<input type="checkbox" name="C3" value="3 BHK">3 BHK</font>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Budget</b></font>
</td>
<td>
<input type="radio" name="R3" value="20-30 Lakhs"><font color="#FFFFFF">20-30
LAKHS</font>
<p>
<input type="radio" name="R3" value="40-60 Lakhs"><font color="#FFFFFF">40-60
LAKHS</font>
</p>
<p>
<input type="radio" name="R3" value="MORE
THAN 60 LAKHS"><font color="#FFFFFF">MORE
THAN 60 LAKHS</font>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF">E-Mail ID</font>
</td>
<td>
<input type="text" name="T5" size="20">
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF">Phone Number</font>
</td>
<td>
<input type="text" name="T3" size="20">
<font color="#FFFFFF">Mob</font>
<p>
<input type="text" name="T4" size="20"><font color="#FFFFFF">
Res</font>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Preferred City</b></font>
</td>
<td>
<select size="1" name="D2">
<option selected value="Mumbai">MUMBAI</option>
<option value="Bangalore">BANGALORE</option>
<option value="Pune">PUNE</option>
<option value="Ahmedabad">AHMEDABAD</option>
<option value="Kochi">KOCHI</option>
</select>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Comments</b></font>
</td>
<td>
<textarea rows="2" name="S2" cols="20"></textarea>
</td>
</tr>
</table>
</div>
<p align="left">
<input type="submit" value="Inquire" name="B1" onclick="f1()">
<input type="reset" value="Reset" name="B2">
</p>
</form>
<p align="center">
<a href="Home.htm">
<img border="0" src="home_1.png" width="75" height="72">
</a>
</p>
Rest of the things are working except radio buttons. Kindly help with a solution for the same. Thank you in advance

<form>
What color do you prefer?<br>
<input type="radio" name="colors" id="red">Red<br>
<input type="radio" name="colors" id="blue">Blue
</form>
<button onclick="check()">Check "Red"</button>
<button onclick="uncheck()">Uncheck "Red"</button>
<script>
function check() {
document.getElementById("red").checked = true;
}
function uncheck() {
document.getElementById("red").checked = false;
}
</script>
link:-http://www.w3schools.com/jsref/prop_radio_checked.asp

All Radio Buttons has the same name. So you have to select the checked radio button by using document.querySelector('input[name=R1]:checked').value. I have even checked for unselected checkbox value as "Empty"
function f1() {
var fn = document.frm.T1.value;
var ln = document.frm.T2.value;
var ad = document.frm.S1.value;
var sex = document.frm.R1.value;
var nat = document.frm.D1.value;
var typ = document.frm.R2.value;
var typ1 = document.frm.C1.value;
var typ2 = document.frm.C2.value;
var typ3 = document.frm.C3.value;
var budg = document.frm.R3.value;
var mail = document.frm.T5.value;
var mob = document.frm.T3.value;
var resi = document.frm.T4.value;
var city = document.frm.D2.value;
var com = document.frm.S2.value;
document.write("Welcome Dear " + fn + " " + ln + "<br/>" + "Your Sex is " + ((document.querySelector('input[name=R1]:checked'))?document.querySelector('input[name=R1]:checked').value:"Empty") + "<br/>" + "Your Residential Address is " + ad + " and you are " + nat + " National " + "<br>" + "You are looking to " + typ + " the property " +
" and you are interested in " + typ1 + " " + typ2 + " " + typ3 + " Flat." + "<br>" + " Your estimated budget is INR " + budg + "<br>" +
" You will be informed using your e-mail address " + mail + " You will be contacted on your Mobile Number " + mob + " or Residence Number " + resi + "<br>" +
" You are looking for the property in " + city + " City" + " You have following comments " + "<br>" + com);
}
body {
background-color: #222;
}
<p align="center"> </p>
<p align="left"><font face="Berlin Sans FB Demi" color="#FFFFFF">
</font>
</p>
<p align="center"><span style="background-color: #FFFFFF">
<font face="Berlin Sans FB Demi">Kindly Fill - Up the details given below and
out Customer Support Team will contact you shortly!</font></span>
</p>
<p align="left"><font face="Berlin Sans FB Demi" color="#FFFFFF">
</font>
</p>
<form method="POST" name="frm" action="--WEBBOT-SELF--">
<!--webbot bot="SaveResults" U-File="../_private/form_results.csv" S-Format="TEXT/CSV" S-Label-Fields="TRUE" startspan -->
<input TYPE="hidden" NAME="VTI-GROUP" VALUE="0">
<!--webbot bot="SaveResults" i-checksum="43374" endspan -->
<div align="left">
<table border="1" width="39%">
<tr>
<td colspan="2">
<p align="center"><b><font color="#FFFF00">INQUIRY FORM</font></b>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>First Name</b></font>
</td>
<td>
<input type="text" name="T1" size="25">
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Last Name</b></font>
</td>
<td>
<input type="text" name="T2" size="25">
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Postal Address</b></font>
</td>
<td>
<textarea rows="2" name="S1" cols="20"></textarea>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Gender</b></font>
</td>
<td>
<input type="radio" value="MALE" name="R1"><font color="#FFFFFF">MALE
</font>
<input type="radio" value="FEMALE" name="R1"><font color="#FFFFFF">
FEMALE</font>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Nationality</b></font>
</td>
<td>
<select size="1" name="D1">
<option selected value="Indian">INDIAN</option>
<option value="British">BRITISH</option>
<option value="Canadian">CANADIAN</option>
<option value="Chinese">CHINESE</option>
<option value="Japanese">JAPANESE</option>
<option value="GCC">MID EASTERN</option>
</select>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Looking For</b></font>
</td>
<td>
<input type="radio" name="R2" value="Buy" id="1"><font color="#FFFFFF">BUY
<input type="radio" name="R2" value="Lease">LEASE</font>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Type</b></font>
</td>
<td>
<input type="checkbox" name="C1" value="1 BHK"><font color="#FFFFFF">1
BHK <input type="checkbox" name="C2" value="2 BHK">2 BHK
<input type="checkbox" name="C3" value="3 BHK">3 BHK</font>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Budget</b></font>
</td>
<td>
<input type="radio" name="R3" value="20-30 Lakhs"><font color="#FFFFFF">20-30
LAKHS</font>
<p>
<input type="radio" name="R3" value="40-60 Lakhs"><font color="#FFFFFF">40-60
LAKHS</font>
</p>
<p>
<input type="radio" name="R3" value="MORE
THAN 60 LAKHS"><font color="#FFFFFF">MORE
THAN 60 LAKHS</font>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF">E-Mail ID</font>
</td>
<td>
<input type="text" name="T5" size="20">
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF">Phone Number</font>
</td>
<td>
<input type="text" name="T3" size="20">
<font color="#FFFFFF">Mob</font>
<p>
<input type="text" name="T4" size="20"><font color="#FFFFFF">
Res</font>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Preferred City</b></font>
</td>
<td>
<select size="1" name="D2">
<option selected value="Mumbai">MUMBAI</option>
<option value="Bangalore">BANGALORE</option>
<option value="Pune">PUNE</option>
<option value="Ahmedabad">AHMEDABAD</option>
<option value="Kochi">KOCHI</option>
</select>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Comments</b></font>
</td>
<td>
<textarea rows="2" name="S2" cols="20"></textarea>
</td>
</tr>
</table>
</div>
<p align="left">
<input type="submit" value="Inquire" name="B1" onclick="f1()">
<input type="reset" value="Reset" name="B2">
</p>
</form>
<p align="center">
<a href="Home.htm">
<img border="0" src="home_1.png" width="75" height="72">
</a>
</p>

You can do this either by jQuery or jsvascript
In jQuery use $('input[name="R1"]:checked').val(); here R1 is your checkbox name
In javascript get the dom elements by name and loop through the elements to get the selection.
I have attached a sample code snippet.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function ChangeSelection() {
//Using Jquery
var selection = $('input[name="R1"]:checked').val();
console.log("jQuery Result - " + selection);
//Javascript
var radios = document.getElementsByName('R1');
for (var i = 0, length = radios.length; i < length; i++) {
if (radios[i].checked) {
//Selected Radio
selection = radios[i].value;
// only one radio can be logically checked, don't check the rest
break;
}
}
console.log("JavaScript Result - " + selection);
}
</script>
</head>
<body>
<input type="radio" value="MALE" name="R1" onclick="ChangeSelection()"><font>MALE</font>
<input type="radio" value="FEMALE" name="R1" onclick="ChangeSelection()"><font>FEMALE</font>
</body>
</html>

How to get the column sum total values of last 2 column's in this dynamic table

The below code is used to add new row to the table, also multiply two fields and show the result in the final field, in this dynamically generated row and at last part of code, removes the added row if it is not needed.
<script type="text/javascript">
$(window).load(function(){
$('.add-box').click(function() {
var box_html = $('<tr class="multLote"><td align="center"><input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;" /></td> ' +
'<td><textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100" > </textarea></td>' +
'<td><input type="text" name="lote20[]" value="0" class="val20" /></td>' +
'<td><input type="text" name="lote10[]" value="0" class="val10" /></td>' +
'<td><input type="text" disabled name="lote_result[]" class="lote_result" value="0"></td>' +
'<th>Remover</th></tr>');
$('#tabela-lotes tbody').append(box_html);
return false;
});
$('#tabela-lotes').on("keyup", ".multLote input", function() {
var mult = 0;
// for each row:
console.log($(this).closest('table').find("tr.multLote").length);
$(this).closest('tr.multLote').each(function() {
// get the values from this row:
var $val20 = $('.val20', this).val();
var $val10 = $('.val10', this).val();
console.log($val100);
var $total = ($val20 * $val10);
console.log($total);
// set total for the row
$('.lote_result', this).val($total);
mult += $total;
});
});
$('#tabela-lotes').on('click', '.remove-box', function(e) {
e.preventDefault();
$(this).closest('tr.multLote').remove();
});
});
</script>
This is the html code.
<form action="tabledb.php" method="POST">
<body>
<input type="button" class="add-box" value="Add">
<table id="tabela-lotes">
<thead>
<tr>
<th>
SL. NO
</th>
<th>
PRODUCT NAME
</th>
<th>
RATE PER CB
</th>
<th>
CBs
</th>
<th>
AMOUNT
</th>
</tr>
</thead>
<tbody><tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100" value="0"> </textarea>
</td>
<td>
<input type="text" name="lote20[]" class="val20" value="0">
</td>
<td>
<input type="text" name="lote10[]" class="val10" value="0">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="0">
</td>
</tr>
</tbody></table>
<table>
<tr><th>
Total CBS :</th>
<td> <input type="text" name="total_cbs" id="total_cbs" placeholder="Total CBS" style="height:25px;font-weight:bold;" onfocus="cal1()" readonly ></td></tr>
<tr><th>Total AMOUNT : </th>
<td><input type="text" name="total" id="total" placeholder="Total Rs." style="height:25px;font-weight:bold;" onfocus="cal2('.$i.')" readonly></td></tr>
</table>
<input type="submit" value="submit">
</form>
I want to the get the total coloumn sum of lote10[ ] and lote_result[ ] fields to be displayed in the total_cbs and total fields respectively.Please help, Thank you in advance.
enter image description here
I have updated my question with the image of the output, which states exactly what i need, Thank You.

Assuming the end result looks like this:
var result = 0;
var elements = document.getElementsByTagName("table")[0].getElementsByTagName("tr");
for (var i = elements.length - 1; i > elements.length - 3; i--) {
var inputs = elements[i].getElementsByTagName('input');
result += parseInt(inputs[inputs.length - 1].value);
}
console.log('total', result);
alert('total ' + result);
<table>
<tbody>
<tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100"></textarea>
</td>
<td>
<input type="text" name="lote20[]" value="0" class="val20">
</td>
<td>
<input type="text" name="lote10[]" value="0" class="val10">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="7">
</td>
<th>Remover
</th>
</tr>
<tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100"></textarea>
</td>
<td>
<input type="text" name="lote20[]" value="0" class="val20">
</td>
<td>
<input type="text" name="lote10[]" value="0" class="val10">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="7">
</td>
<th>Remover
</th>
</tr>
<tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100"></textarea>
</td>
<td>
<input type="text" name="lote20[]" value="0" class="val20">
</td>
<td>
<input type="text" name="lote10[]" value="0" class="val10">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="7">
</td>
<th>Remover
</th>
</tr>
<tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100"></textarea>
</td>
<td>
<input type="text" name="lote20[]" value="0" class="val20">
</td>
<td>
<input type="text" name="lote10[]" value="0" class="val10">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="7">
</td>
<th>Remover
</th>
</tr>
<tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100"></textarea>
</td>
<td>
<input type="text" name="lote20[]" value="0" class="val20">
</td>
<td>
<input type="text" name="lote10[]" value="0" class="val10">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="7">
</td>
<th>Remover
</th>
</tr>
</tbody>
</table>
JSFIDDLE

I need to print the values entered in an HTML form on the same page on submit

hotmailI need the values entered into the form to print out on the screen when submit is pressed. How do I do the Javascript to do this. I don't know where to start so please help!
Also does it look formatted correctly, I feel i am missing some things and that using tables to format was probably the wrong way of doing it.
<script type="text/javascript">
info = document.getElementById("personalInfo");
info.innerHTML = "<strong>Peronal Info: </strong>" + "<br>" + "Name: " +
document.feedback.fname.value +
" " +
document.feedback.lname.value +
"<br>" + "Email: " +
document.feedback.email.value;
info = document.getElementById("experienceSubmit");
info.innerHTML = "<strong>Experience and Salary: </strong>" + "<br>" + "Years of experience: " +
document.feedback.experience.value +
"<br>" + "Date of availability: " +
document.feedback.date.value +
"<br>" + "Compensation Chosen: " +
document.feedback.comp.value +
"<br>" + "Region Selected: " +
document.feedback.region.value;
info = document.getElementById("otherSubmit");
info.innerHTML = "<strong>Other information: </strong>" + "<br>" + "# of References " +
document.feedback.reference.value +
"<br>" + "Additional Comments: " +
document.feedback.comments.value;
return false;
}
</script>
</head>
<body background="../Assignment 5/_images/abstract_color_background_picture_8016-wide.jpg" >
<form name="feedback" method="post" onSubmit="return checkform()">
<section id="pinfo" class="inputArea">
<fieldset>
<table>
<tr>
<td>Last Name: </td>
<td><input name="lname"
type="text"
autofocus
required
placeholder="lname"
size="25" />
</td>
</tr>
<tr>
<td>First Name: </td>
<td><input name="fname"
type="text"
size="25"
required
placeholder="fname" />
</td>
</tr>
<tr>
<td>Email: </td>
<td><input name="email"
type="email"
size="40"
required
placeholder="....#hotmail.com" />
</td>
</tr>
<td>Gender: </td>
<td><select name="gender">
<option selected disabled style='display:none;'>
Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>
</tr>
</table>
</fieldset>
</section>
<section id="experience">
<fieldset>
<table>
<tr>
<td>
<label for="experience">Years of Experience: </label>
<input name="experience" type="number" />
</td>
</tr>
<tr>
<td>
<label for="date">Date</label>
<input name="date" type="date" />
</td>
<tr>
<td>
<label for="comp">Compensation: </label><br>
<input name="comp" type="radio" id="Salary" value="Salary Selected">Salary
<input name="comp" type="radio" id="SalaryWB" value="Salary with bonus Selected">Salary with Bonus
<input name="comp" type="radio" id="Commission" value="Commission Selected">Commission
</td>
</tr>
<tr>
<td>
<label for="region">Region: </label><br>
<input name="region" type="checkbox" id="East" value="East Selected">East
<input name="region" type="checkbox" id="West" value="West Selected">West
<input name="region" type="checkbox" id="North" value="North Selected">North
<input name="region" type="checkbox" id="South" value="South Selected">South
</td>
</tr>
</table>
</fieldset>
</section>
<section id="other">
<fieldset>
<table>
<tr>
<td>
<label for="reference">References<br>0 &nbsp 1 &nbsp 2 &nbsp&nbsp 3 &nbsp&nbsp 4 &nbsp&nbsp 5<br></label>
<input name="reference" id="reference"
type="range"
value="0"
min="0"
max="5"
step="1" />
</td>
</tr>
<tr>
<td>
<label for="comments">Additional Comments: <br></label>
<textarea
name="comments"
rows="5"
cols="20"
placeholder="Please include any other pertinent information here"></textarea> </td>
</tr>
</table>
</fieldset>
<input type="submit" value="Submit" />
<input type="reset" value="Clear" />
</section>
</form>
<section id="personalInfo"></section>
<section id="experienceSubmit"></section>
<section id="otherSubmit"></section>
</body>

Yes in onsubmit checkform() function do the codding of printing values...
like...
<script>
function checkform()
{
document.getElementById("outL").innerHTML=feedback.lname.value;
//like this you can do for all field
}
</script>

i have created sample for you. please check below code
$("#feedback").submit(function(e){
alert("hi");
event.preventDefault();
});
Link

Calculating Subtotals for Category Sections Using Class Names

I'm working on a project that is based on an Excel spreadsheet, where I need to calculate budgets, etc. There are various categories in my table, and I need to calculate the subtotal of each category. Here's a screenshot to make it more clear:
http://i.imgur.com/loyLbW7.png
My problem is, I'm not sure how to calculate the subtoal for each category. Right now, I have $('.subcat100 .budget').each(function(). The class "subcat100" is attached to the tr and changes for each category section (subcat100, subcat200, subcat300, etc.). The numerical value is based off the sub category number stored in database. How would I pull all of these classes and iterate through them?
jQuery:
$(document).ready(function() {
$('input[name="txtQuantity[]"],input[name="txtUnitCost[]"]').change(function(e) {
var budget = 0;
var $row = $(this).parent().parent();
var quanity = $row.find('input[name="txtQuantity[]"]').val();
var unitcost = $row.find('input[name="txtUnitCost[]"]').val();
budget = parseFloat(quanity * unitcost);
var decimal = budget.toFixed(2);
$row.find('.budget').val(decimal);
var sum = 0;
$('.subcat100 .budget').each(function() {
var budgets = $(this).val();
console.log(budgets);
if (IsNumeric(budgets)) {
sum += parseFloat(budgets, 10);
}
});
$('.subcat100 .budgetsubtotal').val(sum);
});
function IsNumeric(input) {
return (input - 0) == input && input.length > 0;
}
});
HTML:
<table>
<tbody>
<tr class="subcat100">
<td>
<span name="txtItemCode[]"><strong>100</strong></span>
</td>
<td colspan="7">
<span name="txtSubCategoryName[]" class="100"><strong>Land Purchase Costs</strong></span>
</td>
</tr>
<tr class="subcat100">
<td>
<input type="text" name="txtSubItemCode[]" size="10" readonly="readonly" value="101">
</td>
<td>
<input type="text" name="txtItem[]" size="50" readonly="readonly" value="Purchase price">
</td>
<td>
<input type="text" name="txtUnit[]" size="10" value="">
</td>
<td>
<input type="text" name="txtQuantity[]" class="integer" size="10" value="1">
</td>
<td>
<input type="text" name="txtUnitCost[]" class="monetary" size="10" value="299.99">
</td>
<td>
<input type="text" name="txtBudget[]" class="monetary budget" size="10" readonly="readonly" value="299.99">
</td>
<td>
<input type="text" name="txtActual[]" class="monetary" size="10" value="249.99">
</td>
<td>
<input type="text" name="txtDifference[]" class="monetary difference" size="10" readonly="readonly" value="50.00">
</td>
</tr>
<tr class="subcat100">
<td>
<input type="text" name="txtSubItemCode[]" size="10" readonly="readonly" value="110">
</td>
<td>
<input type="text" name="txtItem[]" size="50" readonly="readonly" value="Realtor's fees">
</td>
<td>
<input type="text" name="txtUnit[]" size="10" value="">
</td>
<td>
<input type="text" name="txtQuantity[]" class="integer" size="10" value="">
</td>
<td>
<input type="text" name="txtUnitCost[]" class="monetary" size="10" value="">
</td>
<td>
<input type="text" name="txtBudget[]" class="monetary budget" size="10" readonly="readonly" value="">
</td>
<td>
<input type="text" name="txtActual[]" class="monetary" size="10" value="">
</td>
<td>
<input type="text" name="txtDifference[]" class="monetary difference" size="10" readonly="readonly" value="">
</td>
</tr>
<tr class="subcat100">
<td>
<input type="text" name="txtSubItemCode[]" size="10" readonly="readonly" value="120">
</td>
<td>
<input type="text" name="txtItem[]" size="50" readonly="readonly" value="Due diligence">
</td>
<td>
<input type="text" name="txtUnit[]" size="10" value="">
</td>
<td>
<input type="text" name="txtQuantity[]" class="integer" size="10" value="15">
</td>
<td>
<input type="text" name="txtUnitCost[]" class="monetary" size="10" value="45.00">
</td>
<td>
<input type="text" name="txtBudget[]" class="monetary budget" size="10" readonly="readonly" value="675.00">
</td>
<td>
<input type="text" name="txtActual[]" class="monetary" size="10" value="700.00">
</td>
<td>
<input type="text" name="txtDifference[]" class="monetary difference" size="10" readonly="readonly" value="-25.00">
</td>
</tr>
<tr class="subcat100">
<td colspan="5">
<span><strong>Subtotal</strong></span>
</td>
<td>
<input type="text" name="txtSubTotalBudget[]" class="budgetsubtotal" size="10" readonly="readonly" value="">
</td>
<td>
<input type="text" name="txtSubTotalActual[]" class="actualsubtotal" size="10" readonly="readonly" value="">
</td>
<td>
<input type="text" name="txtSubTotalDifference[]" class="differencesubtotal" size="10" readonly="readonly" value="">
</td>
</tr>
</tbody>
</table>

Well, I ended up doing this:
var itemcodes = <?php echo json_encode($arrItemCodes);?>;
$('input[name="txtQuantity[]"],input[name="txtUnitCost[]"]').change(function(e) {
var budget = 0;
var $row = $(this).parent().parent();
var quanity = $row.find('input[name="txtQuantity[]"]').val();
var unitcost = $row.find('input[name="txtUnitCost[]"]').val();
budget = parseFloat(quanity * unitcost);
$row.find('.budget').val(budget.toFixed(2));
$.each(itemcodes, function(intIndex, objValue) {
var sum = 0;
$('.subcat' + objValue + ' .budget').each(function() {
var budgets = $(this).val();
console.log(budgets);
if (IsNumeric(budgets)) {
sum += parseFloat(budgets, 10);
}
});
$('.subcat' + objValue + ' .budgetsubtotal').val(sum.toFixed(2));
});
});
Open to other suggestions!