Develop Reference

with jquery I am adding input boxes and table row as shown in pic how can i subtract from total onkeyup when i create a box and put value in it

Here is how I am adding Bank names rows and the which will be added to it
How can i subtract from total row in real time > onkeyup > by creating input using jquery and putting value in it? please help. Actually I want my total sale to be deposited to different banks thats why I want it
<form method="GET" action="savebank.php" class="">
<table class="table table-bordered" id='TextBoxesGroup'>
<tr>
<th>Total Amount</th>
<th id="total" value="<?php echo $tsp; ?>">Rs. <?php echo $tsp; ?></th>
</tr>
<tr id="TextBoxDiv1">
<!-- INPUT BOXES WILL BE HERE-->
</tr>
</table>
<button type="submit" class="btn btn-lg btn-success btn-block" id="ttwo" style="display:none;">Submit</button>
</form>
<!-- Below is jquery -->
<script type="text/javascript">
$(document).ready(function() {
var counter = 2;
$("#addmore").click(function() {
if (counter > 30) {
alert("No more textboxes allowed");
return false;
}
var newTextBoxDiv = $(document.createElement('tr'))
.attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<td><input type="text" name="bank[]" required class="form-control" placeholder="Bank Name" id="textbox' + counter + '"></td>' +
'<td><input type="number" name="amnt[]" required class="form-control textboz" placeholder="Amount" id="textbox' + counter + '"></td>');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
$("ttwo").css("display", "block");
$("#remove").click(function() {
if (counter == 1) {
alert("No more textbox to remove");
return false;
}
counter--;
$("#TextBoxDiv" + counter).remove();
});
$("#getButtonValue").click(function() {
var msg = '';
for (i = 1; i < counter; i++) {
msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
}
alert(msg);
});
});
</script>

Passing date functions to javascript in laravel

I am getting some data using ajax but I cannot pass diffForHuman() function to get different format of date. I want date in another format. But by passing created_at to my markup then it is giving me undefined date. Below is my code. Pls help
//Javascript
$(document).ready(function () {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
});
$('select[name="class_id"]').on('change', function() {
var classID = $(this).val();
if(classID) {
$.ajax({
url: '/attendance/ajax/'+classID,
type: "GET",
dataType: "json",
success:function(data) {
var markup = '';
markup += '<tr><th style="width: 2%" class="align-middle text-center"><input type="checkbox" id="options"></th><th style="width: 2%" class="align-middle text-center">#</th> <th style="width: 15%" class="text-center">Student ID<input type="text" class="form-control" disabled></th> <th style="width: 15%" class="text-center">Student Name<input type="text" class="form-control" disabled></th> <th style="width: 15%" class="text-center">Attendance<input type="text" class="form-control" disabled></th> <th style="width: 15%" class="text-center">Date<input type="text" class="form-control" disabled></th> <th style="width: 15%;" class="align-middle text-center">Actions</th> <tr>';
$.each(data, function(key, value) {
markup += '<tr> <td><input class="checkBoxes" type="checkbox" name="checkBoxArray[]"></td> <td><input type="hidden" value="'+value.id+'" name="id[]">' + value.id + '</td> <td><input type="hidden" value="'+value.student_id+'" name="student_id[]">' + value.student_id + '</td> <td><input type="hidden" value="'+value.first_name+'" name="first_name[]"><input type="hidden" value="'+value.last_name+'" name="last_name[]">' + value.first_name+ ' ' + value.last_name + '<td><input type="hidden" value="'+value.attendance+'" name="attendance[]">' + value.attendance + '</td>' + '<td><input type="hidden" value="'+value.created_at+'" name="created_at[]">' + value.created_at + '</td>' + '<td style=" width=12%" class="text-center"> <a><button title="Edit" class="btn btn-outline-primary"><span class="fas fa-pencil-alt"></span></button></a> </td>' + '</td> <tr>';
});
$('table[id="studentsData"]').html(markup);
}
});
}
});
});
//Controller
public function student_attendance_registers() {
$attendances = StudentsAttendance::all();
$classes = StudentsClass::pluck('class_name', 'id')->all();
return view('admin.students.attendance.student_attendance_registers', compact('attendances', 'classes'));
}
//Model
class StudentsAttendance extends Model
{
protected $fillable = [
'class_id',
'student_id',
'first_name',
'last_name',
'attendance'
];
public function studentsClass() {
return $this->belongsTo('App\StudentsClass');
}
public function getdateForHumansAttribute()
{
return $this->created_at->diffForHumans();
}
public function toArray()
{
$data = parent::toArray();
$data['diffForHumans'] = $this->diffForHumans;
return $data;
}
}

The best way to do this, would be to add a getdateForHumanAttribute method:
public function getdateForHumansAttribute()
{
return $this->created_at->diffForHumans();
}
Then on your model you can use anywhere:
$model->dateForHumans;
For an easy way to always add dateForHumans attribute when you retrieve this model, add it to toArray method:
(Also on your model)
public function toArray()
{
$data = parent::toArray();
$data['diffForHumans'] = $this->diffForHumans;
return $data;
}

Issue in populating dynamic data to dropdown column using ajax

I am trying to populate and append a column For Example:Id with the below column data dynamically using jquery and ajax.
The data will be populated via rest webservice. But the data is not getting populated.
The code snippet is as below.
The code which is pasted may not work properly due to lack of dynamic data from a webservice.
So the issue lies in populating/appending the data into the column in the header.
$(document).ready(function() {
// DO GET
$.ajax({
type: "GET",
url: "api/customer/all",
success: function(result) {
$.each(result, function(i, customer) {
var customerRow = "<tr><td><input type='checkbox' name='record'></td><td>" +
customer.id + "</td><td>" +
customer.name.toUpperCase() + "</td><td>" +
customer.age + "</td><td>" +
customer.address.street + "</td><td>" +
customer.address.postcode + "</td></tr>";
$('#IdProof').append('<option value="' + customer.id + '">' + customer.age + '</option>');
$('#customerTable tbody').append(customerRow);
});
},
error: function(e) {
alert("ERROR: ", e);
console.log("ERROR: ", e);
}
});
$('#select-all').click(function(event) {
if (this.checked) {
// Iterate each checkbox
$(':checkbox').each(function() {
this.checked = true;
});
} else {
$(':checkbox').each(function() {
this.checked = false;
});
}
});
$('#reboot').click(function() {
$('#customerTable').find('tr').each(function(i) {
var row = $(this);
if (row.find('input[type="checkbox"]').is(':checked')) {
var $tds = $(this).find('td'),
Id = $tds.eq(1).text(),
name = $tds.eq(2).text(),
age = $tds.eq(3).text();
// do something with productId, product, Quantity
alert('Row ' + (i + 1) + ':\nId: ' + Id +
'\nname: ' + name +
'\nage: ' + age);
}
});
});
$(function() {
$("#inputFilter").on("keyup", function() {
$("#select-all").hide();
var value = $(this).val().toLowerCase();
$("#customerTable > tbody > tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
})
<!DOCTYPE HTML>
<html>
<head>
<title>Spring Boot - DELETE-UPDATE AJAX Example</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="/js/jqueryScript.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="#{/css/main.css}" />
</head>
<body>
<div class="container">
<h2>Filter Table</h2>
<div class="row col-md-7 ">
<div style="margin-bottom: 20px; padding: 10px; background-color: green; color: white;">
<p>
Type some text to search the table for <strong>Id</strong>, <strong>Name</strong>,
<strong>Age</strong>, <strong>Street</strong>, <strong>PostCode</strong>:
</p>
<input class="form-control" id="inputFilter" type="text" placeholder="Search.." />
</div>
<table id="customerTable" class="table table-bordered table-hover table-responsive ">
<thead>
<tr>
<th><input type="checkbox" name="select-all" id="select-all" /></th>
<th>
<select name="IdProof" id="id" class="form-control">
<option value="">Id</option>
</select>
</th>
<th>
<select name="Name" id="name" class="form-control">
<option value="">Name</option>
</select>
</th>
<th>
<select name="Age" id="age" class="form-control">
<option value="">Age</option>
</select>
</th>
<th>
<select name="Street" id="street" class="form-control">
<option value="">Street</option>
</select>
</th>
<th>
<select name="Postcode" id="postcode" class="form-control">
<option value="">Postcode</option>
</select>
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<button id="reboot">Reboot</button>
<button id="logs">Logs</button>
</div>
</div>
</body>
</html>

Try to fix your code like this. I think problem is in your concatination. Make all the concatenations like these
var customerRow = "<tr><td><input type='checkbox' name='record'></td><td>" +
customer.id + "'</td><td>'" +
customer.name.toUpperCase() + "'</td><td>'" +
customer.age + "'</td><td>'" +
customer.address.street + "'</td><td>'" +
customer.address.postcode + "'</td></tr>'";

Jquery .on(change) event on <select> input only changes first row.

I have a table whereby people can add rows.
There is a select input in the table that when changed, changes the values in a second select field via ajax.
The problem I have is that if a person adds an additional row to the table, the .on(change) event alters the second field in the first row, not the subsequent row.
I've been racking my brain, trying to figure out if I need to (and if so how to) dynamically change the div id that the event binds to and the div that it affects. Is this the solution? If so, could someone please demonstrate how I'd achieve this?
The HTML form is
<form action="assets.php" method="post">
<button type="button" id="add">Add Row</button>
<button type="button" id="delete">Remove Row</button>
<table id="myassettable">
<tbody>
<tr>
<th>Asset Type</th>
<th>Manufacturer</th>
<th>Serial #</th>
<th>MAC Address</th>
<th>Description</th>
<th>Site</th>
<th>Location</th>
</tr>
<tr class="removable">
<!--<td><input type="text" placeholder="First Name" name="contact[0][contact_first]"></td>
<td><input type="text" placeholder="Surname" name="contact[0][contact_surname]"></td>-->
<td><select name="asset[0][type]">
<option><?php echo $typeoption ?></option>
</select></td>
<td><select class="manuf_name" name="asset[0][manuf]">
<option><?php echo $manufoption ?></option>
</select></td>
<td><input type="text" placeholder="Serial #" name="asset[0][serial_num]"></td>
<td><input type="text" placeholder="Mac Address" name="asset[0][mac_address]"></td>
<td><input type="text" placeholder="Name or Description" name="asset[0][description]"></td>
<td><select id="site" name="asset[0][site]">
<option><?php echo $siteoption ?></option>
</select></td>
<td><input type="text" placeholder="e.g Level 3 Utility Room" name="asset[0][location]"></td>
<td><select id="new_select" name="asset[0][contact]"></select></td>
<!--<td><input type="email" placeholder="Email" name="contact[0][email]"></td>
<td><input type="phone" placeholder="Phone No." name="contact[0][phone]"></td>
<td><input type="text" placeholder="Extension" name="contact[0][extension]"></td>
<td><input type="phone" placeholder="Mobile" name="contact[0][mobile]"></td>-->
</tr>
</tbody>
</table>
<input type="submit" value="Submit">
<input type="hidden" name="submitted" value="TRUE" />
</form>
The script I have is
<script type="text/javascript">
$(document).ready(function() {
$("#add").click(function() {
var newgroup = $('#myassettable tbody>tr:last');
newgroup
.clone(true)
.find("input").val("").end()
.insertAfter('#myassettable tbody>tr:last')
.find(':input')
.each(function(){
this.name = this.name.replace(/\[(\d+)\]/,
function(str,p1) {
return '[' + (parseInt(p1,10)+1)+ ']'
})
})
return false;
});
});
$(document).ready(function() {
$("#delete").click(function() {
var $last = $('#myassettable tbody').find('tr:last')
if ($last.is(':nth-child(2)')) {
alert('This is the only one')
} else {
$last.remove()
}
});
});
$(document).ready(function() {
$("#myassettable").on("change","#site",function(event) {
$.ajax ({
type : 'post',
url : 'assetprocess.php',
data: {
get_option : $(this).val()
},
success: function (response) {
document.getElementById("new_select").innerHTML=response;
}
})
});
});
</script>
and the assetprocess.php page is
<?php
if(isset($_POST['get_option'])) {
//Get the Site Contacts
$site = $_POST['get_option'];
$contact = "SELECT site_id, contact_id, AES_DECRYPT(contact_first,'" .$kresult."'),AES_DECRYPT(contact_surname,'" .$kresult."') FROM contact WHERE site_id = '$site' ORDER BY contact_surname ASC";
$contactq = mysqli_query($dbc,$contact) or trigger_error("Query: $contact\n<br />MySQL Error: " .mysqli_errno($dbc));
if ($contactq){
//$contactoption = '';
echo '<option>Select a Contact (Optional)</option>';
while ($contactrow = mysqli_fetch_assoc($contactq)) {
$contactid = $contactrow['contact_id'];
$contactfirst = $contactrow["AES_DECRYPT(contact_first,'" .$kresult."')"];
$contactsurname = $contactrow["AES_DECRYPT(contact_surname,'" .$kresult."')"];
$contactoption .= '<option value="'.$contactid.'">'.$contactsurname.', '.$contactfirst.'</option>';
echo $contactoption;
}
}
exit;
}
?>
The code is ugly as sin, but this is only a self-interest project at this stage.
Any assistance would be greatly appreciated.
Cheers,
J.

Working Example: https://jsfiddle.net/Twisty/1c98Ladh/3/
A few minor HTML changes:
<form action="assets.php" method="post">
<button type="button" id="add">Add Row</button>
<button type="button" id="delete">Remove Row</button>
<table id="myassettable">
<tbody>
<tr>
<th>Asset Type</th>
<th>Manufacturer</th>
<th>Serial #</th>
<th>MAC Address</th>
<th>Description</th>
<th>Site</th>
<th>Location</th>
</tr>
<tr class="removable">
<td>
<select name="asset[0][type]">
<option>---</option>
<option>Type Option</option>
</select>
</td>
<td>
<select class="manuf_name" name="asset[0][manuf]">
<option>---</option>
<option>
Manuf Option
</option>
</select>
</td>
<td>
<input type="text" placeholder="Serial #" name="asset[0][serial_num]">
</td>
<td>
<input type="text" placeholder="Mac Address" name="asset[0][mac_address]">
</td>
<td>
<input type="text" placeholder="Name or Description" name="asset[0][description]">
</td>
<td>
<select id="site-0" class="chooseSite" name="asset[0][site]">
<option>---</option>
<option>
Site Option
</option>
</select>
</td>
<td>
<input type="text" placeholder="e.g Level 3 Utility Room" name="asset[0][location]">
</td>
<td>
<select id="new-site-0" name="asset[0][contact]">
</select>
</td>
</tr>
</tbody>
</table>
<input type="submit" value="Submit">
<input type="hidden" name="submitted" value="TRUE" />
</form>
This prepares the id to be incrementd as we add on new elements. Making use of the class, we can bind a .change() to each of them.
$(document).ready(function() {
$("#add").click(function() {
var newgroup = $('#myassettable tbody>tr:last');
newgroup
.clone(true)
.find("input").val("").end()
.insertAfter('#myassettable tbody>tr:last')
.find(':input')
.each(function() {
this.name = this.name.replace(/\[(\d+)\]/,
function(str, p1) {
return '[' + (parseInt(p1, 10) + 1) + ']';
});
});
var lastId = parseInt(newgroup.find(".chooseSite").attr("id").substring(5), 10);
newId = lastId + 1;
$("#myassettable tbody>tr:last .chooseSite").attr("id", "site-" + newId);
$("#myassettable tbody>tr:last select[id='new-site-" + lastId + "']").attr("id", "new-site-" + newId);
return false;
});
$("#delete").click(function() {
var $last = $('#myassettable tbody').find('tr:last');
if ($last.is(':nth-child(2)')) {
alert('This is the only one');
} else {
$last.remove();
}
});
$(".chooseSite").change(function(event) {
console.log($(this).attr("id") + " changed to " + $(this).val());
var target = "new-" + $(this).attr('id');
/*$.ajax({
type: 'post',
url: 'assetprocess.php',
data: {
get_option: $(this).val()
},
success: function(response) {
$("#" + target).html(response);
}
});*/
var response = "<option>New</option>";
$("#" + target).html(response);
});
});
Can save some time by setting a counter in global space for the number of Rows, something like var trCount = 1; and use that to set array indexes and IDs. Cloning is fast and easy, but it also means we have to go back and append various attributes. Could also make a function to draw up the HTML for you. Like: https://jsfiddle.net/Twisty/1c98Ladh/10/
function cloneRow(n) {
if (n - 1 < 0) return false;
var html = "";
html += "<tr class='removable' data-row=" + n + ">";
html += "<td><select name='asset[" + n + "][type]' id='type-" + n + "'>";
html += $("#type-" + (n - 1)).html();
html += "<select></td>";
html += "<td><select name='asset[" + n + "][manuf]' id='manuf-" + n + "'>";
html += $("#manuf-" + (n - 1)).html();
html += "<select></td>";
html += "<td><input type='text' placeholder='Serial #' name='asset[" + n + "][serial_num]' id='serial-" + n + "' /></td>";
html += "<td><input type='text' placeholder='MAC Address' name='asset[" + n + "][mac_address]' id='mac-" + n + "' /></td>";
html += "<td><input type='text' placeholder='Name or Desc.' name='asset[" + n + "][description]' id='desc-" + n + "' /></td>";
html += "<td><select name='asset[" + n + "][site]' class='chooseSite' id='site-" + n + "'>";
html += $("#site-" + (n - 1)).html();
html += "<select></td>";
html += "<td><input type='text' placeholder='E.G. Level 3 Utility Room' name='asset[" + n + "][location]' id='loc-" + n + "' /></td>";
html += "<td><select name='asset[" + n + "][contact]' id='contact-" + n + "'><select></td>";
html += "</tr>";
return html;
}
It's more work up front, yet offers a lot more control of each part. And much easier to use later.

When tabout event get fire i want to add new row under current row .But combo box does not load?

Html code:
Below image describes my output.Please kindly some one help me to resolve this issue.
<table class="table table-striped table-bordered table-hover table-condensed tableSiteUser">
<thead>
<tr>
<th>#</th>
<th>SiteName</th>
<th>UserName</th>
<th>Channel</th>
<th>Action</th>
</tr>
</thead>
<tbody id="site-table-body">
<tr>
<td class="countsiteuser">1</td>
<td><select class="form-control" id="siteContainer"></select>
</td>
<td><input type="checkbox" value="user" id="checkboxbutton"><input type="text" class="and" disabled placeholder="Default"/></td>
<td><input type="text" class="form-control" placeholder="Enter the Channel"/></td>
<td><span class="form-control glyphicon glyphicon-trash"></span></td>
</tr>
</tbody>
</table>
JavaScript:
$('.tableSiteUser').on('keydown','td:nth-child(4)',function(e){
var keyCode=e.keyCode || e.which;
if(keyCode == 9){
serialUserSite++;
$('tbody#site-table-body').append('<tr>'
+'<td class="beer" contenteditable="false">'+serialUserSite+'</td>'
+'<td><select class="form-control" id="siteContainer">'
+'</select></td>'
+'<td><input type="checkbox" value="user" id="checkboxbutton"><input type="text" class="and" disabled placeholder="Default"/></td>'
+'<td><input type="text" class="form-control" placeholder="Enter the Channel"/></td>'
+'<td><span class="glyphicon glyphicon-trash form-control"></span></td>'
+'</tr>');
}
});
ajax code:
$.ajax({
url : "http://localhost:8080/IDNS_Rule_Configuration/idns/systemData/getAllSites",
type : "GET",
contactType : "application/json",
dataType : "json",
success : function(data){
for(var i=0;i<data.length;i++){
var dataId = data[i].siteId;
var dataArray = data[i].siteName;
$('#siteContainer').populate(dataId, dataArray);
}
}
});
populate jquery code:
$.fn.populate = function(dataId, dataArray) {
var $selectbox = $(this);
// check if eleme nt is of type select
if ($selectbox.is("select")) {
//for (var i = 0; i < dataId.length; i++) {
$selectbox.append('<option value="' + dataId
+ '" stream="' + dataId + '">'
+ dataArray + '</option>');
//}
}
};
This is my output ,site name combo box is loaded from db.In first row it works .At second row it does not work