I am building the system where there is a table with the anchor tag name original and copy in each row. Clicking on these anchor tag we can update into the database whether the item is original or copy using ajax. But i cannot hide the full row after one of the anchor tag is clicked.
I am using Laravel-8 to Develop at backend.
My view
<div class='container' style="margin-top:50px">
<div class="row">
<div class="input-group" style="margin:20px">
<form >
<table style="float:right">
<th>
<div class="form-outline">
<input type="search" id="form1" class="form-control" placeholder="Search" /></th>
<th><button type="button" class="btn btn-success" >
<i class="fas fa-search"></i>
</button></th>
</form>
</div>
<div class="table-responsive">
<table class="table custom-table">
<thead>
<tr>
<th scope="col">
<label class="control control--checkbox">
<input type="checkbox" class="js-check-all"/>
<div class="control__indicator"></div>
</label>
</th>
<th scope="col" >S.N</th>
<th scope="col">LC NO</th>
<th scope="col">Applicant</th>
<th scope="col">Doc Value</th>
<th scope="col">Doc Received date</th>
<th scope="col">LC Type</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<?php $number = 1;?>
#foreach($datas as $items)
<tr>
<th scope="row" style="padding:20px">
<label class="control control--checkbox">
<input type="checkbox"/>
<div class="control__indicator"></div>
</label>
</th>
<td>{{$number}}</td>
<td>{{$items->lc_no}}</td>
<td>{{$items->applicant}}</td>
<td>{{$items->doc_value}}</td>
<td>{{$items->rec_date}}</td>
<td>{{$items->sight_usance}}</td>
<td>Original</td>
<td>Copy</td>
</tr>
<?php $number++; ?>
#endforeach
</tbody>
</table>
</div>
</div>
</div>
Here is my jquery ajax function
$(".original").on('click', function(){
var id=$(this).attr('data-id');
$.ajax
({
type: "GET",
url: "orgupdate/"+id,
success: function(response)
{
alert(response);
}
});
});
Within the event handler this is the element the event occurred on. From that element use closest() to get a reference for the row.
$(".original").on('click', function() {
// reference closest row
var $row = $(this).closest('tr')
var id = $(this).attr('data-id');
$.ajax({
type: "GET",
url: "orgupdate/" + id,
success: function(response) {
alert(response);
// after verify response value remove the row
$row.remove()
}
});
});
Related
I have table in HTML form, and I want to get the value of <td> for that special row input,
<table class="table table-bordered">
<thead>
<tr>
<th class="font-weight-bold" style="width: 10%">ID</th>
<th class="text-left font-weight-bold" style="width: 20%">Invoice No.</th>
<th class="text-left font-weight-bold" style="width: 20%">Amount</th>
<th class="text-left font-weight-bold" style="width: 15%">Unpaid</th>
<th class="text-left font-weight-bold" style="width: 25%">Payment</th>
</tr>
</thead>
<tbody>
#foreach ( $invoices as $i )
<tr>
<td>
{{ $i->invoice_id }}
</td>
<td>
{{ $i->invoice_number }}
</td>
<td>
{{ $i->invoice_amount }}
</td>
<td>
{{ $i->pending_amount }}
</td>
<td>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
{{ $currencySymbol }}
</span></a>
</div>
<input type="text" class="form-control payment_amount" name="payment_amount_invoice[]" id="payment_amount_invoice" value=""/>
</div>
</td>
</tr>
#endforeach
</tbody>
</table>
here is js...
jQuery.ajax({
type: "POST",
url: '/sales/payments/save',
data: $("#paymentForm").serialize(),
success: function(data)
{....
How can I get invoice_id for that specific input of payment_amount_invoice?
Thank you,
So here is way,
Added hidden input field as invoice_id and used same array for checking in server-side,
<td>
{{ $i->invoice_id }}
<input type="hidden" name="invoice_id[]" value="{{ $i->invoice_id }}">
</td>
I re-wrote the HTML part of your script to replace the laravel templating with a short JavaScript script.
After the user clicks the "save" button the important stuff happens here:
Object.values(frm)
.map(e=> ({id:e.closest("tr").children[0].innerText, amnt:e.value}) )
The input objects of form frm are put into an array and are then processed through a .map() call: the id for each input is taken from the .textContent of the first <td> in the current line and the amnt is taken from the input element's .value.
const tb=document.querySelector("tbody"), currencySymbol="€",
na="invoice_id,invoice_number,invoice_amount,pending_amount".split(","),
data=[[101,202101,200,200],[102,202103,50,50],[103,202104,300,100],
[104,202107,123,123],[105,202108,20,0],[106,202109,93,43]];
data.forEach((e,i,ar)=>ar[i]=(e.reduce((a,c,j)=>(a[na[j]]=c,a),{} )));
tb.innerHTML=data.map(i=>
`<tr><td>${i.invoice_id}</td>
<td>${i.invoice_number}</td>
<td>${i.invoice_amount}</td>
<td>${i.pending_amount}</td>
<td><label><input type="text" name="payment_amount_invoice[]"
value="${i.pending_amount}"/>${currencySymbol}</label></td>
</tr>`).join("\n");
console.log(data); // show the data array
document.querySelector("button").onclick=ev=>
// show data for AJAX post:
console.log(Object.values(frm).map(e=>
({id:e.closest("tr").children[0].innerText, amnt:e.value})
));
td,th {text-align:right}
input[type=text] {width:50px}
<form name="frm"><table class="table table-bordered">
<thead><tr>
<th style="width: 10%">ID</th>
<th style="width: 20%">Invoice No.</th>
<th style="width: 20%">Amount</th>
<th style="width: 15%">Unpaid</th>
<th style="width: 25%">Payment</th>
</tr></thead>
<tbody></tbody>
</table></form><button>save</button>
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")
I have list of parameters along with checkboxs where i can search and select required parameters in table.Now i want to set values for selected parameters.For this i have created textfields(Parameters name,Datatype,Set Value) in table format.When i select check box in parameters table,textfields in table should be created with selected parameters . when i deselect checkbox textfields should removed. For instance if i select one parameter "TestingDevice" from parameters table,Textfields should be created value with "TestingDevice" and other DataType and Set value should be manually entered by user. Below the code i am using.
List Of Parameters
<div class="tab-content">
<div id="Device_B" class="tab-pane fade in active">
<div class="col-md-12">
<div class="col-md-6" style="overflow: auto">
<br>
<input type="text" class="form-control" id="customGroupAddParamInput" onkeyup="addParameterTableSearchFunction()" placeholder="Search 🔍 :">
<br>
<h4>All Parameters</h4>
<div class="span5 border-0" style="overflow: auto">
<table id="customGroupAddParamTable" class="table table-bordered">
<thead>
<tr class="info">
<th style="width: 10px;">
<input type="checkbox" id="check_selectall_custom_B[]" onclick="selectAllCustom(this)"/>SA</th>
<th>Parameter Name</th>
</tr>
</thead>
<tbody class="parameter_table">
<% #all_br_parameters.each do |parameter| %>
<tr id="tr_rb_<%=parameter['id'] %>">
<td>
<input type="checkbox" class="checkBox" name="checkBox_custom_B[]" onchange="clickedParamBox(this.name)">
</td>
<td style="word-break:break-all;">
<%= parameter['parameter_name']%>
</td>
</tr>
<% end %>
</tbody>
</table>
</div>
</div>
Table For Textfield
<div class="tab-content" >
<div id="protocol" class="tab-pane fade in active">
<div class="span3 border-0" style="overflow: scroll">
<table id="addParamTable" class="table table-bordered">
<thead>
<tr class="info">
<th>Parameter Name</th>
<th>Data Type</th>
<th>Expected Set Value</th>
</tr>
</thead>
<tbody class="parameter_table">
<tr>
<td>
<input type="text" id="parameterName" class="parameterName" name="parameter_name">
</td>
<td>
<input type="text" class="parameterDscription" name="parameter_description">
</td>
<td>
<input type="text" class="expectedValue" name="expected_value">
</td>
</tr>
</tbody>
</table>
Try this out: It's how I'd handle it.
$(document).ready(function() {
window.addEventListener('load', (event) => {
checkbox = document.getElementById("checkbox_to_be_evaluated");
textbox = document.getElementById("textbox_to_be_displayed_or_hidden");
evaluateCheckbox(checkbox, textbox);
});
$(checkbox).click(function(){
evaluateCheckbox(checkbox, textbox)
});
function evaluateCheckbox(checkbox, textbox) {
//take in element of checkbox
if(checkbox.checked){
textbox.style.display = "block";
}else {
textbox.style.display = "none";
}
//handle accordingly
};
});
I have a table with a table head and and empty body:
<table id ="floodTable" class ="gradient-style">
<thead>
<tr>
<th>Event Name</th>
<th>Date</th>
<th style="text-align:right">Return Period</th>
</tr>
</thead>
<tbody>
...//add stuff here...
</tbody>
</table>
I have an API that brings in a JSON object. If one of the sub-objects meets a certain criteria, I want to use the attribute values to populate the new row with values for
"Event Name" (document.getElementById("floodTable").rows[0].cells[1]),
"Date" (document.getElementById("floodTable").rows[0].cells[2]), and
"Return Period" (document.getElementById("floodTable").rows[0].cells[3])
Using that my API may pull back multiple items that meet my criteria, I will probably have to create several rows. How can I use insertRow(0) and/or insertCell(0) to do this?
You can use HTMLTableElement.insertRow() and HTMLTableRowElement.insertCell() methods to achieve this:
const form = document.querySelector('form');
form.addEventListener('submit', event => {
event.preventDefault();
event.stopPropagation();
const values = Object.values(form.elements).filter(el => el.id).map(el => el.value);
if (values.length === 3) {
const table = document.querySelector('#floodTable tbody');
const row = table.insertRow(0);
values.forEach((val, ind) => {
row.insertCell(ind).innerHTML = val;
});
form.reset();
window.location.href = '#floodTable';
}
}, false);
html {
scroll-behavior: smooth;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
rel="stylesheet"/>
<div class="container">
<table id="floodTable" class="table gradient-style">
<thead>
<tr>
<th>Event Name</th>
<th>Date</th>
<th style="text-align:right">Return Period</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div class="card">
<form class="card-body">
<div class="form-group">
<label for="event">Event name:</label>
<input type="text" class="form-control" id="event" required>
</div>
<div class="form-group">
<label for="date">Date:</label>
<input type="date" class="form-control" id="date" required>
</div>
<div class="form-group">
<label for="period">Return period:</label>
<input type="text" class="form-control" id="period" required>
</div>
<button type="submit" class="btn btn-primary">Add a row</button>
</form>
</div>
</div>
I take data of two inputs to another page through ajax. I used these two values in the query and shown the result of the select query in a data table which is return back to success function and shown in the table on the main page.
After that, I want to use a condition that data with "." (accounting->subaccounts) hide unless He clicks a button.
I just need an idea to hide it I can do more. let me show you my code.
This is the button:
<input type="button" id="generate" onclick="getData();" value="Generate"
class="btn btn-block btn-primary btn-sm" />
The div where i shown the table:
<div class="col-lg-12 col-sm-12 col-xs-12 col-md-12" id="tab"></div>
the ajax function:
function getData() {
var date = $("#date").val();
var classId = $("#class").val();
$.ajax({
url: "ajax/getTrailBalanceData.php",
type: "POST",
data: {
"date": date,
"classId": classId,
},
cache: false,
async: false,
success: function (data) {
//alert(data);
$("#tab").html(data);
var row_main_code = $("#main_code").val();
if (row_main_code.indexOf(".") > -1) {
// $("#tbl_row").addClass("hide");
} else {
// $("#tbl_row").removeClass("hide");
// $("#main_code").parents("tr").hide();
// $("#tbl_row").addClass("hide");
// $("#main_code").val("hide");
}
}
});
}
The if(rowmaincode.indexof('.')>-1) condition in "success" I tried but not give desirable result I am confused I don't know why but let me show you the other page code:
<table id="trail_balance_list" class="table table-bordered table-condensed bootstrap-datatable datatable responsive">
<thead id="table_head">
<tr class="bg-success">
<th class=" text-center">Code</th>
<th class=" text-center">Account Title</th>
<th class=" text-center" >Debit</th>
<th class=" text-center" >Credit</th>
<th class=" text-center" >Action</th>
</tr>
</thead>
<tbody>
<?php
while ($row = mysqli_fetch_assoc($result)) {
?>
<tr id="tbl_row" class="">
<td><?php echo $row['main_code']; ?><input type="hidden" id="main_code" value="<?php echo $row['main_code']; ?>" /></td>
<td><?php echo $row['account_title']; ?></td>
<td></td>
<td></td>
<td class="text-center"><button class="btn btn-info"><i class="fa fa-arrow-down"></i></button></td>
</tr>
<?php
}
?>
</tbody>
<tfoot>
<tr>
<th><input type="hidden" id="total_credit_input" name="total_credit" value="0" /></th>
<th><input type="hidden" id="total_debit_input" name="total_debit" value="0" /></th>
<td class="bg-warning text-center" id="total_debit">0.00</td>
<td class="bg-warning text-center" id="total_credit" >0.00</td>
</tr>
</tfoot>
</table>
<script>
$(document).ready(function () {
$("#trail_balance_list").dataTable();
});
</script>
the result I get is like : (see image), I want to show only like 1,2,3,4
You have implement a similar idea in your code, hope you can do that. I have added a sample below.
$('body').on('click', '#act_button', function() {
$('#trail_balance_list > tbody > tr').each(function() {
if ($(this).find('td:first').text().indexOf('.') >= 0) {
$(this).hide();
} else {
$(this).show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="act_button">hide decimal rows</button>
<table id="trail_balance_list" border="1">
<tbody>
<tr>
<td>1</td>
<td>222</td>
</tr>
<tr>
<td>33.3</td>
<td>444</td>
</tr>
<tr>
<td>555</td>
<td>666</td>
</tr>
<tr>
<td>77</td>
<td>666</td>
</tr>
</tbody>
</table>