I have this dynamic form, where the user can add or remove rows from the form. The form takes a first name, last name and an email. I am really at a loss as to how to capture the data from the rows. If someone can point me to a resource that can help me with this I would really appreciate it! Please find below the html and JavaScript for the form, as well as the post mapping for the page.
<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">
First Name
</th>
<th class="text-center">
Last Name
</th>
<th class="text-center">
Email
</tr>
</thead>
<tbody>
<tr id='addr0'>
<td>
1
</td>
<td>
<input type="text" name='firstName' placeholder='First Name' class="form-control"/>
</td>
<td>
<input type="text" name='lastName' placeholder='Last Name' class="form-control"/>
</td>
<td>
<input type="text" name='email' placeholder='Email Adress' 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>
<script>
var i=1;
$(document).ready(function(e){
$("#add_row").click(function()
{
$('#addr'+i).html("<td>"+ (i+1) +"</td><td><input name='firstName"+i+"' type='text' placeholder='First Name' class='form-control input-md' /></td><td><input name='lastName"+i+"' type='text' placeholder='Last Name' class='form-control input-md'></td><td><input name='email"+i+"' type='text' placeholder='Email Address' class='form-control input-md'></td>");
$('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
i++;
})});
$(document).ready(function(e){
$("#delete_row").click(function()
{
if(i>1)
{
$("#addr"+(i-1)).html('');
i--;
}
})});
</script>
//Post Mapping Contract Trace Report
#PostMapping("/patienthome/contact-trace-report")
public ModelAndView contractTraceReportPost(ModelAndView modelAndView, User user, #RequestParam String email, #RequestParam String firstName, #RequestParam String lastName ) throws IOException, ParseException
{
Authentication authentication = SecurityContextHolder.getContext().getAuthentication();
Patient patient = patientRepo.findByEmail(authentication.getName());
//Need to capture as many emails as there are rows
Patient contact1 =patientRepo.findByEmail(email);
modelAndView = new ModelAndView("redirect:/patienthome");
modelAndView.addObject("confirmationMessage", "Patient Profile Was Updated");
return modelAndView;
}
Thank you all in advance I really appreciate it!!!!
Related
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.
Here I am trying to fetch data from Mysql database using PHP and Ajax. My problem is, when I type the Test ID on test_id text box, just it immediatetly shows the Test Name according to the Test ID on test_name text box.
Here I used the function called checkname. In console just it show the Test Name but does not show in the test_name text box.
Here is the HTML code.
<table class="table table-hover table-white">
<thead>
<tr>
<th class="col-sm-1">Test ID</th>
<th class="col-md-6">Test Name</th>
<th style="width:100px;">Amount</th>
<th> Action</th>
</tr>
</thead>
<tbody id="rows">
<tr>
<td> <input class="form-control" type="text" style="width:200px" id="test_id[]" onblur="checkname();" onkeyup="checkname();" onchange="checkname();"> </td>
<td> <input type="text" style="width:300px" class="form-control text-right form-amt" readonly="" id="test_name[]" > </td>
<td> <input type="text" style="min-width:100px" class="form-control text-right form-amt" readonly="" id="amount[]"> </td>
<td><center> <i class="fa fa-plus"></i> </center> </td>
</tr>
</tbody>
</table>
Here is the Ajax code;
<script>
function checkname()
{
var test_id = document.getElementById("test_id[]").value;
$.ajax({
type: 'post',
url: "adminquery/fetch_test_name.php", // request file the 'check_email.php'
data: {'test_id': test_id, },
success: function (data) {
$("#test_name[]").html(data);
}
});
}
</script>
Here is the PHP code
<?php
include('../auth/dbconnection.php');
$output='';
$sql="SELECT * from testings where test_id='".$_POST['test_id']."'";
$result=mysqli_query($conn,$sql);
while($row=mysqli_fetch_array($result)){
$name= $row["testing_name"];
$output.=' <input type="text" readonly="" id="test_name[]" value="'.$name.' "> '.$name.' ';
}
echo $output;
?>
Anyone could help me may highly appreciated.
First lose the brackets in the id.
<input id="test_name" type="text" value="other" />
Then use .val() instead of .html()
$("#test_name").val("something")
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 have a table which should have an option to add a row and delete a row. I used jquery to insert HTML and it worked perfectly, but I was told this method may have drawbacks and I should rather consider cloning. After doing some more research, I tried implementing it in my website. It doesn't seem to be working.
My html code:
<div class="row">
<div class="col-md-12">
<br/>
<!--A card inside the second tab, and the table is inside the card-->
<div class="card">
<div class="header">
<h4 class="title">1.1 Teaching</h4>
<p class="category">Please Add the Courses taught in the academic year</p>
</div>
<div class="content">
<div class="content table-responsive table-full-width" id="t_table">
<table class="table table-hover table-striped" id="t_tab_logic">
<thead>
<th>#</th>
<th>Course</th>
<th>Section</th>
<th>Session</th>
<th>Term</th>
<th>Day/Evening</th>
<th>%age Taught</th>
<th>Load/Overload</th>
<th>Enrolment</th>
<th>Number of T.As/IAs</th>
</thead>
<tbody>
<tr class="tr_clone">
<td>
1
</td>
<td>
<input type="text" name='t_name0' placeholder='Name' class="form-control"/>
</td>
<td>
<input type="text" name='t_section0' placeholder='Section' class="form-control"/>
</td>
<td>
<input type="text" name='t_session0' placeholder='Session' class="form-control"/>
</td>
<td>
<input type="number" name='t_term0' placeholder='Term' class="form-control"/>
</td>
<td>
<input type="text" name='t_day0' placeholder='D/E' class="form-control"/>
</td>
<td>
<input type="number" name='t_%age0' placeholder='%age' class="form-control"/>
</td>
<td>
<input type="text" name='t_load0' placeholder='Load/Over' class="form-control"/>
</td>
<td>
<input type="number" name='t_enrolment0' placeholder='#' class="form-control"/>
</td>
<td>
<input type="number" name='t_number0' placeholder='#' class="form-control"/>
</td>
</tr>
</tbody>
</table>
<div class="row">
<div class="col-sm-2">
<a id="t_add_row" class="btn btn-primary btn-fill pull-left">Add Row</a>
</div>
<div class="col-sm-2 col-sm-offset-8">
<a id="t_delete_row" class="btn btn-submit btn-fill pull-right">Delete Row</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
And my java script code looks like:
$(document).ready(function () {
$("#t_add_row").live('click', function(){
var $tr = $(this).closest('.tr_clone');
var $clone = $tr.clone();
$clone.find(":text").val('');
$tr.after($clone);
});
});
I would also like to implement the delete row link, which I felt would be implemented after I implement the add row link.
Any help would be greatly appreciated, thank you for being patient, I am sort of a beginner at jQuery.
try this code
$("body").on('click','#t_add_row', function(){
var tr = $('#t_tab_logic .tr_clone:last');
var clone = tr.clone();
clone.find("input").val('');
tr.after(clone);
});
I have this piece of code that should do the following:
After typing into each input field and pressing the "Add row" button a new row should be added to the end of the table. Pressing the "Delete row" button should remove the last row created.
At this point, when I press any of the buttons, it won't do anything.
As a mention, when I am verifying Chromes' Console for any JS errors I get this:
Uncaught ReferenceError: $ is not defined
This is the HTML:
<body style="background-color:lavender">
<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">
User
</th>
<th class="text-center">
Password
</th>
<th class="text-center">
IP
</th>
<th class="text-center">
Country
</th>
<th class="text-center">
IP disponibility
</th>
</tr>
</thead>
<tbody>
<tr id='addr0'>
<td>
1
</td>
<td>
<input type="text" name='user0' placeholder='User' class="form-control"/>
</td>
<td>
<input type="text" name='pass0' placeholder='Password' class="form-control"/>
</td>
<td>
<input type="text" name='ip0' placeholder='IP' class="form-control"/>
</td>
<td>
<input type="text" name='country0' placeholder='Country' class="form-control"/>
</td>
<td>
<input type="text" name='ipDisp0' placeholder='IP Details' 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>
And this is the JS:
$(document).ready(function(){
var i=1;
$("#add_row").click(function(){
$('#addr'+i).html("<td>"+ (i+1) +"</td><td><input name='user"+i+"' type='text' placeholder='User' class='form-control input-md' /></td><td><input name='pass"+i+"' type='text' placeholder='Password' class='form-control input-md'></td><td><input name='ip"+i+"' type='text' placeholder='IP' class='form-control input-md'></td><td><input name='country"+i+"' type='text' placeholder='Country' class='form-control input-md'></td><td><input name='ipDisp"+i+"' type='text' placeholder='IP details' 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--;
}
});
});
Any ideas on what should I change in my JS ?
Thanks
Remember jquery library must be placed first than bootstrap, maybe that would be your problem, your code is fine, here is the working fiddle using jquery 1.11.0
<script src="jquery.min.js">
<script src="bootstrap.min.js">
The fiddle [1]: http://jsfiddle.net/gLrhnqo2/
You need add the Jquery script. If you select the latest version works good.