Request your help, as the below line of code if not loading the data into the table when i choose the related radio button, not sure what is wrong nor missing, if there is any alternate way other then this please do let me know.
Code
<div>
<label class="form-check-label><input type="radio" class="form-check-input" name="Gender" value="M" checked>Male</label>
<label class="form-check-label><input type="radio" class="form-check-input" name="Gender" value="F" checked>Female</label>
</div>
<div class="row" id="Dbackup">
<table id="Backup">
<thead>
<tr>
<th>Name</th><th>Gender</th>
</tr>
</thead>
<tbody>
<tr><td>xxxx<</td><td>Male</td></tr>
.
.
<tr><td>xxxx<</td><td>Female</td></tr>
</tbody>
</table>
</div>
**Ajax script**
<script type="text/javascript">
$(document).ready(function(){
$("input[type='radio']").on('click', function(){
var radioValue = $("input[name='Gender']:checked").val();
$.ajax({
url: "/gdata/" + radioValue,
method: "GET",
data:{rvalue:radioValue},
success: function(data){
$('#Backup').load(data);
}
});
});
});
</script>
From,
Vino
Related
I am implement shopping cart with login & witout login i am using cart package from laravel but it will stored cart item on local storage now i want to login and add cart item in database. When i am not login then item adds in local storage but when i am login then items add in database i am confuse. how i am implement I am sharing my code that i am developed need solutions
Controller:
public function add_to_cart(Request $req)
{
$userId=Session::get('userid');
$qty=$req->qty;
$product_id=$req->product_id;
$product_info=DB::table('product_details')
->join('subcategory','subcategory.sub_id','=','product_details.sub_id')
->select('subcategory.image','subcategory.name_of_subcategory','product_details.*')
->where('product_details.product_id',$product_id)->first();
$sub_id=$product_info->sub_id;
//dd($product_info);
Cart::add(array(
'id'=>$product_info->product_id,
'name'=>$product_info->name_of_subcategory,
'price'=>$product_info->price,
'qty'=>$qty,
'options'=>array('image' =>$product_info->image,'description'=>$product_info->description_of_product)
));
if($userId)
{
$content=\Cart::Content();
}
// $content=\Cart::Content();
// dd($content);
//$data = DB::select('select * from product_details where sub_id = ?',[$sub_id]);
//return view('productdetails',['data'=>$data]);
return view('cart');
}
blade
#extends('layout.header')
#section('content')
<?php
$contents=\Cart::Content();
?>
<div class="container mt-5">
<table id="cart" class="table table-hover table-condensed">
<thead>
<tr>
<th>Product</th>
<th>Price</th>
<th>Quantity</th>
<th class="text-center">Subtotal</th>
<th></th>
</tr>
</thead>
<tbody>
#foreach($contents as $v_contents)
<tr>
<td data-th="Product">
<div class="row">
<div class="col-sm-4 hidden-xs"><img src="{{asset('images/'.$v_contents->options->image)}}" alt="..." class="img-responsive"/ height="100" width="100"></div>
<div class="col-sm-8">
<h4 class="nomargin">{{$v_contents->name}}</h4>
<p>{{$v_contents->options->description}}</p>
</div>
</div>
</td>
<td data-th="Price">{{$v_contents->price}}</td>
<td data-th="Quantity">
<div class="plus-minus" style="width:150px; ">
<div class="input-group">
<span class="input-group-btn">
<button type="button" class="btn btn-default btn-number" id="subs" >
<span class="fa fa-minus"></span>
</button>
</span>
<input type="text" id="qty" name="qty" class="form-control input-number" value="{{$v_contents->qty}}" min="1" max="10">
<span class="input-group-btn">
<button type="button" class="btn btn-default btn-number" data-type="plus" id="adds">
<span class="fa fa-plus"></span>
</button>
</span>
</div>
<input type="hidden" name="product_id" id="product_id" value="{{ $v_contents->rowId}}">
</div>
</td>
<td data-th="Subtotal" class="text-center">{{ $v_contents->total}}</td>
<td class="actions" data-th="">
<a class="btn btn-danger btn-sm" href="{{ URL::to('/delete-to-cart/'.$v_contents->rowId)}}"><i class="fa fa-trash-o"></i></a>
</td>
</tr>
#endforeach
</tbody>
<tfoot>
<!-- <tr class="visible-xs">
<td class="text-center"><strong>Total 1.99</strong></td>
</tr> -->
<tr>
<td><i class="fa fa-angle-left"></i> Continue Shopping</td>
<td colspan="2" class="hidden-xs"></td>
<td class="hidden-xs text-center"><strong>Total {{\Cart::subtotal()}}</strong></td>
<td>Checkout <i class="fa fa-angle-right"></i></td>
</tr>
</tfoot>
</table>
</div>
<script type="text/javascript">
/*$('#adds').click(function add() {
var $qty = $("#qty");
var a = $qty.val();
a++;
$("#subs").prop("disabled", !a);
$qty.val(a);
});
$("#subs").prop("disabled", !$("#qty").val());
$('#subs').click(function subst() {
var $qty = $("#qty");
var b = $qty.val();
if (b >= 1) {
b--;
$qty.val(b);
}
else {
$("#subs").prop("disabled", true);
}
});*/
</script>
<script>
$(document).ready(function(){
$(document).on('click', '#adds', function(e) {
var qty = $('#qty').val();
var product_id=$('#product_id').val();
//alert(qty);
e.preventDefault()
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
}
});
jQuery.ajax({
url: "{{ url('/increment') }}",
method: 'get',
data: {
qty: qty,id:product_id
},
success: function(result){
jQuery('#qty').val(result.qty);
}});
});
});
</script>
<script>
$(document).ready(function(){
$(document).on('click', '#subs', function(e) {
var qty = $('#qty').val();
var product_id=$('#product_id').val();
//alert(qty);
e.preventDefault()
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
}
});
jQuery.ajax({
url: "{{ url('/decrement') }}",
method: 'get',
data: {
qty: qty,id:product_id
},
success: function(result){
jQuery('#qty').val(result.qty);
}});
});
});
</script>
#endsection
Im new to Angular and My Requirement is
A component includes a form with the field name call "Brand" and a button to add the same record to database through angular service and there should be a datatable which is fetching all brand data from database to data table.
so by using fetchall method in ts file, i am assigning values to data table. im calling fetchall method to ngoninit() which helps me to show the data in table while component get initialized. to add record, i am using a method call addyear() and calling the same method to onSumbit(). my problem is when i add the record to database, i should be able to load newly added record to angular data table! since that method in ngoninit(), i have to refresh the browser to get the record in data table kindly give me a solution. for the back end, im using Spring boot with Postgres database
My Component TS file
constructor(private brandService:BrandService,private toastyService: ToastyService) { }
ngOnInit() {
this.findbrand();
}
onSubmit()
{
this.saveBrand();
this.submitted=true;
}
saveBrand()
{
this.brandService.addbrand(this.brand).subscribe
(data=>this.addToast({title:'Record Has been added Successfully', msg:'', timeout: 5000, theme:'default', position:'top-right', type:'success'}),
error=>this.addToast({title:'Record Not Added! Sorry', msg:'', timeout: 5000, theme:'default', position:'top-right', type:'error'}));
this.brand=new Brand();
}
findbrand()
{
this.brandService.findbrand().subscribe(data=>this.data=data,error=>this.addToast({title:'Record Cannot be found! Sorry', msg:'', timeout: 5000, theme:'default', position:'top-right', type:'error'}));
}
My Service.TS file
export class BrandService {
constructor(private http:HttpClient) { }
private baseUrl='http://localhost:8080/snazzy-engine/brand';
addbrand(brand:object):Observable<any>
{
return this.http.post(`${this.baseUrl}` + `/insert`, brand,{
headers: {'schemaName':'test.'}
});
}
findbrand():Observable<any>
{
return this.http.get(`${this.baseUrl}` + `/find-all`,{
headers: {'schemaName':'test.'}
});
}
getbrandid(id: number): Observable<Object> {
return this.http.get(`${this.baseUrl}/find-one/${id}`, {headers:
{'schemaName':'test.'}});
}
}
My HTML File
<div class="table-content crm-table">
<div class="project-table">
<div id="crm-contact" class="dt-responsive">
<div class="row">
<div class="col-xs-12 col-sm-12 col-sm-12 col-md-6">
<div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6">
<div style="text-align: right;">
<label>Search:
<input type="search" [(ngModel)]="filterQuery" class="form-control input-sm full-data-search" placeholder="Search name">
</label>
</div>
</div>
</div>
<!-- <div class="panel-heading">User information</div>-->
<div class="table-responsive">
<table class="table table-bordered table-hover table-sm" [mfData]="data | dataFilter : filterQuery" #mf="mfDataTable" [mfRowsOnPage]="rowsOnPage" [(mfSortBy)]="sortBy"
[(mfSortOrder)]="sortOrder">
<thead class="thead-dark text-center">
<tr>
<th style="width:10%">
<mfDefaultSorter by="brandId">Brand ID</mfDefaultSorter>
</th>
<th style="width:70%">
<mfDefaultSorter by="name">Brand Name</mfDefaultSorter>
</th>
<th style="width:10%">
<mfDefaultSorter by="more">More</mfDefaultSorter>
</th>
<th style="width:10%">
<mfDefaultSorter by="checkbox">Delete</mfDefaultSorter>
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of mf.data; let i = index;">
<td>{{item.brandId}}</td>
<td>{{item.brand}}</td>
<td class="action-icon">
<button type="button" class="btn btn-sm btn-primary" (click)="findybrandid(item.brandId);modalDefault.show();">
edit
</button>
</td>
<td>
<div class="checkbox text-center">
<label><input type="checkbox" value=""></label>
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="10">
<mfBootstrapPaginator class="pagination-main f-right"></mfBootstrapPaginator>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
<div style="text-align:center;">
<button class="btn btn-out btn-danger ripple light"><i class="icofont icofont-check-circled"></i>Delete</button>
</div>
</div>
</div>
</div>
try this
saveBrand()
{
this.brandService.addbrand(this.brand)
.subscribe(
data => this.addToast(
{
title:'Record Has been added Successfully',
msg:'',
timeout: 5000,
theme:'default',
position:'top-right',
type:'success'
}),
error => this.addToast(
{
title:'Record Not Added! Sorry',
msg:'',
timeout: 5000,
theme:'default',
position:'top-right',
type:'error'
})
);
this.data.push(this.brand); /*change: push new data into an array*/
this.brand=new Brand();
}
I am doing the ticket application and I am making filtration of items with checkboxes. First the page loads every item in database and view displays it in the table. Then a user can click on the checkbox and view displays just the selected categories. It is supposed to be updated on the checkbox click.
Controller Action:
public ActionResult Display(int[] checkId)
{
if (checkId == null)
{
DispDisplayVM viewModel = new DispDisplayVM
{
Jidlos = db.Jidlos.ToList(),
//Jidlos = (from Jidlo jidlo in db.Jidlos where checkId.Contains(jidlo.CategoryID) select jidlo).ToList(),
Categories = db.Categories.ToList()
};
return View(viewModel);
}
else
{
DispDisplayVM viewModel = new DispDisplayVM
{
//Jidlos = db.Jidlos.ToList(),
Jidlos = (from Jidlo jidlo in db.Jidlos where checkId.Contains(jidlo.CategoryID) select jidlo).ToList(),
Categories = db.Categories.ToList()
};
return View(viewModel);
}
}
Data into controller are passed by ajax. It can be one value or an array. Then there is a LINQ query to filter database.
View:
#using jidloApp.Classes
#using jidloApp.Models
#model DispDisplayVM
#{
ViewBag.Title = "Display";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Display</h2>
<div class="container">
Pridat novy recept
</div>
<div class="btn-group" data-toggle="buttons">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="1" name="checkId">
Kuřecí
</label>
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="2" name="checkId">
Vepřové
</label>
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="3" name="checkId">
Hovězí
</label>
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="4" name="checkId">
Krůtí
</label>
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="5" name="checkId">
Vegetariánské
</label>
</div>
<table class="table">
<thead>
<tr>
<th>Nazev Jidla</th>
<th>Kategorie</th>
<th>Akce</th>
</tr>
</thead>
<tbody>
#foreach (Jidlo jidlo in Model.Jidlos)
{
<tr>
<td>
#Html.DisplayFor(modelItem => jidlo.name)
</td>
<td>
#Html.DisplayFor(modelItem => jidlo.Category.popis)
</td>
<td>
#Html.ActionLink("Edit", "Edit", new { id = jidlo.JidloID }) |
#Html.ActionLink("Details", "Details", new { id = jidlo.JidloID }) |
#Html.ActionLink("Delete", "Delete", new { id = jidlo.JidloID })
</td>
</tr>
}
</tbody>
</table>
<script>
$(document).ready(function () {
$('input[name="checkId"]').click(function () {
getSelectedCheckBoxes();
});
var getSelectedCheckBoxes = function () {
var idArray = [];
$('input[name="checkId"]:checked').each(function () {
idArray.push($(this).attr("value"));
});
$.ajax({
url: '#Url.Action("Display", "Disp")',
type: "POST",
data: { checkId: idArray },
dataType: "json",
traditional: true,
success: function () {
alert("ajax request to server succeed");
}
});
};
});
</script>
Data filtering is working fine and requested data are passed into the view correctly.
What is not working is when I click on the checkbox, the table stays the same as before and does not update. I really can not find what is wrong here. Can you please give some advice what to do?
Btw the table updates when I create new item in database or I delete it...
I think you need a View and a PartialView.
Controller:
public ActionResult Index()
{
return View();
}
public PartialViewResult Display(int[] checkId)
{
DispDisplayVM viewModel = null;
[youre code]
return PartialView(viewModel)
}
Index View:
#{
ViewBag.Title = "Display";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Display</h2>
<div class="container">
Pridat novy recept
</div>
<div class="btn-group" data-toggle="buttons">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="1" name="checkId">
Kuřecí
</label>
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="2" name="checkId">
Vepřové
</label>
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="3" name="checkId">
Hovězí
</label>
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="4" name="checkId">
Krůtí
</label>
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="5" name="checkId">
Vegetariánské
</label>
</div>
<div id="data-container"></div>
<script>
$('input[name="checkId"]').on("click",function () {
var idArray = [];
$("input[name="checkId"]:checked").each(function () {
idArray.push($(this).attr("value"));
});
$("#data-container").load("#Url.Action("Display", "Disp")",{ checkId: idArray });
});
</script>
Display View:
#using jidloApp.Classes
#using jidloApp.Models
#model DispDisplayVM
<table class="table">
<thead>
<tr>
<th>Nazev Jidla</th>
<th>Kategorie</th>
<th>Akce</th>
</tr>
</thead>
<tbody>
#foreach (Jidlo jidlo in Model.Jidlos)
{
<tr>
<td>
#Html.DisplayFor(modelItem => jidlo.name)
</td>
<td>
#Html.DisplayFor(modelItem => jidlo.Category.popis)
</td>
<td>
#Html.ActionLink("Edit", "Edit", new { id = jidlo.JidloID }) |
#Html.ActionLink("Details", "Details", new { id = jidlo.JidloID }) |
#Html.ActionLink("Delete", "Delete", new { id = jidlo.JidloID })
</td>
</tr>
}
</tbody>
</table>
Code written "on fly"
Add row script is not working after adding other functionality screen.
I am trying to do dynamically adding table tows when user clicks "addrow" button. It works when i do it separately. But when i add along with my main jsp code which has other functionality script, that time its not working. Please help me on this.
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>section</title>
<style>
</style>
<!-- date picker -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$( "#datepicker" ).datepicker();
} );
</script>
<!-- addrows functionality -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var i=1;
$("button").click(function(){
$('#add'+i).html("<td><select name='inpparameter0"+i+"'id='input_parameter'><option value='P1'>Type/Rating</option><option value='P2'>Operating Check</option><option value='P3'>Ext.Apperance</option><option value='P4'>Verify TC</option><option value='P5'>Material</option<option value='P6'>Dimension Check</option><option value='P7'>Threads Check</option> <option value='P8'>Visual Check</option><option value='P9'>Specification</option><option value='P10'>Batch no</option><option value='P11'>Mfg. Date</option><option value='P12'>Exp. Date</option></select></td><td><select name='inpspec0"+i+"' id='input_spec'><option value='S1'>As per PO</option><option value='S2'>Damage</option><option value='S3'>OK</option><option value='S4'>Stainless Steel</option><option value='S5'>Gaues</option><option value='S6'>Mild Steel</option><option value='S7'>As per Drawing]</option><option value='S8'>Cast Iron</option><optionvalue='S9'>Copper</option><optionvalue='S10'>Aluminium</option><optionvalue='S11'>Brass</option><option value='S12'>Spring Steel</option><option value='S13'>Tool Steel</option></select> </td><td class='Body_Cell'><input type='text' name='inpact1"+i+"' id='inpact1' value='NIL'></td><td class='Body_Cell'><input type='text' name='inpact2"+i+"' id='inpact2' value='NIL'></td><td class='Body_Cell'><input type='text' name='inpact3"+i+"' id='inpact3' value='NIL'></td><td class='Body_Cell'><input type='text' name='inpact4"+i+"' id='inpact4' value='NIL'></td><td class='Body_Cell'><input type='text' name='inpact5"+i+"' id='inpact5' value='NIL'></td>");
$('#tab_logic').append('<tr id="add'+(i+1)+'"></tr>');
i++;
});
});
</script>
<script>
<!-- For calling Populate Table Servlet for getting Item list -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#tablediv").hide();
$("#showTable").click(function(event){
$.post('PopulateTable',{pono : $('#pono').val()},function(responseJson) {
if(responseJson!=null){
$("#itemtable").find("tr:gt(0)").remove();
var table1 = $("#itemtable");
$.each(responseJson, function(key,value) {
var rowNew = $("<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>");
rowNew.children().eq(0).html('<input type="checkbox"/>');
rowNew.children().eq(1).text(value['itemname']);
rowNew.children().eq(2).text(value['itemcode']);
rowNew.children().eq(3).text(value['supplier']);
rowNew.children().eq(4).text(value['totalqty']);
rowNew.children().eq(5).html('<input type="text"/>');
rowNew.children().eq(6).html('<input type="text"/>');
rowNew.children().eq(7).html('<input type="text"/>');
rowNew.appendTo(table1);
});
}
});
$("#tablediv").show();
});
});
</script>
</script>
<script>
$(document).ready(function() {
$("#find").click(function(event){
$.ajax({
url : 'callserv0',
type: 'POST',
data : {
grnno : $('#grn').val()
},
success : function(data) {
alert("Please hold on!");
var str = data;
var res = str.split(",");
$('#pono').val(res[0]);
$('#podt').val(res[1]);
return false;
}
});
});
});
</script>
<script>
/* function to show dropdown list of print menu*/
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
if (!e.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
for (var d = 0; d < dropdowns.length; d++) {
var openDropdown = dropdowns[d];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
/* reload the page when user clicks new button*/
function myfun1() {
location.reload(true);
}
/* to allow only numerical values in GRn field*/
function isNumber(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
return true;
}
</script>
</head>
<body>
<form>
<img border="0" src="mwlogo.gif" alt="logo" id="topright">
<header><h1>testing</h1></header>
<ul>
<li>Newreload</li>
<li>Helptest</li>
<li>Logout</li>
<li class="dropdown">
Print
<div class="dropdown-content" id="myDropdown">
Print Current Report
Print Preview
Print Report for given date
Print Report for given period
</div>
</li>
</ul>
<p>
Receipt number: <input type="text" id="grn" onkeypress="return isNumber(event)" required/>
<input type="button" id="find" value="Find" class="button0"/>
Type of Evaluation <select name="Evalu">
<option value="electrical">Electrical</option>
<option value="mechanical">Mechanical</option>
</select>
Unit <select name="unit">
<option value="unit1">xx</option>
<option value="unit2">yy</option>
<option value="unit3">zz</option>
<option value="unit5">rr</option>
</select>
<br>
Report No <input type="text" name="irepno" maxlength="8"/>
Inspection date <input type="date" name="inspdate" id="datepicker" required/>
<br></br>
POod number: <input type="text" id="pono" />
POdt Date : <input type="text" id="podt" />
doc No <input type="text" name="invno"/>
doc Date <input type="text" name="invdate"/>
</p>
<input type="button" value="Show Item List" id="showTable" class="button1"/>
<br/>
<div id="tablediv">
<table cellspacing="0" id="itemtable" align="center">
<tr>
<td><input type="checkbox" /></td>
<th scope="col">Item name</th>
<th scope="col">Item code</th>
<th scope="col">Supplier</th>
<th scope="col">Received qty</th>
<th scope="col">Accepted qty</th>
<th scope="col">Rejected qty</th>
<th scope="col">Remarks</th>
</tr>
</table>
</div>
<br></br>
<table cellspacing="0" cellpadding="0" width="100%" id="tab_logic" >
<tr>
<th class="Header_Cell" width="91" align="center">Parameters</th>
<th class="Header_Cell" width="150" align="center">Specification</th>
<th class="Header_Cell" width="150" align="center">Actual1</th>
<th class="Header_Cell" width="50" align="center">Actual2</th>
<th class="Header_Cell" width="50" align="center">Actual3</th>
<th class="Header_Cell" width="50" align="center">Actual4</th>
<th class="Header_Cell" width="50" align="center">Actual5</th>
</tr>
<tr id ='add0'>
<td>
<select name="inpparameter0" id="input_parameter">
<option value="P1">Type/Rating</option>
<option value="P2">Operating Check</option>
<option value="P3">Ext.Apperance</option>
<option value="P4">Verify TC</option>
<option value="P5">Material</option>
<option value="P6">Dimension Check</option>
<option value="P7">Threads Check</option>
<option value="P8">Visual Check</option>
<option value="P9">Specification</option>
<option value="P10">Batch no</option>
<option value="P11">Mfg. Date</option>
<option value="P12">Exp. Date</option>
</select>
</td>
<td>
<select name="inpspec0" id="input_spec">
<option value="S1">As per PO</option>
<option value="S2">Damage</option>
<option value="S3">OK</option>
<option value="S4">Stainless Steel</option>
<option value="S5">Gaues</option>
<option value="S6">Mild Steel</option>
<option value="S7">As per Drawing]</option>
<option value="S8">Cast Iron</option>
<option value="S9">Copper</option>
<option value="S10">Aluminium</option>
<option value="S11">Brass</option>
<option value="S12">Spring Steel</option>
<option value="S13">Tool Steel</option>
</select>
</td>
<td class="Body_Cell"><input type="text" name="inpacta0" id="inpact1" value="NIL"/></td>
<td class="Body_Cell"><input type="text" name="inpactb0" id="inpact2" value="NIL"/></td>
<td class="Body_Cell"><input type="text" name="inpactc0" id="inpact3" value="NIL"/></td>
<td class="Body_Cell"><input type="text" name="inpactd0" id="inpact4" value="NIL"/></td>
<td class="Body_Cell"><input type="text" name="inpacte0" id="inpact5" value="NIL"/></td>
</tr>
</table>
<br>
<input type="button" value="Addrow" id="addrow" class="button1" style="float: right;">
<input type="button" value="Save the record" class="button0">
</form>
</body>
</html>
You have not used the id of the button while using the click event listener. You have used the 'button' class. Please use 'addrow' id of button to trigger the event. Also, use .on for triggering click events as .click doesn't work when DOM is manipulated. Move the $('#tab_logic').append above $("#addrow").on('click',function(){ because on first click there will be no <tr> to append the row.
$(document).ready(function(){
var i=1;
$("#addrow").on('click',function(){
$('#tab_logic').append('<tr id="add'+(i+1)+'"></tr>');
$('#add'+i).html("<td><select name='inpparameter0"+i+"'id='input_parameter'><option value='P1'>Type/Rating</option><option value='P2'>Operating Check</option><option value='P3'>Ext.Apperance</option><option value='P4'>Verify TC</option><option value='P5'>Material</option<option value='P6'>Dimension Check</option><option value='P7'>Threads Check</option> <option value='P8'>Visual Check</option><option value='P9'>Specification</option><option value='P10'>Batch no</option><option value='P11'>Mfg. Date</option><option value='P12'>Exp. Date</option></select></td><td><select name='inpspec0"+i+"' id='input_spec'><option value='S1'>As per PO</option><option value='S2'>Damage</option><option value='S3'>OK</option><option value='S4'>Stainless Steel</option><option value='S5'>Gaues</option><option value='S6'>Mild Steel</option><option value='S7'>As per Drawing]</option><option value='S8'>Cast Iron</option><optionvalue='S9'>Copper</option><optionvalue='S10'>Aluminium</option><optionvalue='S11'>Brass</option><option value='S12'>Spring Steel</option><option value='S13'>Tool Steel</option></select> </td><td class='Body_Cell'><input type='text' name='inpact1"+i+"' id='inpact1' value='NIL'></td><td class='Body_Cell'><input type='text' name='inpact2"+i+"' id='inpact2' value='NIL'></td><td class='Body_Cell'><input type='text' name='inpact3"+i+"' id='inpact3' value='NIL'></td><td class='Body_Cell'><input type='text' name='inpact4"+i+"' id='inpact4' value='NIL'></td><td class='Body_Cell'><input type='text' name='inpact5"+i+"' id='inpact5' value='NIL'></td>");
i++;
});
});
Hope it helps. :)
Having a hard time figuring out how to add an increment value for each id attribute within the div contents with cloned jQuery object.
http://jsfiddle.net/hvK8d/
===================== HTML=====================
<div class="upload-file-container">
<div class="uploadFile left clearfix">
<input type="file" id="FileUpload1">
<table id="RadioButtonList1">
<tbody>
<tr>
<td><input type="radio" value="Resume" id="RadioButtonList1_1">
<label for="RadioButtonList1_1">Resume</label></td>
<td><input type="radio" value="Letter of Recommendation" id="RadioButtonList1_2">
<label for="RadioButtonList1_2">Letter of Recommendation</label></td>
<td><input type="radio" value="Other" id="RadioButtonList1_3">
<label for="RadioButtonList1_3">Other</label></td>
</tr>
</tbody>
</table>
</div>
Remove </div>
<div class=""><a class="plus" href="javascript:;">plus one</a></div>
===================== JQUERY =====================
//Cloning upload file control
$('.remove').live('click', function () {
if (confirm("Are you sure you wish to remove this item?")) {
$(this).parent().slideUp('fast', function () {
$(this).remove();
});
}
return false;
});
$('.plus').click(function () {
console.log('cloning');
var divCloned = $('.upload-file-container:first').clone();
divCloned.hide().insertAfter('.upload-file-container:last').slideDown('fast');
return false;
});
For the sake of completeness I will put here a small solution making use of a "template."
A class for hiding the template:
.upload-file-container.template {
display: none;
}
A small function to do replacements:
$.fn.template = function(variables) {
return this.each(function() {
this.innerHTML = this.innerHTML.replace(/{{(.+)}}/g, function(match, variable) {
return variables[variable];
});
return this;
});
};
A template:
<div class="upload-file-container template">
<div class="uploadFile left clearfix">
<input type="file" id="FileUpload{{id}}">
<table id="RadioButtonList{{id}}"><tbody>
<tr>
<td>
<input type="radio" value="Resume" id="RadioButtonList{{id}}_1">
<label for="RadioButtonList{{id}}_1">Resume</label>
</td>
</tr>
</tbody></table>
</div>
</div>
Usage:
var count = 0;
var divCloned = $(".upload-file-container.template")
.clone()
.removeClass("template")
.template({
id: count++
});
Instead of using numbered IDs, you should be using the array-like notation (e.g. RadioButtonList[]) in the name attribute, and wrap your labels around the inputs:
<td>
<label for="RadioButtonList1_1">
<input type="radio" value="Resume" name="RadioButtonList1[]">
Resume
</label>
</td>
<td>
<label for="RadioButtonList1_2">
<input type="radio" value="Letter of Recommendation" name="RadioButtonList2[]">
Letter of Recommendation
</label>
</td>
<td>
<label for="RadioButtonList1_3">
<input type="radio" value="Other" name="RadioButtonList3[]">
Other
</label>
</td>
P.S. You should also consider using a more descriptive name than RadioButtonList.