I am trying to perform the following functionality using JS. I have achieved the total number of participant's sum but it is not working when i add rows dynamically. It only take effect when i change the first row only.
No of participants * Subsidy Per Participant = Total Training Value
Total Training Value Column Sum in Total Assignment Value
Furthermore, i have no idea how to get Total Training Value of each row and sum of total training values. Can you help me out in this regard so i can finish what i started.
//Dynamic Add Delete Rows
$(document).ready(function() {
var i = 1;
$("#add_row").click(function() {
$('#addr' + i).html("<td>" + (i + 1) + "</td><td><select class='form-control' required name='topic[" + i + "]'><option selected disabled value=''>Select Topic</option><option value='1'>Topic 1</option></select></td><td><input name='alloc_trainig[" + i + "]' type='text' placeholder='Allocated Trainings' class='form-control input-md'></td><td><input name='add_traing[" + i + "]' type='text' placeholder='Additional Trainings (if Any)' class='form-control'></td><td><input name='no_patycpnt[" + i + "]' id='no_patycpnt' type='text' placeholder='No. of Participants' class='Participants form-control input-md'></td><td><input name='prosd_days[" + i + "]' type='text' placeholder='Proposed Days' class='form-control input-md'></td><td><input name='subsify_per_patrcpnt[" + i + "]' type='text' placeholder='Subsidy Per Participant' class='Subsidy form-control input-md'></td><td><input type='text' name='total_value[" + i + "]' id='total_value' placeholder='Total Value' readonly class='form-control'/></td>");
$('#tab_logic').append('<tr id="addr' + (i + 1) + '"></tr>');
i++;
});
$("#delete_row").click(function() {
if (i > 1) {
$("#addr" + (i - 1)).html('');
i--;
}
});
});
//Calculation Code
$(".Participants").change(function() {
var sum = 0;
$('.Participants').each(function(i, obj) {
if ($.isNumeric(this.value)) {
sum += parseFloat(this.value);
}
})
$('#contrctval').val(sum);
});
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style type="text/css">
input {
background-color: transparent;
border: 0px solid;
height: 40px;
width: 160px;
}
</style>
<style type="text/css">
select {
background-color: transparent;
border: 0px solid;
height: 20px;
width: 160px;
}
</style>
</head>
<body>
<div id="wrapper">
<!-- Page Content -->
<div id="page-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h3 class="page-header">Plan Outsourced Training (OST) Budget</h3>
<!-- pre outsurce form Section Start -->
<form role="form" name="frmreg" id="frmreg" method="post" enctype="multipart/form-data">
<div class="col-lg-12">
<div class="panel panel-default panel-table">
<div class="panel-heading">
<div class="row">
<div class="col col-xs-6">
<h3 class="panel-title">To Add More Detail Please Click On "Add Row" Button</h3>
</div>
<div class="col col-xs-6 text-right">
</div>
</div>
</div>
<div class="panel-body">
<table class="table table-bordered table-hover" align="center" id="tab_logic">
<thead>
<tr style="background-color: teal;color:white;">
<th class="text-center">
#
</th>
<th class="text-center">
Topic Name
</th>
<th class="text-center">
Allocated Trainings
</th>
<th class="text-center">
Additional Trainings
</th>
<th class="text-center">
Total Number of Participant
</th>
<th class="text-center">
Proposed Days
</th>
<th class="text-center">
Subsidy Per Participant
</th>
<th class="text-center">
Total Training Value
</th>
</tr>
</thead>
<tbody>
<tr id='addr0'>
<td>
1
</td>
<td>
<select class="form-control" required id="topic" name="topic">
<option selected disabled value="">Select Topic</option>
<option value="">Topic 1</option>
</select>
</td>
<td>
<input type="text" name="alloc_trainig[]" id="alloc_trainig[]" placeholder="Allocated Trainings" class="AllocatedTrainings form-control" />
</td>
<td>
<input type="text" name="add_traing[]" id="add_traing[]" placeholder="Additional Trainings (if assigned)" class="form-control" />
</td>
<td>
<input type="text" name="no_patycpnt[]" id="no_patycpnt" placeholder="No.of Participant" title="No.of Participant" class="Participants form-control" />
</td>
<td>
<input type="text" name="prosd_days[]" id="prosd_days[]" placeholder="Enter Proposed Days" title="No.of Proposed Days" class="form-control" />
</td>
<td>
<input type="text" name="subsify_per_patrcpnt[]" id="subsify_per_patrcpnt[]" placeholder="Enter Subsidy Per Participant" title="Subsidy Per Participant" class="Subsidy form-control" />
</td>
<td>
<input type="text" name="total_value[]" id="total_value[]" placeholder="Total Value" title="Total Value" readonly class="TotalAmount form-control" />
</td>
</tr>
<tr id='addr1'></tr>
</tbody>
</table>
</div>
<div class="panel-body">
<a id="add_row" class="btn btn-default pull-left">Add Row</a><a id='delete_row' class="pull-right btn btn-default">Delete Row</a>
</div>
</div>
</div>
<div class="col-lg-12">
<table class="table table-bordered" border="1" align="center">
<tr>
<th scope="row" style="font-size:10px;color:white" align="left" bgcolor="teal">Total Assigment Value</th>
<th align="left" style="font-size:10px;color:white" scope="row">
<input class="Contract form-control" type="text" required="required" name="contrctval" id="contrctval" readonly />
</th>
</tr>
</table>
<tr>
<th width="234" scope="col" bgcolor="teal" align="left" style="font-size:12px">
<input class="btn btn-primary btn-lg btn-block" type="submit" name="SubmitButton" id="SubmitButton" value="Submit">
</th>
</tr>
</div>
</form>
<!-- pre outsurce form Section Section End -->
</div>
<br /> <br /> <br />
</div>
</div>
</div>
</div>
Try remove numeric check and realize the calculations without any restrictions, do a minimal test, likely it will work.
Related
Hello I have an HTML form and want to be able to add or delete rows dynamically.
ie just by a click on an Icon or a text the entire form row should be duplicated and by clicking on a text or icon the duplicated row should be deleted.
I know JavaScript append can solve this but I don't know how to implement it since my my HTML has needed php tags in them.
the drop-downs options are getting it values from a db and some other input fields are also getting it's values from a db hence the reason I have PHP tags in there.
Below is the attached code.
Kindly help me with how I can append the row with the appended form working just like the parent row
<div class="col-xl-8 col-md-12">
<form>
<div class="card">
<div class="card-header">
<h3 class="card-title"><strong class="text-success" style="cursor: pointer;"><?=ucwords($clientName)?></strong> REP'S INFORMATION</h3>
</div>
<div class="card-body">
<div class="row">
<div class="col-sm-4 col-md-4">
<div class="form-group">
<label class="form-label">Reps Name<span class="text-red">*</span></label>
<input type="text" name="" class="form-control" required="">
</div>
</div>
<div class="col-sm-4 col-md-4">
<div class="form-group">
<label class="form-label">E-Mail<span class="text-red">*</span></label>
<input type="email" name="" class="form-control" required="">
</div>
</div>
<div class="col-sm-4 col-md-4">
<div class="form-group">
<label class="form-label">Phone No.<span class="text-red">*</span></label>
<input type="text text-dark" class="form-control" name="client_contact2" required="" id="client_contact2" onkeypress="return restrictAlphabets(event)" onpaste="return false;" ondrop="return false;" autocomplete="off" required="">
<input type="date" name="" value="<?=date("Y-m-d")?>" hidden="">
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h3 class="card-title">ADD DEVICE(S) INFORMATION</h3>
</div>
<div class="card-body">
<?php
if ($clientType === $slaClient) {
?>
<table id='dyntbl' class='table border text-nowrap text-md-nowrap table-striped mb-0'>
<thead>
<tr>
<th class="text-center" >Device Brand</th>
<th class="text-center">Device Model</th>
<th class="text-center">Serial Number</th>
<th class="text-center" style="width:10%">SLA Device</th>
<th><button type="button" class=" btn text-success" data-name='add'><i class="fe fe-plus-circle" data-id='ad' style="font-size:1.6em;"></i></button></th>
</tr>
</thead>
<tbody class="field_wrapper " id="table_body">
<tr>
<td>
<select class="form-control form-select brand" data-bs-placeholder="Select" name="brand[]" required="" id="brand" onchange="checkDeviceStatus()">
<?php
$readALL = "SELECT * FROM productbrands WHERE deleted = 0";
$displayAll = mysqli_query($conn,$readALL);
while($rowFetchAll = mysqli_fetch_array($displayAll)){
$brandName = $rowFetchAll['brandName'];
$brandid = $rowFetchAll['brandID'];
?>
<option value="<?=$brandid?>"><?=$brandName?></option>
<?php } ?>
</select>
</td>
<td>
<select class="form-control form-select model" data-bs-placeholder="Select" name="model[]" required="" id="model" onchange="checkDeviceStatus()">
<?php
$readALL1 = "SELECT * FROM productmodels WHERE deleted = 0";
$displayAll1 = mysqli_query($conn,$readALL1);
while($rowFetchAll1 = mysqli_fetch_array($displayAll1)){
$modelName = $rowFetchAll1['modelName'];
$modelid = $rowFetchAll1['modelID'];
?>
<option value="<?=$modelid?>"><?=$modelName?></option>
<?php } ?>
</select>
</td>
<td><input type="text" name="serialNo" class="form-control serialNo" id="serialNo" onchange="checkDeviceStatus()"></td>
<!-- The input field below is to get value from AJAX -->
<td><input type="text" name="deviceLevel" class="form-control" readonly="" id="deviceLevel">
<!-- End of Input field -->
</td>
<input type="text" name="" id="client" value="<?=$clientID?>" hidden="" class="client">
<td><button type="button" class=" btn text-danger" data-name="del"><i class="fe fe-minus-circle" style="font-size:1.6em;"></i></button></td>
</tr>
</tbody>
</table>
<?php } ?>
<?php
if ($clientType === $nonSla) {
?>
<table class='table border text-nowrap text-md-nowrap table-striped mb-0'>
<thead>
<tr>
<th>Product Model Non-SLA</th>
<th>Serial Number Non-SLA</th>
<th>Device Status Non-SLA</th>
<th><button type="button" class=" btn text-success" data-name='add'><i class="fe fe-plus-circle" data-id='ad' style="font-size:1.6em;"></i></button></th>
</tr>
</thead>
<tbody class="field_wrapper " id="table_body">
<tr>
<td><input type="text" name="" class="form-control" ></td>
<td><input type="text" name="" class="form-control"></td>
<td><input type="text" name="" class="form-control"></td>
<td><button type="button" class=" btn text-danger" data-name="del"><i class="fe fe-minus-circle" style="font-size:1.6em;"></i></button></td>
</tr>
</tbody>
</table>
<?php } ?>
</div>
</div>
</form>
</div>
Here is basic example:
const table_row_html = `
<tr>
<th scope="row">{{ROW_NO}}</th>
<td>Mark</td>
<td>
<select class="form-select" name="modal[]"">
<option selected>Open this select menu</option>
<option value=" 1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</td>
<td>#mdo</td>
<td><a class="btn btn-danger btn-sm delete" href="#">Remove</a></td>
</tr>`;
$(document).on("click", ".table a.insert", function() {
const table_body = $(this).closest(".table").find("tbody");
table_body.append(
table_row_html.replace("{{ROW_NO}}", table_body.children("tr").length + 1)
);
return false;
});
$(document).on("click", ".table a.delete", function() {
$(this).closest("tr").remove();
return false;
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
<th scope="col">
<a class="btn btn-primary insert" href="#">Add</a>
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>
<select class="form-select" name="modal[]" ">
<option selected>Open this select menu</option>
<option value=" 1 ">One</option>
<option value="2 ">Two</option>
<option value="3 ">Three</option>
</select>
</td>
<td>#mdo</td>
<td><a class="btn btn-danger btn-sm delete " href="# ">Remove</a></td>
</tr>
</tbody>
</table>
</div>
I want to multiply 2 input box (man_day_rates * estimated_man_days) but the input is dynamically generate and display it in subtotal.The problem is I only can calculate the first input, when i press add button, the second input does cannot calculate.
$(document).ready(function(){
var i=1;
$('#add').click(function(){
i++;
$('#dynamic_field').append('<tr id="row1'+i+'"><td style="border:none;"></td>\
<td style="border:none;">\
<input id="man_day_rates'+i+'" class="form-control col-md-7 col-xs-12" type="number" min="1" name="man_days_rate[]" >\
</td>\
<td style="border:none;">\
<input id="estimated_man_days'+i+'" class="form-control col-md-7 col-xs-12" type="number" min="1" name="estimated_man_days[]">\
</td>\
<td style="border:none;"> <input id="result2" type="text" name="" value=""/></td>\
<td style="height: 20px;line-height: 20px;white-space: nowrap; border:none;"><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn-xs btn_remove">X</button></td>\
</tr> ');
});
$(document).ready(function(){
var man_day_rates = $('#man_day_rates1');
var estimated_man_days = $('#estimated_man_days1');
estimated_man_days.keyup(function(){
var total=isNaN(parseInt(estimated_man_days.val()* man_day_rates.val())) ? 0 :(man_day_rates.val()* estimated_man_days.val());
//$("#result").val(total);
alert(total);
});
man_day_rates.keyup(function(){
var total=isNaN(parseInt(estimated_man_days.val()* man_day_rates.val())) ? 0 :(man_day_rates.val()* estimated_man_days.val());
//$("#result").val(total);
alert(total);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table-responsive">
<table class="table table-striped" id="dynamic_field" style="padding:0px;">
<thead>
<tr class="headings">
<th class="column-title">#</th>
<th class="column-title">Item Title</th>
<th class="column-title">Description </th>
<th class="column-title" style="width:100px;">Man Day Rates (RM)</th>
<th class="column-title" style="width:100px;">Estimated Man Days </th>
<th class="column-title"style="width:100px;">Subtotal (RM)</th>
<th class="column-title"style="width:100px;"></th>
</th>
</tr>
</thead>
<tbody>
<tr id="row01">
<?php
$i = 1;
?>
<td style="border:none;">
<input id="man_day_rates<?php echo $i; ?>" class="form-control col-md-7 col-xs-12" type="number" min="1" name="man_days_rate[]" >
</td>
<td style="border:none;">
<input id="estimated_man_days<?php echo $i; ?>" class="form-control col-md-7 col-xs-12" type="number" min="1" name="estimated_man_days[]">
</td>
<td id=""> <input id="result" type="text" name="" value=""/></td>
<td class="add_remove_button" style="height: 20px;line-height: 20px;white-space: nowrap;"></td>
</tr>
</tbody>
</table>
</div>
<div><button id="add" type="button" class="btn btn-primary "><span class="fa fa-plus" style="margin-right:5px;"></span>Add Items</button></div>
I want to multiply 2 input box (man_day_rates * estimated_man_days) but the input is dynamically generate and display it in subtotal.The problem is I only can calculate the first input, when i press add button, the second input does cannot calculate.
you have to initialize your key event each time when you add new control dynamically.
Try like below.
$(document).ready(function(){
$('#add').click(function(){
i++;
//Add field document History
$('#dynamic_field').append('<tr id="row1'+i+'"><td style="border:none;"></td>\
<td style="border:none;">\
<input id="man_day_rates'+i+'" class="form-control col-md-7 col-xs-12" type="number" min="1" name="man_days_rate[]" >\
</td>\
<td style="border:none;">\
<input id="estimated_man_days'+i+'" class="form-control col-md-7 col-xs-12" type="number" min="1" name="estimated_man_days[]">\
</td>\
<td style="border:none;"> <input id="result2" type="text" name="" value=""/></td>\
<td style="height: 20px;line-height: 20px;white-space: nowrap; border:none;"><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn-xs btn_remove">X</button></td>\
</tr> ');
var man_day_rates = $('#man_day_rates'+i);
var estimated_man_days = $('#estimated_man_days'+i);
estimated_man_days.keyup(function(){
var total=isNaN(parseInt(estimated_man_days.val()* man_day_rates.val())) ? 0 :(man_day_rates.val()* estimated_man_days.val());
//$("#result").val(total);
alert(total);
});
man_day_rates.keyup(function(){
var total=isNaN(parseInt(estimated_man_days.val()* man_day_rates.val())) ? 0 :(man_day_rates.val()* estimated_man_days.val());
//$("#result").val(total);
alert(total);
});
});
});
this is a sample bootstrap dynamic table :
I want to access the data in the table
HTML
<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 class="text-center">
#
</th>
<th class="text-center">
Name
</th>
<th class="text-center">
Mail
</th>
<th class="text-center">
Mobile
</th>
</tr>
</thead>
<tbody>
<tr id='addr0'>
<td>
1
</td>
<td>
<input type="text" name='name0' placeholder='Name' class="form-control"/>
</td>
<td>
<input type="text" name='mail0' placeholder='Mail' class="form-control"/>
</td>
<td>
<input type="text" name='mobile0' placeholder='Mobile' class="form-control"/>
</td>
</tr>
<tr id='addr1'></tr>
</tbody>
</table>
</div>
</div>
<a id="add_row" class="btn btn-default pull-left">Add Row</a><a id='delete_row' class="pull-right btn btn-default">Delete Row</a>
</div>
<p id="qoz">s</p>
JavaScript
$(document).ready(function(){
var i=1;
$("#add_row").click(function(){
$('#addr'+i).html("<td>"+ (i+1) +"</td><td><input name='name"+i+"' type='text' placeholder='Name' class='form-control input-md' /> </td><td><input name='mail"+i+"' type='text' placeholder='Mail' class='form-control input-md'></td><td><input name='mobile"+i+"' type='text' placeholder='Mobile' class='form-control input-md'></td>");
$('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
i++;
});
$("#delete_row").click(function(){
if(i>1){
$("#addr"+(i-1)).html('');
i--;
}
});
});
how can I access the data in the table?
$(document).ready(function(){
var i=1;
$("#add_row").click(function(){
$('#addr'+i).html("<td>"+ (i+1) +"</td><td><input name='name"+i+"' type='text' placeholder='Name' class='form-control input-md' /> </td><td><input name='mail"+i+"' type='text' placeholder='Mail' class='form-control input-md'></td><td><input name='mobile"+i+"' type='text' placeholder='Mobile' class='form-control input-md'></td>");
$('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
i++;
});
$("#delete_row").click(function(){
if(i>1){
$("#addr"+(i-1)).html('');
i--;
}
});
$('#Get_row_data').click(function(){
$('[id^=addr]').each(function(){
var id = $(this).attr('id');
$('#'+id +' td input').each(function(){
console.log($(this).val());
});
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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 class="text-center">
#
</th>
<th class="text-center">
Name
</th>
<th class="text-center">
Mail
</th>
<th class="text-center">
Mobile
</th>
</tr>
</thead>
<tbody>
<tr id='addr0'>
<td>
1
</td>
<td>
<input type="text" name='name0' placeholder='Name' class="form-control"/>
</td>
<td>
<input type="text" name='mail0' placeholder='Mail' class="form-control"/>
</td>
<td>
<input type="text" name='mobile0' placeholder='Mobile' class="form-control"/>
</td>
</tr>
<tr id='addr1'></tr>
</tbody>
</table>
</div>
</div>
<a id="add_row" class="btn btn-default pull-left">Add Row</a><a id='delete_row' class="pull-right btn btn-default">Delete Row</a>
<a id='Get_row_data' class="pull-right btn btn-default">Get Row Data</a>
Hello Please check this code This might help you out in solving your purpose.
What i did is i have added a new button to get the data from row.
I used wildCard Id of Row and fetch the value of input boxes.
Thanks
To display data , kindly See bellow code (I've added show data button click )
$(document).ready(function(){
var i=1;
$("#add_row").click(function(){
var numTr = $("#tab_logic tbody tr").length;
$('#tab_logic').append("<tr id='addr"+(numTr)+"'><td>"+ (numTr+1) +"</td><td><input name='name"+numTr+"' type='text' placeholder='Name' class='form-control input-md' /> </td><td><input name='mail"+numTr+"' type='text' placeholder='Mail' class='form-control input-md'></td><td><input name='mobile"+numTr+"' type='text' placeholder='Mobile' class='form-control input-md'></td></tr>");
});
$("#delete_row").click(function(){
var notr = $("#tab_logic tbody tr").length
if(notr>1){
$("#addr"+(notr-1)).remove();
}
});
$("#show_data").click(function(){
var htmlString="";
$("#tab_logic tbody tr").each(function(index,el){
if(index<$("#tab_logic tbody tr").length) {
var name = $("[name='name"+index+"']").val();
var mail = $("[name='mail"+index+"']").val();
var mobile = $("[name='mobile"+index+"']").val();
console.log("Row "+index+" : [Name="+name+"] - [Mail="+mail +"] - [Mobile="+mobile+"]");
htmlString += showDataHtml(index,name,mail,mobile)
}
$("#data-row").html(htmlString);
});
});
});
function showDataHtml(index,name,mail,mobile) {
index++;
return "<div class='col-md-12'>Row "+index+" : Name = "+name+" - Mail = "+mail+" - Mobile = "+mobile+"</div>"
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.css" rel="stylesheet"/>
<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 class="text-center">
#
</th>
<th class="text-center">
Name
</th>
<th class="text-center">
Mail
</th>
<th class="text-center">
Mobile
</th>
</tr>
</thead>
<tbody>
<tr id='addr0'>
<td>
1
</td>
<td>
<input type="text" name='name0' placeholder='Name' class="form-control"/>
</td>
<td>
<input type="text" name='mail0' placeholder='Mail' class="form-control"/>
</td>
<td>
<input type="text" name='mobile0' placeholder='Mobile' class="form-control"/>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<a id="add_row" class="btn btn-default pull-left">Add Row</a><a id='delete_row' class="pull-right btn btn-default">Delete Row</a>
</div>
<div class="row">
<a id='show_data' class=" btn btn-default">SHow Data</a>
</div>
<div class="container">
<div id="data-row" class="row clearfix">
<div>
</div>
I want to add some validation to my web form, the user inputs are created in a dynamic table**(user can add and delete rows)**, basically the user will click submit when they have completed, and i will call a java script function to build me a list to pass to my controller, my question is how i can validate the users inputs to ensure its right data type etc before the list is built
HTML
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<table class="tab-content" id="tab_logic" name="table1">
<thead>
<tr>
<th class="text-center" style="width: 25px">
#
</th>
<th class="text-center" style="width: 150px">
Status
</th>
<th class="text-center" style="width: 250px">
Actions
</th>
<th class="text-center" style="width: 150px">
Target
</th>
<th class="text-center" style="width: 100px">
Progress
</th>
<th class="text-center" style="width: 250px">
Comments
</th>
</tr>
</thead>
<tbody id="mainData">
<tr id='entry1'>
<td>
1
</td>
<td>
<div class="form-group">
<select name="select" class="form-control" id="status1">
<option disabled="disabled" selected="selected">Select:</option>
<option style="color: green; background-color: white">Competent</option>
<option style="color: orange; background-color: white">Improvement-Required</option>
<option style="color: red; background-color: white">Below Average</option>
</select>
</div>
</td>
<td>
<textarea class="form-control" id='action1'></textarea>
</td>
<td>
<input type="date" class="form-control" id='target1'/>
</td>
<td>
<input type="text" class="form-control" id='progress1' required="required"/>
</td>
<td>
<textarea class="form-control" id='comments1'></textarea>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div>
<a id="add_row" class="btn btn-primary btn-sm pull-left">Add Row</a>
<a id='delete_row' class="btn btn-primary btn-sm">Delete Row </a>
<input type="button" value="Submit" id="subButton" widthvalue="Submit" class="btn btn-primary btn-sm" style="vertical-align: bottom"/>
</div>
</div>
Javascript
$("#subButton")
.click(function() {
for (var j = 1; j <= x; j++) {
var statusEntered = document.getElementById("status" + j).value;
var actionsEntered = document.getElementById("action" + j).value;
var targetEntered = document.getElementById("target" + j).value;
var progessEntered = document.getElementById("progress" + j).value;
var commentsEntered = document.getElementById("comments" + j).value;
var area = "PersonalDevelopment";
var test = employeeSelected.value;
var entry = new newEntry(statusEntered,
actionsEntered,
targetEntered,
progessEntered,
commentsEntered,
area, test
);
arrayDetails.push(entry);
}
sendToController();
});
function sendToController() {
$.ajax({
type: "POST",
url: '#Url.Action("Save", "OneToOne", "EmpList")',
contentType: "application/json; charset=utf-8",
datatype: JSON,
data: JSON.stringify({ methodParam: arrayDetails }),
traditional: true
});
}
});
I want to add a new bootstrap row with one click, I tried this, but I only get a new row with number, not the copy of a complete row:
<table class="table table-bordered table-hover" id="tab_logic">
<thead>
<tr>
<th class="text-center">
Comment
</th>
<th class="text-center">
Price
</th>
<th class="text-center">
Type
</th>
</tr>
</thead>
<tbody>
<tr id='addr0'>
<td>
<div class="smart-widget sm-right ">
<label for="client" class="field prepend-icon required-field">
<select id="client" name="client" class="chosen-select" data-placeholder="Select..."></select>
</label>
</div>
</td>
<td>
<br>
<div class="smart-widget sm-right ">
<label for="cop" class="field prepend-icon required-field">
Price
<input type="text" name="cop" id="cop" class="gui-input">
</label>
</div>
</td>
<td>
<div class="smart-widget sm-right ">
<label for="client" class="field prepend-icon required-field">
<label for="client" class="control-label"> Type</label>
<select id="client" name="client" class="chosen-select" data-placeholder="Select..."></select>
</label>
</div>
</td>
</tr>
<tr id='addr1'></tr>
</tbody>
</table>
<a id="add_row" class="btn btn-default pull-left">Add Row</a>
<a id='delete_row' class="pull-right btn btn-default">Delete Row</a>
Script:
$(document).ready(function(){
var i=1;
$("#add_row").click(function(){
$('#addr'+i).html("<td>"+ (i+1) +"</td>")
$('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
i++;
});
$("#delete_row").click(function(){
if(i>1){
$("#addr"+(i-1)).html('');
i--;
}
});
});
Why only add new row with number of row instead of row with two dropdowns and one field?
Thanks in advance!
Simply because that what you have passed in "<td>"+ (i+1) +"</td>".
You could add the content of default row #addr0 in every row you add :
$('#addr'+i).html($('#addr0').html());
Hope this helps.
$(document).ready(function(){
var i=1;
$("#add_row").click(function(){
$('#addr'+i).html($('#addr0').html());
$('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
i++;
});
$("#delete_row").click(function(){
if(i>1){
$("#addr"+(i-1)).html('');
i--;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<table class="table table-bordered table-hover" id="tab_logic">
<thead>
<tr>
<th class="text-center">
Comment
</th>
<th class="text-center">
Price
</th>
<th class="text-center">
Type
</th>
</tr>
</thead>
<tbody>
<tr id='addr0'>
<td>
<div class="smart-widget sm-right ">
<label for="client" class="field prepend-icon required-field">
<select id="client" name="client" class="chosen-select" data-placeholder="Select..."></select>
</label>
</div>
</td>
<td>
<br>
<div class="smart-widget sm-right ">
<label for="cop" class="field prepend-icon required-field">
Price
<input type="text" name="cop" id="cop" class="gui-input">
</label>
</div>
</td>
<td>
<div class="smart-widget sm-right ">
<label for="client" class="field prepend-icon required-field">
<label for="client" class="control-label"> Type</label>
<select id="client" name="client" class="chosen-select" data-placeholder="Select..."></select>
</label>
</div>
</td>
</tr>
<tr id='addr1'></tr>
</tbody>
</table>
<a id="add_row" class="btn btn-default pull-left">Add Row</a>
<a id='delete_row' class="pull-right btn btn-default">Delete Row</a>
You have to get previous HTML code into new row.
<script>
$(document).ready(function(){
var i=1;
$("#add_row").click(function(){
lastobj = "#addr"+""+(i-1);
content = $(lastobj).html();
$('#addr'+i).html(content);
$('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
i++;
});
$("#delete_row").click(function(){
if(i>1){
$("#addr"+(i-1)).html('');
i--;
}
});
});
</script>
Also use ID to get their value or using an arrays.