Add , Update , delete and display data in table with jQuery [closed]

Add , Update , delete and display data in table with jQuery [closed] - javascript

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
Add Data Dynamically in the table and Edit then checkbox value is not updating this is problem.
Here in jsFiddle
Code Here in JSFiddle

Please review working snippet.
var cnt = 0;
var count = 1;
function BindData(count) {
$("#s_name").val($("#name_" + count).html());
$("#product_names").val($("#pro_" + count).html());
$("#emailid").val($("#email_" + count).html());
$("#mobileno").val($("#mobi_" + count).html());
$('input[name="are"]:checked').val($("#ur_" + count).html());
$("#price").val($("#pric_" + count).html());
$("#t_pro").val($("#totalPro_" + count).html());
$("#total_price").val($("#totalPri_" + count).html());
var checkedHTML = $("#productWith_" + count).html();
var arrCheckedValues = checkedHTML.split(",");
$('.ads_Checkbox').each(function() {
var values = $(this).val();
if (arrCheckedValues.indexOf(values) > -1) {
$(this).prop("checked", true);
}
});
$("#order").attr("value", "Update Order");
$("#order").attr("onclick", "EditData(" + count + ")");
}
function EditData(count) {
$("#name_" + count).html($("#s_name").val());
$("#pro_" + count).html($("#product_names").val());
$("#email_" + count).html($("#emailid").val());
$("#mobi_" + count).html($("#mobileno").val());
$("#ur_" + count).html($('input[name="are"]:checked').val());
$("#pric_" + count).html($("#price").val());
$("#totalPro_" + count).html($("#t_pro").val());
$("#totalPri_" + count).html($("#total_price").val());
var chk = '';
var arrCheckedValues = [];
$('.ads_Checkbox:checked').each(function() {
var values = $(this).val();
arrCheckedValues.push(values);
});
chk = arrCheckedValues.join(",");
$("#productWith_" + count).html(chk);
$("#order").attr("value", "Order");
$("#order").attr("onclick", "AddData()");
//AddData(); /// ADD NEW DATA
$("#s_name").val("");
//$("#product_names").val("");
$("#emailid").val("");
$("#mobileno").val("");
//$('input[name="are"]').prop("");
$("#price").val("");
$("#t_pro").val("");
$("#total_price").val("");
// Clear all CheckBoxes
$('input[type=checkbox]').each(function() {
this.checked = false;
});
}
function AddData() {
var shop_name = $("#s_name").val();
var pro_name = $("#product_names").val();
var email = $("#emailid").val();
var mobi = $("#mobileno").val();
var ur = $('input[name="are"]:checked').val();
var pric = $("#price").val();
var total_pro = $("#t_pro").val();
var total_pri = $("#total_price").val();
var chk = '';
var arrCheckedValues = [];
$('.ads_Checkbox:checked').each(function() {
var values = $(this).val();
arrCheckedValues.push(values);
//chk += values;
});
chk = arrCheckedValues.join(",");
$("#mytab").append('<tr><td id="name_' + count + '">' + shop_name + '</td><td id="pro_' + count + '">' + pro_name +
'</td><td id="email_' + count + '">' + email + '</td><td id="mobi_' + count + '">' + mobi +
'</td><td id="ur_' + count + '">' + ur + '</td><td id="pric_' + count + '">' + pric + '</td><td id="totalPro_' + count + '">' + total_pro + '</td><td id="totalPri_' + count + '">' + total_pri + '</td><td id="productWith_' + count + '">' + chk + '</td><td><button type="button" class="delete">Delete</button></td><td><button type="button" id="edit" onclick="BindData(' + count + ');" >Edit</button></td></tr>');
cnt++;
count++;
$("#s_name").val("");
//$("#product_names").val("");
$("#emailid").val("");
$("#mobileno").val("");
//$('input[name="are"]').val("");
$("#price").val("");
$("#t_pro").val("");
$("#total_price").val("");
// Clear all CheckBoxes
$(".ads_Checkbox").prop("checked", false);
/*$('input[type=checkbox]').each(function()
{
this.checked = false;
});*/
if (cnt > 0) {
$("#dummy").hide();
}
}
$(document).ready(function() {
$("#price,#t_pro").blur(function() {
$('#total_price').val($('#price').val() * $('#t_pro').val());
});
$(document).on('click', '.delete', function() {
//When delete the record then clear all checkboxes
$('input[type=checkbox]').each(function() {
this.checked = false;
});
var par = $(this).parent().parent(); //tr
par.remove();
cnt--;
if (cnt == 0) {
$("#dummy").show();
}
});
});
* {
font-family: arial;
font-size: 13px;
}
.align-center {
text-align: center;
}
input.txt {
color: #00008B;
background-color: #E3F2F7;
border: 1px inset #00008B;
width: 200px;
}
input.btn {
color: #00008B;
background-color: #ADD8E6;
border: 1px outset #00008B;
}
form div {
clear: left;
margin: 0;
padding: 0;
padding-top: 0.9em;
}
form div label {
float: left;
width: 20%;
font: bold 0.9em Arial, Helvetica, sans-serif;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<table cellpadding="2" width="50%" align="center" cellspacing="2" id="myTable">
<tr>
<td colspan=2>
<center>
<font size=4>
<b>Product Detail Form</b>
</font>
</center>
</td>
</tr>
<tr>
<td>
<label for="s_name">Shop Name</label>
</td>
<td>
<input type="text" id="s_name" size="30" class="txt">
</td>
</tr>
<tr>
<td>
<label for="product_names">Product Name</label>
</td>
<td>
<select id="product_names" class="product_name">
<option value="-1" selected>select..</option>
<option value="pc">PC</option>
<option value="laptop">Laptop</option>
<option value="mobile_phone">Mobile Phone</option>
<option value="plasma_screen">Plasma Screen</option>
</select>
</td>
</tr>
<tr>
<td>
<label for="emailid">EmailId</label>
</td>
<td>
<input type="text" id="emailid" size="30" class="txt">
</td>
</tr>
<tr>
<td>
<label for="mobileno">MobileNo</label>
</td>
<td>
<input type="text" id="mobileno" size="30" class="txt">
</td>
</tr>
<tr>
<td>
<label for="r1">What You Are</td>
<td>
<input type="radio" name="are" value="Buyer" id="r1" size="10" checked>
<label for="r1">Buyer</label>
<input type="radio" name="are" value="Seller" id="r2" size="10">
<label for="r2">Seller</label>
</td>
</tr>
<tr>
<td>
<label for="price">Price</label>
</td>
<td>
<input type="text" id="price" size="30" class="txt">
</td>
</tr>
<tr>
<td>
<label for="t_pro">Total Product</label>
</td>
<td>
<input type="text" id="t_pro" size="30" class="txt">
</td>
</tr>
<tr>
<td>
<label for="total_price">Total Price</label>
</td>
<td>
<input type="text" id="total_price" size="30" class="txt">
</td>
</tr>
<tr>
<td>
<label for="1">Product With:</td>
<td>
<input type="checkbox" name="chk1" id="chk1" class="ads_Checkbox" value="Box">Box
<br>
<input type="checkbox" name="chk2" id="chk2" class="ads_Checkbox" value="Bill">Bill
<br>
<input type="checkbox" name="chk3" id="chk3" class="ads_Checkbox" value="Bill-BOx">Bill-BOx
<br>
<input type="checkbox" name="chk4" id="chk4" class="ads_Checkbox" value="Only Product">Only Product
</td>
</tr>
<tr>
<td colspan="2" class="align-center">
<input type="reset">
<input type="button" id="order" value="Order" onclick="AddData()" />
</td>
</tr>
</table>
</form>
<table cellpadding="4" width="50%" align="center" cellspacing="4" id="mytab" border="1">
<tr>
<th>ShopNmae</th>
<th>Product Name</th>
<th>EmailId</th>
<th>MobileNo</th>
<th>What You Are</th>
<th>Price</th>
<th>Total Product</th>
<th>Total Price</th>
<th>Product With</th>
<th colspan="2">Action</th>
</tr>
<tr id="dummy">
<td colspan="11">No data</td>
</tr>
</table>

Related

Using jQuery to auto calculate amount

I've a simple form to auto calculate amount entered in the Amount field.
The Total Sum field is only updated upon entering the first row's Amount field. Total Sum field is not updated for subsequent rows.`
<?php
$sno = 1;
?>
<html>
<head>
<style>
body {
font-family: sans-serif;
}
#summation {
font-size: 18px;
font-weight: bold;
color: #174C68;
}
.amt {
background-color: #FEFFB0;
//font-weight: bold;
text-align: right;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<table class="table table-bordered table-hover" id="tab_logic">
<thead>
<tr>
<th />
<th>Invoice No.</th>
<th>Invoice Date</th>
<th>Description</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr id='addr0'>
<td>
<?php echo $sno;?>
</td>
<td width="40px"><input class="txt" type="text" name="invoiceNo" style="text-transform:uppercase" /></td>
<td><input type="date" name="date" /></td>
<td><input class="txt" type="text" name="txt" /></td>
<td><input class="amt" type="number" name="amt" min="0" step="0.01" /></td>
</tr>
<tr id='addr1'></tr>
</tbody>
</table>
</div>
</div>
<button id="add_row" class="btn btn-primary btn-lg pull-left">Add Row</button>
<table>
<tr id="summation">
<td align="right" colspan="3">Total Sum :</td>
<td align="right" colspan="2"><span id="sum">0</span></td>
</tr>
</table>
</div>
<script>
$(document).ready(function() {
var i = 1;
var j = 1;
$("#add_row").click(function() {
$('#addr' + i).html("<td>" + (i + 1) + "</td><td><input type='text' name='invoiceNo" + i + "' class='form-control input-md' style='text-transform:uppercase'/></td><td><input type='date' name='date" + i + "' class='form-control input-md'/></td><td><input type='text' name='text" + i + "' class='form-control input-md'/></td><td><input type='number' name='amt" + i + "' class='amt' min='0' step='0.01'/></td>");
$('#tab_logic').append('<tr id="addr' + (i + 1) + '"></tr>');
i++;
});
$('.amt').each(function() {
$(this).keyup(function() {
calculateSum();
});
});
$('.amt' + j).each(function() {
$(this).keyup(function() {
calculateSum();
});
j++;
});
});
function calculateSum() {
var sum = 0;
$(".amt").each(function() {
if (!isNaN(this.value) && this.value.length != 0) {
sum += parseFloat(this.value);
}
});
$("#sum").html(sum.toFixed(2));
}
</script>
</body>
</html>
The Total Sum field for subsequent rows is updated only when I change the contents in 1st row's Amount field.
How can I update the Total Sum automatically whenever the Amount field is entered for subsequent rows?
Thank you.
*** Updates ***
I've updated my code as per Paul's suggestion.
<?php
$sno = 1;
$i = 0;
?>
<html>
<head>
<style>
body {
font-family: sans-serif;
}
#summation {
font-size: 18px;
font-weight: bold;
color: #174C68;
}
.amt {
//background-color: #FEFFB0;
//font-weight: bold;
text-align: right;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<form enctype="multipart/form-data" method="post" name="form" id="form" action="data.php">
<body>
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<table class="table table-bordered table-hover" id="tab_logic" border="1" style="border:2px solid black;border-collapse:collapse">
<thead>
<tr>
<th />
<th>Invoice No.</th>
<th>Invoice Date</th>
<th>Description</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr id='addr0'>
<td>
<?php echo $sno;?>
</td>
<td width="40px"><input class="txt" type="text" name="invoiceNo[<?php echo $i; ?>][invoiceNo]" style="text-transform:uppercase" /></td>
<td><input type="date" name="date[<?php echo $i; ?>][date]" /></td>
<td><input class="txt" type="text" name="desc[<?php echo $i; ?>][desc]" /></td>
<td><input class="amt" type="number" name="amt[<?php echo $i; ?>][amt]" step="0.01" /></td>
</tr>
<tr id='addr1'></tr>
</tbody>
</table>
</div>
</div>
<br>
<button id="add_row" class="btn btn-primary btn-lg pull-left" type="button">Add Row</button>
<table>
<tr id="summation">
<td align="right" colspan="3">Total Sum :</td>
<td align="right" colspan="2"><span id="sum">0.00</span></td>
</tr>
</table>
</div>
<br>
<tr>
<!--<td align="center"><button type="button" id="btn-ser1">Submit</button></td>-->
<td align="center"><button type="submit" id="btn-ser1">Submit</button></td>
</tr>
<script>
$(document).ready(function() {
var i = 1;
$('#add_row').click(function() {
$('#addr' + i).html("<td>" + (i + 1) + "</td><td><input type='text' name='invoiceNo[" + i + "][invoiceNo]' class='form-control input-md' style='text-transform:uppercase'/></td><td><input type='date' name='date[" + i + "][date]' class='form-control input-md'/></td><td><input type='text' name='desc[" + i + "][desc]' class='form-control input-md'/></td><td><input type='number' name='amt[" + i + "][amt]' class='amt' min='0' step='0.01'/></td>");
$('#tab_logic').append('<tr id="addr' + (i + 1) + '"></tr>');
i++;
});
});
$('#tab_logic').on('change', '.amt', function() {
this.value = parseFloat(this.value).toFixed(2);
});
// Use an event delegate on amt
$('#tab_logic').on('change', '.amt', function() {
calculateSum();
});
function calculateSum() {
var sum = 0;
$('.amt').each(function() {
if (!isNaN(this.value) && this.value.length != 0) {
sum += parseFloat(this.value);
}
});
$('#sum').html(sum.toFixed(2));
$('#total').val(sum);
}
//$('#btn-ser1').click(function(){
// data_array = $('#form').serialize();
// alert(data_array);
$('form').submit(function() {
data_array = $('#form').serialize();
//alert(data_array);
$('#arr').val(data_array);
});
</script>
<!--<input type="hidden" name="sno" value="<?php echo $sno; ?>">-->
<input type="hidden" id="total" name="total" />
<input type="hidden" id="arr" name="arr" />
</body>
</html>
When I submit the form & print the array, I get this sample output:
invoiceNo[0][invoiceNo]=a1&date[0][date]=2021-02-18&desc[0][desc]=a1&amt[0][amt]=1.47&invoiceNo[1][invoiceNo]=b2&date[1][date]=2021-02-17&desc[1][desc]=b2&amt[1][amt]=2.58&invoiceNo[2][invoiceNo]=c3&date[2][date]=2021-02-16&desc[2][desc]=c3&amt[2][amt]=3.69&total=7.74&arr=
How can I get the recurring values of invoiceNo, date, desc & amt to insert into a SQL statement?

Don't need any of the keyup, you can use the amt to delegate the handling to any of those.
Basically, remove this handling:
$('.amt').each(function() {
$(this).keyup(function() {
calculateSum();
});
});
$('.amt' + j).each(function() {
$(this).keyup(function() {
calculateSum();
});
j++;
});
Replace with:
// Use a change event delegate on amt
$('#tab_logic').on('change', '.amt', function() {
calculateSum();
});
Try the runnable example below.
Click the spinner buttons, the sum change is immediate. If a value is typed in, the sum updates after the field loses focus.
<?php
$sno = 1;
?>
<html>
<head>
<style>
body {
font-family: sans-serif;
}
#summation {
font-size: 18px;
font-weight: bold;
color: #174C68;
}
.amt {
background-color: #FEFFB0;
//font-weight: bold;
text-align: right;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<table class="table table-bordered table-hover" id="tab_logic">
<thead>
<tr>
<th />
<th>Invoice No.</th>
<th>Invoice Date</th>
<th>Description</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr id='addr0'>
<td>
<?php echo $sno;?>
</td>
<td width="40px"><input class="txt" type="text" name="invoiceNo" style="text-transform:uppercase" /></td>
<td><input type="date" name="date" /></td>
<td><input class="txt" type="text" name="txt" /></td>
<td><input class="amt" type="number" name="amt" min="0" step="0.01" /></td>
</tr>
<tr id='addr1'></tr>
</tbody>
</table>
</div>
</div>
<button id="add_row" class="btn btn-primary btn-lg pull-left">Add Row</button>
<table>
<tr id="summation">
<td align="right" colspan="3">Total Sum :</td>
<td align="right" colspan="2"><span id="sum">0</span></td>
</tr>
</table>
</div>
<script>
$(document).ready(function() {
var i = 1;
var j = 1;
$("#add_row").click(function() {
$('#addr' + i).html("<td>" + (i + 1) + "</td><td><input type='text' name='invoiceNo" + i + "' class='form-control input-md' style='text-transform:uppercase'/></td><td><input type='date' name='date" + i + "' class='form-control input-md'/></td><td><input type='text' name='text" + i + "' class='form-control input-md'/></td><td><input type='number' name='amt" + i + "' class='amt' min='0' step='0.01'/></td>");
$('#tab_logic').append('<tr id="addr' + (i + 1) + '"></tr>');
i++;
});
});
// Use an event delegate on amt
$('#tab_logic').on('change', '.amt', function() {
calculateSum();
});
function calculateSum() {
var sum = 0;
$(".amt").each(function() {
if (!isNaN(this.value) && this.value.length != 0) {
sum += parseFloat(this.value);
}
});
$("#sum").html(sum.toFixed(2));
}
</script>
</body>
</html>

JQuery Button to Show and Button to Hide

I have a list of button from a table (table1) that if I clicked the button, it will append to another table (table2), and the button will be hide. At the table2, there's a button too to remove/delete from this table2 and then the button at table1 will be displayed again. Here's my code so far:
var rowNum = 0;
$('.addrow').on('click', function () {
rowNum++;
var barang = $(this).parent().find("input[name='rfdn']").val();
var barangid = $(this).parent().find("input[name='rfdid']").val();
var price = $(this).parent().find("input[name='rfdp']").val();
var harga = $(this).parent().find("input[name='rfdpx']").val();
var qty = $(this).parent().find("input[name='rfdq']").val();
var row = '<tr id="rowNum' + rowNum + '">';
row += '<td class="left"><input type="hidden" name="pitem[]" value="' + barangid + '" />' + barang + '</td>';
row += '<td style="text-align:right;"><input type="number" min="1" max="' + qty + '" name="qty[]" value="1" class="form-control" /></td>';
row += '<td style="text-align:right;"><input type="hidden" name="price[]" value="' + price + '" />' + harga + '</td>';
row += '<td><a class="form-control btn btn-info btn-flat" onclick ="removeRow(' + rowNum + ')"><i class="fa fa-minus fa-fw"></i> Delete</a></td></tr>';
jQuery('#refunds2').append(row);
$(this).hide();
});
function removeRow(rnum) {
jQuery('#rowNum' + rnum).remove();
rowNum--;
$(this).show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<table class="list">
<thead>
<tr>
<td>Product</td>
<td>Refund</td>
<td>Model</td>
<td>Quantity</td>
</tr>
</thead>
<tbody>
<tr>
<td class="left">Flesh Out</td>
<td class="center">
<input type="hidden" class="rf" value="12101" id="rfdid" name="rfdid">
<input type="hidden" class="rf" value="Flesh Out" id="rfdn" name="rfdn">
<input type="hidden" class="rf" value="1" id="rfdq" name="rfdq">
<a class="button addrow">Refund</a>
</td>
<td class="left">9786023759774</td>
<td class="right">1</td>
</tr>
<tr>
<td class="left">#About Love</td>
<td class="center">
<input type="hidden" class="rf" value="3413" id="rfdid" name="rfdid">
<input type="hidden" class="rf" value="#About Love" id="rfdn" name="rfdn">
<input type="hidden" class="rf" value="1" id="rfdq" name="rfdq">
<a class="button addrow">Refund</a>
</td>
<td class="left">9786020317786</td>
<td class="right">1</td>
</tr>
</tbody>
</table>
<table id="refunds2" class="list">
<thead>
<tr>
<td class="left">Product</td>
<td>Refund Qty</td>
<td>Price</td>
<td></td>
</tr>
</thead>
</table>
To append new row it's already worked. But when I click delete button, the 'refund' button at table1 isn't coming up again. My data may be various, not only 2. Sometimes can be 5 or 10 or maybe 100

The rowNum you are adding should be related to the addrow button which was hidden. so that after deleting you know which this button correponded to.
See the code below. I have added bootstrap just for styling purposes.
var rowNum = 0;
$('.addrow').on('click', function () {
rowNum = $('.addrow').index(this);
var barang = $(this).parent().find("input[name='rfdn']").val();
var barangid = $(this).parent().find("input[name='rfdid']").val();
var price = $(this).parent().find("input[name='rfdp']").val();
var harga = $(this).parent().find("input[name='rfdpx']").val();
var qty = $(this).parent().find("input[name='rfdq']").val();
var row = '<tr id="rowNum' + rowNum + '">';
row += '<td class="left"><input type="hidden" name="pitem[]" value="' + barangid + '" />' + barang + '</td>';
row += '<td style="text-align:right;"><input type="number" min="1" max="' + qty + '" name="qty[]" value="1" class="form-control" /></td>';
row += '<td style="text-align:right;"><input type="hidden" name="price[]" value="' + price + '" />' + harga + '</td>';
row += '<td><a class="form-control btn btn-info btn-flat" onclick ="removeRow(' + rowNum + ')"><i class="fa fa-minus fa-fw"></i> Delete</a></td></tr>';
jQuery('#refunds2').append(row);
$(this).hide();
});
function removeRow(rnum) {
jQuery('#rowNum' + rnum).remove();
$('.addrow').eq(rnum).show();
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<table class="list table">
<thead>
<tr>
<td>Product</td>
<td>Refund</td>
<td>Model</td>
<td>Quantity</td>
</tr>
</thead>
<tbody>
<tr>
<td class="left">Flesh Out</td>
<td class="center">
<input type="hidden" class="rf" value="12101" id="rfdid" name="rfdid">
<input type="hidden" class="rf" value="Flesh Out" id="rfdn" name="rfdn">
<input type="hidden" class="rf" value="1" id="rfdq" name="rfdq">
<a class="button addrow">Refund</a>
</td>
<td class="left">9786023759774</td>
<td class="right">1</td>
</tr>
<tr>
<td class="left">#About Love</td>
<td class="center">
<input type="hidden" class="rf" value="3413" id="rfdid" name="rfdid">
<input type="hidden" class="rf" value="#About Love" id="rfdn" name="rfdn">
<input type="hidden" class="rf" value="1" id="rfdq" name="rfdq">
<a class="button addrow">Refund</a>
</td>
<td class="left">9786020317786</td>
<td class="right">1</td>
</tr>
</tbody>
</table>
<table id="refunds2" class="list table">
<thead>
<tr>
<td class="left">Product</td>
<td>Refund Qty</td>
<td>Price</td>
<td></td>
</tr>
</thead>
</table>

Add two id refund0 <a class="button addrow" id="refund0">Refund</a> and refund1<a class="button addrow" id="refund1">Refund</a> , then show those id at your removeRow
function removeRow(rnum) {
jQuery('#rowNum' + rnum).remove();
rowNum--;
$("#refund0").show();
$("#refund1").show();
}
function.
var rowNum = 0;
$('.addrow').on('click', function () {
rowNum++;
var barang = $(this).parent().find("input[name='rfdn']").val();
var barangid = $(this).parent().find("input[name='rfdid']").val();
var price = $(this).parent().find("input[name='rfdp']").val();
var harga = $(this).parent().find("input[name='rfdpx']").val();
var qty = $(this).parent().find("input[name='rfdq']").val();
var row = '<tr id="rowNum' + rowNum + '">';
row += '<td class="left"><input type="hidden" name="pitem[]" value="' + barangid + '" />' + barang + '</td>';
row += '<td style="text-align:right;"><input type="number" min="1" max="' + qty + '" name="qty[]" value="1" class="form-control" /></td>';
row += '<td style="text-align:right;"><input type="hidden" name="price[]" value="' + price + '" />' + harga + '</td>';
row += '<td><a class="form-control btn btn-info btn-flat" onclick ="removeRow(' + rowNum + ')"><i class="fa fa-minus fa-fw"></i> Delete</a></td></tr>';
jQuery('#refunds2').append(row);
$(this).hide();
});
function removeRow(rnum) {
jQuery('#rowNum' + rnum).remove();
rowNum--;
$("#refund0").show();
$("#refund1").show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<table class="list">
<thead>
<tr>
<td>Product</td>
<td>Refund</td>
<td>Model</td>
<td>Quantity</td>
</tr>
</thead>
<tbody>
<tr>
<td class="left">Flesh Out</td>
<td class="center">
<input type="hidden" class="rf" value="12101" id="rfdid" name="rfdid">
<input type="hidden" class="rf" value="Flesh Out" id="rfdn" name="rfdn">
<input type="hidden" class="rf" value="1" id="rfdq" name="rfdq">
<a class="button addrow" id="refund0">Refund</a>
</td>
<td class="left">9786023759774</td>
<td class="right">1</td>
</tr>
<tr>
<td class="left">#About Love</td>
<td class="center">
<input type="hidden" class="rf" value="3413" id="rfdid" name="rfdid">
<input type="hidden" class="rf" value="#About Love" id="rfdn" name="rfdn">
<input type="hidden" class="rf" value="1" id="rfdq" name="rfdq">
<a class="button addrow" id="refund1">Refund</a>
</td>
<td class="left">9786020317786</td>
<td class="right">1</td>
</tr>
</tbody>
</table>
<table id="refunds2" class="list">
<thead>
<tr>
<td class="left">Product</td>
<td>Refund Qty</td>
<td>Price</td>
<td></td>
</tr>
</thead>
</table>

Instead of $(this).show() you only need to replace "this" to ".addrow".
function removeRow(rnum) {
jQuery('#rowNum' + rnum).remove();
rowNum--;
$('.addrow').show();
}

$(this).show() refers to removeRow function, not to addrow class . so, the easiest way is to change your html as <a class="button" >Refund</a> and then $(".addrow").show() instead of $(this).show()
like this:
var rowNum = 0;
$('.addrow').on('click', function () {
rowNum++;
var barang = $(this).parent().find("input[name='rfdn']").val();
var barangid = $(this).parent().find("input[name='rfdid']").val();
var price = $(this).parent().find("input[name='rfdp']").val();
var harga = $(this).parent().find("input[name='rfdpx']").val();
var qty = $(this).parent().find("input[name='rfdq']").val();
var row = '<tr id="rowNum' + rowNum + '">';
row += '<td class="left"><input type="hidden" name="pitem[]" value="' + barangid + '" />' + barang + '</td>';
row += '<td style="text-align:right;"><input type="number" min="1" max="' + qty + '" name="qty[]" value="1" class="form-control" /></td>';
row += '<td style="text-align:right;"><input type="hidden" name="price[]" value="' + price + '" />' + harga + '</td>';
row += '<td><a class="form-control btn btn-info btn-flat" onclick ="removeRow(' + rowNum + ')"><i class="fa fa-minus fa-fw"></i> Delete</a></td></tr>';
jQuery('#refunds2').append(row);
$(this).hide();
});
function removeRow(rnum) {
jQuery('#rowNum' + rnum).remove();
rowNum--;
$(".addrow").show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<table class="list">
<thead>
<tr>
<td>Product</td>
<td>Refund</td>
<td>Model</td>
<td>Quantity</td>
</tr>
</thead>
<tbody>
<tr>
<td class="left">Flesh Out</td>
<td class="center">
<input type="hidden" class="rf" value="12101" id="rfdid" name="rfdid">
<input type="hidden" class="rf" value="Flesh Out" id="rfdn" name="rfdn">
<input type="hidden" class="rf" value="1" id="rfdq" name="rfdq">
<a class="button addrow">Refund</a>
</td>
<td class="left">9786023759774</td>
<td class="right">1</td>
</tr>
<tr>
<td class="left">#About Love</td>
<td class="center">
<input type="hidden" class="rf" value="3413" id="rfdid" name="rfdid">
<input type="hidden" class="rf" value="#About Love" id="rfdn" name="rfdn">
<input type="hidden" class="rf" value="1" id="rfdq" name="rfdq">
<a class="button addrow">Refund</a>
</td>
<td class="left">9786020317786</td>
<td class="right">1</td>
</tr>
</tbody>
</table>
<table id="refunds2" class="list">
<thead>
<tr>
<td class="left">Product</td>
<td>Refund Qty</td>
<td>Price</td>
<td></td>
</tr>
</thead>
</table>

creating new row on button click

I have an html table with one or more row. I have 4 columns in my table in that one is a checkbox. Two buttons are there "AddRowAbove" and "AddRowBelow". When a particular checkbox is checked and click a button a new row should be added based on the button name. My code looks like this not sure how to achieve the result.
function addNewRowAbove() {
alert("actioned !!!");
var rowNumber = document.getElementById("rowIndex").value;
var rowNumberNew = parseInt(rowNumber) - 1;
alert(rowNumber + " - " + rowNumberNew);
var newRow = $('<tr/>').attr('id', 'row' + rowNumberNew);
newRow.html('<td><input type="checkbox" name="radio1" id="radio' + rowNumberNew + '"></input><input type="hidden" id="rowIndex' + rowNumberNew + '" value="' + rowNumberNew + '"/></td><td><input type="text" name="empid" id="empid' + rowNumberNew + '"></input></td><td><input type="text" name="empfname" id="empfname' + rowNumberNew + '"></input></td><td><input type="text" name="emplname" id="emplname' + rowNumberNew + '"></input></td>');
$('#maintable tbody').append(newRow);
}
function addNewRowBelow() {
alert("actioned !!!");
var rowNumber = document.getElementById("rowIndex").value;
var rowNumberNew = parseInt(rowNumber) + 1;
alert(rowNumber + " - " + rowNumberNew);
var newRow = $('<tr/>').attr('id', 'row' + rowNumberNew);
newRow.html('<td><input type="checkbox" name="radio1" id="radio' + rowNumberNew + '"></input><input type="hidden" id="rowIndex' + rowNumberNew + '" value="' + rowNumberNew + '"/></td><td><input type="text" name="empid" id="empid' + rowNumberNew + '"></input></td><td><input type="text" name="empfname" id="empfname' + rowNumberNew + '"></input></td><td><input type="text" name="emplname" id="emplname' + rowNumberNew + '"></input></td>');
$('#maintable tbody').append(newRow);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<table id="maintable" width="50%" cellpadding="0" cellspacing="0" border="#729111 1px solid">
<tr>
<th align="center">Select</th>
<th align="center">Employee ID</th>
<th align="center">First Name</th>
<th align="center">Last Name</th>
</tr>
<tr>
<td><input type="checkbox" name="radio" id="radio"></input><input type="hidden" id="rowIndex" value="1" /></td>
<td><input type="text" name="empid"></input>
</td>
<td><input type="text" name="empfname"></input>
</td>
<td><input type="text" name="emplname"></input>
</td>
</tr>
<tr>
<td><input type="checkbox" name="radio1" id="radio1"></input><input type="hidden" id="rowIndex" value="2" /></td>
<td><input type="text" name="empid1"></input>
</td>
<td><input type="text" name="empfname1"></input>
</td>
<td><input type="text" name="emplname1"></input>
</td>
</tr>
<tr>
<td></td>
<td> <input type="submit" name="AddRowAbove" value="AddRowAbove" onclick="addNewRowAbove()"></td>
<td> <input type="submit" name="AddRowBelow" value="AddRowBelow" onclick="addNewRowBelow()"></td>
<td></td>
</tr>
</table>
</form>

I added var selectedRow = $( "input:checked" ).parent().parent(); to both of your functions to find the parent row of the checked element, and then used either $(newRow).insertBefore(selectedRow); or $(newRow).insertAfter(selectedRow); depending on the button clicked.
Hopefully this helps.
UPDATE:
In response to comments requesting that the id's of the rows are kept in order even after adding rows dynamically, I've added a SortRowIDs() function which is called at the end of both addNewRowAbove() and addNewRowBelow().
This function grabs all of the <input type="checkbox"/> tags in the <table id="maintable"></table> and then iterates through them using jQuery's .each() method. Each checkbox's parent row is then assigned an Id based on its order in the table. I also added a few comments in the code so that it is easier to follow.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function SortRowIDs() {
// The code below finds all the <tr> elements in the table WITH checkboxes in them.
// This way, we skip the first row containing column headers and the last row containing buttons
// We use the jQuery .each() method to iterate through jQuery-object arrays
$('#maintable').find('tr > td > input[type="checkbox"]').each(function(index) {
// We assign the parent row of the current checkbox to the variable 'currentRow'
let currentRow = $(this).parent().parent();
// Here we give the current row an id based on its position in the table
$(currentRow).attr('id', 'id_' + (index + 1));
// Prints the id's of each row
console.log('Current row\'s id: ' + $(currentRow).attr('id'));
});
// This prints the id attribute of the selected checkbox's parent row, to show that
// the Id's were successfully assigned by the SortRowIDs() function
console.log('');
console.log('Selected row\'s id: ' + $( "input:checked" ).parent().parent().attr('id'));
}
function addNewRowAbove() {
var rowNumber = document.getElementById("rowIndex").value;
var rowNumberNew = parseInt(rowNumber) - 1;
var newRow = $('<tr/>');
newRow.html('<td><input type="checkbox" name="radio1" id="radio' + rowNumberNew + '" /><input type="hidden" id="rowIndex' + rowNumberNew + '" value="' + rowNumberNew + '"/></td><td><input type="text" name="empid" id="empid' + rowNumberNew + '"/></td><td><input type="text" name="empfname" id="empfname' + rowNumberNew + '"></input></td><td><input type="text" name="emplname" id="emplname' + rowNumberNew + '"></input></td>');
var selectedRow = $( "input:checked" ).parent().parent();
$(newRow).insertBefore(selectedRow);
SortRowIDs();
}
function addNewRowBelow() {
var rowNumber = document.getElementById("rowIndex").value;
var rowNumberNew = parseInt(rowNumber) + 1;
var newRow = $('<tr/>');
newRow.html('<td><input type="checkbox" name="radio1" id="radio' + rowNumberNew + '"></input><input type="hidden" id="rowIndex' + rowNumberNew + '" value="' + rowNumberNew + '"/></td><td><input type="text" name="empid" id="empid' + rowNumberNew + '"></input></td><td><input type="text" name="empfname" id="empfname' + rowNumberNew + '"></input></td><td><input type="text" name="emplname" id="emplname' + rowNumberNew + '"></input></td>');
var selectedRow = $( "input:checked" ).parent().parent();
$(newRow).insertAfter(selectedRow);
SortRowIDs();
}
</script>
<form>
<table id="maintable" width="50%" cellpadding="0" cellspacing="0" border="#729111 1px solid">
<tr>
<th align="center">Select</th>
<th align="center">Employee ID</th>
<th align="center">First Name</th>
<th align="center">Last Name</th>
</tr>
<tr>
<td>
<input type="checkbox" name="radio" id="radio"/>
<input type="hidden" id="rowIndex" value="1" />
</td>
<td>
<input type="text" name="empid" />
</td>
<td>
<input type="text" name="empfname" />
</td>
<td>
<input type="text" name="emplname" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="radio1" id="radio1" />
<input type="hidden" id="rowIndex" value="2" />
</td>
<td>
<input type="text" name="empid1" />
</td>
<td>
<input type="text" name="empfname1" />
</td>
<td>
<input type="text" name="emplname1" />
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" name="AddRowAbove" value="AddRowAbove" onclick="addNewRowAbove()">
</td>
<td>
<input type="submit" name="AddRowBelow" value="AddRowBelow" onclick="addNewRowBelow()">
</td>
<td></td>
</tr>
</table>
</form>

You can use insertBefore to append new row above buttons (give id="button" to row content buttons). Try with below solution:
function addNewRowAbove(){
alert("actioned !!!");
var rowNumber=document.getElementById("rowIndex").value;
var rowNumberNew = parseInt(rowNumber)- 1 ;
alert(rowNumber+" - "+rowNumberNew);
var newRow = $('<tr/>').attr('id', 'row' + rowNumberNew);
newRow.html('<td><input type="checkbox" name="radio1" id="radio'+rowNumberNew+'"></input><input type="hidden" id="rowIndex'+rowNumberNew+'" value="'+rowNumberNew+'"/></td><td><input type="text" name="empid" id="empid'+rowNumberNew+'"></input></td><td><input type="text" name="empfname" id="empfname'+rowNumberNew+'"></input></td><td><input type="text" name="emplname" id="emplname'+rowNumberNew+'"></input></td>');
newRow.insertBefore('#button');
}
function addNewRowBelow(){
alert("actioned !!!");
var rowNumber=document.getElementById("rowIndex").value;
var rowNumberNew = parseInt(rowNumber) + 1 ;
alert(rowNumber+" - "+rowNumberNew);
var newRow = $('<tr/>').attr('id', 'row' + rowNumberNew);
newRow.html('<td><input type="checkbox" name="radio1" id="radio'+rowNumberNew+'"></input><input type="hidden" id="rowIndex'+rowNumberNew+'" value="'+rowNumberNew+'"/></td><td><input type="text" name="empid" id="empid'+rowNumberNew+'"></input></td><td><input type="text" name="empfname" id="empfname'+rowNumberNew+'"></input></td><td><input type="text" name="emplname" id="emplname'+rowNumberNew+'"></input></td>');
$('#maintable tbody').append(newRow);
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<form>
<table id="maintable" width="50%" cellpadding="0" cellspacing="0" border="#729111 1px solid">
<tr>
<th align="center">Select</th>
<th align="center">Employee ID</th>
<th align="center">First Name</th>
<th align="center">Last Name</th>
</tr>
<tr><td><input type="checkbox" name="radio" id="radio"></input><input type="hidden" id="rowIndex" value="1"/></td>
<td><input type="text" name="empid"></input></td>
<td><input type="text" name="empfname"></input></td>
<td><input type="text" name="emplname"></input></td>
</tr>
<tr><td><input type="checkbox" name="radio1" id="radio1"></input><input type="hidden" id="rowIndex" value="2"/></td>
<td><input type="text" name="empid1"></input></td>
<td><input type="text" name="empfname1"></input></td>
<td><input type="text" name="emplname1"></input></td>
</tr>
<tr id="button"><td></td><td> <input type="submit" name="AddRowAbove" value="AddRowAbove" onclick="addNewRowAbove()"></td><td> <input type="submit" name="AddRowBelow" value="AddRowBelow" onclick="addNewRowBelow()"></td><td></td></tr>
</table>
</form>
</body>
</html>

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>

Total becomes NaN after increment 10

I have a calculation table and the total becomes NaN after adding 10 rows.
I have even tried the suggestions as stated within this Stackoverflow article.
I have been testing this for over a day now and cannot fix the error. What am I missing?
jQuery(document).ready(function($){
var counter = 2;
$("#addItem").click(function () {
if(counter>50){
alert("You have reached the maximum items allowed (50)!");
return false;
}
var newTextBoxDiv = $(document.createElement('tr'))
.attr("id", 'itemRow' + counter);
newTextBoxDiv.after().html('<td class="first"><input placeholder="Charge # ' + counter + '" class="chrg" type="text" name="data[' + counter + '][0]" id="chrg' + counter + '" ></td>' + '<td><input placeholder="Item/Part # ' + counter + '" class="item" type="text" name="data[' + counter + '][1]" id="item' + counter + '" ></td>' + '<td><input placeholder="Description ' + counter + '" class="desc" type="text" name="data[' + counter + '][2]" id="desc' + counter + '" ></td>' + '<td style="text-align:center;"><input placeholder="Qty ' + counter + '" class="qty" type="text" name="data[' + counter + '][3]" id="qty' + counter + '" size="5" style="text-align:center;" /></td>' + '<td style="text-align:right;"><input placeholder="Cost ' + counter + '" class="cost" type="text" name="data[' + counter + '][4]" id="cost' + counter + '" size="10" style="text-align:right;" /></td>' + '<td style="text-align:right;"><span class="input-group-addon">$</span><input placeholder="Sub-Total ' + counter + '" class="stotal" type="text" name="stotal'+ counter + '" id="stotal'+ counter +'" size="10" style="text-align:right;" readonly /></td>');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
$(document).on('keyup', '.cost', function(st){
// grab ID to get row number
thisID = $(this).attr("id");
rowNum = thisID.slice(-1);
//get Amount entered
qty = $('#qty'+rowNum).val();
//get QTY
cost = $('#cost'+rowNum).val();
$('#stotal'+rowNum).val((qty*cost).toFixed(2));
currentCount = counter-1;
var tot = Math.round(0);
$('.stotal').each(function() {
tot += parseFloat($(this).val());
});
$('#preTotal').val((tot).toFixed(2));
$('#grand_total').val((tot).toFixed(2));
});
//calculate preTotal
$(document).on('focusin', '#shipping', function(pt){
var selection = document.getElementById("addShip");
if (selection.checked){
$("#shipping").change(function(preTotal,shipping) { // input on change
var preTotal = document.getElementById('preTotal').value;
var shipping = document.getElementById('shipping').value || 0;
var pTotal = parseFloat(shipping) + parseFloat(preTotal);
document.getElementById('preTotal').value = (pTotal.toFixed(2));
});
} else {
var preTotal = document.getElementById('preTotal').value;
var shipping = document.getElementById('shipping').value || 0;
var sTotal = parseFloat(preTotal);
document.getElementById('preTotal').value = (sTotal.toFixed(2));
}
});
//calculate taxes and total
$(document).on('focusin', '#taxTotal', function(tt){
var selection = document.getElementById("addShip");
//get field results
var preTotal = document.getElementById('preTotal').value || 0;
var shipping = document.getElementById('shipping').value || 0;
var taxTotal = document.getElementById('taxTotal').value || 0;
var taxRate = document.getElementById('taxRate').value || 0;
var gTotal = document.getElementById('grand_total').value || 0;
$("#taxTotal").change(function() { // input on change
var tTotal = document.getElementById('taxTotal').value / document.getElementById('preTotal').value * 100;
document.getElementById('taxRate').value = (tTotal.toFixed(2));
});
});
//calculate total + taxes
$(document).on('focusout', '#taxTotal', function(gt){
var shipping = document.getElementById('shipping').value || 0;
var tTotal = document.getElementById('taxTotal').value || 0;
var gTotal = document.getElementById('grand_total').value;
var fTotal = parseFloat(shipping) + parseFloat(tTotal) + parseFloat(gTotal);
document.getElementById('grand_total').value = (fTotal.toFixed(2));
});
});
}
function focusField() {
$('#addItem').click(function(){
$('.chrg').focus();
});
th {padding: 2px 2px;}
td {padding: 2px 2px;}
input {padding: 0px 2px;}
#addItemBtn {}
input.filler {border-color:#fff;border-style:solid;}
.input-group-addon {
padding: 2px 5px;
font-size: 14px;
font-weight: 400;
line-height: 1;
color: #555;
text-align: center;
background-color: #eee;
box-shadow: inset 0 0 0 1px grey;
border-right: 1px #eee solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="TextBoxesGroup" style="width:100%;">
<tr>
<th style="text-align:left;">Charge #</th>
<th style="text-align:left;">Item/Part #</th>
<th style="text-align:left;">Description</th>
<th style="text-align:center;">Qty</th>
<th style="text-align:right;">Cost</th>
<th style="text-align:right;">Sub-total</th>
</tr>
<tr id="itemRow1">
<td><input placeholder="Charge # 1" class="chrg" type="text" id="chrg1" autofocus /></td>
<td><input placeholder="Item/Part # 1" class="item" type="text" id="item1" style="margin-bottom:0 !important" /></td>
<td><input placeholder="Description 1" class="desc" type="text" id="desc1" /></td>
<td style="text-align:center;"><input placeholder="Qty 1" class="qty" type="text" id="qty1" size="5" style="text-align:center;" /></td>
<td style="text-align:right;"><input placeholder="Cost 1" class="cost" type="text" id="cost1" size="10" style="text-align:right;" /></td>
<td style="text-align:right;"><span class="input-group-addon">$</span><input placeholder="Sub-Total 1" class="stotal" type="text" id="stotal1" size="10" style="text-align:right;" readonly /></td>
</tr>
</table>
<table style="width:100%;">
<tr id="rowFiller">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><input class="btn btn-primary" type="button" id="addItem" value="Add Item" size="10" style="float:right;" onclick="focusField()" /></td>
</tr>
<!--<tr id="addItemBtn">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><input type="button" id="addItem" value="Add Item" style="float:right;" /></td>
</tr>-->
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td style="text-align:right;">
<label style="padding-right:5px;">remove shipping from taxable total
<input type="checkbox" id="addShip" class="addShip" name="addShip" checked ></label>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td style="text-align:right;">
<label style="font-weight:bold;padding-right:5px;display:inline-block;">Shipping</label>
<span class="input-group-addon">$</span>
<input placeholder="$00.00" name="shipping" id="shipping" size="10" style="float:right;text-align:right;" />
</td>
</tr>
<tr>
<td></td>
<td></td>
<td style="text-align:right;">
<label style="font-weight:bold;padding-right:5px;display:inline-block;">Pre-Total</label>
<input name="preTotal" id="preTotal" size="10" style="float:right;text-align:right;" readonly /></td>
<td></td>
<td>
</td>
<td style="text-align:right;">
<div style="text-align:right;display:inline;border-right:1px #ccc solid;margin-right:5px;">
<label style="font-weight:bold;padding-right:5px;display:inline-block;">Tax</label>
<input placeholder="00" class="taxRate" name="taxRate" id="taxRate" size="1" style="text-align:center;" />
<label style="font-weight:bold;display:inline-block;">%</label>
</div>
<label style="font-weight:bold;padding-right:5px;display:inline-block;">Total Tax</label>
<span class="input-group-addon">$</span><input placeholder="$00.00" name="taxTotal" id="taxTotal" size="10" style="float:right;text-align:right;" />
</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td style="text-align:right;font-weight:bold;"><label style="font-weight:bold;padding-right:5px;display:inline-block;">Grand Total</label>
<span class="input-group-addon">$</span><input placeholder="$00.00" name="grand_total" id="grand_total" size="10" style="float:right;text-align:right;" readonly /></td>
</tr>
</table>
Update:
I have resolved the issue as shown in the jsfiddle provided.

Add below condition to your code before actually parsing the values to float.
if(preTotal === ""){
preTotal = 0; // assign number value you like
}
and
if(gTotal === ""){
gTotal = 0; // here also.
}
Because, for the first time, these values come as empty strings.
Also, I noticed the "focusin" event being handled here. It fires the handler everytime user goes to put something inside the test box provided.

Develop Reference

JavaScript is the programming language of the Web.

Add , Update , delete and display data in table with jQuery [closed] - javascript

Related

Using jQuery to auto calculate amount

JQuery Button to Show and Button to Hide

creating new row on button click

HTML Radio Button

Total becomes NaN after increment 10

Categories

Resources