I am working on a project and have an idea but not sure how to accomplish (new to PHP/JS).
Basically, I have a table within a form with one row being a checkbox. I would like to check the box(es) and when the form is submitted it sends the values of each column in the selected rows.
For example:
1 - Domain | MatchedTo | Percentage | Checkbox
2 - Domain | MatchedTo | Percentage | Checkbox
If row 1 is checked I would like the submit to POST the domain, matchedto and percentage values.
Here is what I have so far:
<script type="text/javascript">
$('#test-form').submit(function(event) {
event.preventDefault();
var buttonAction = event.originalEvent.explicitOriginalTarget.value;
var formData = $(this).serialize();
var varData = formData + "&action=" + buttonAction;
$.ajax({
type: 'POST',
url: 'test_submit.php',
data: varData,
success: function() {
window.location.reload(true);
console.log("Form posted successfully.", varData);
}
})
});
</script>
<form method="POST" id="test-form">
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
<thead>
<tr>
<th>Ratio</th>
<th>Domain</th>
<th>Matched</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr id="6" role="row" class="odd">
<td>50</td>
<td class="sorting_1">www.test.com</td>
<td class="sorting_1">anothertest2.com</td>
<td><button type="button" class="btn btn-danger del_domain" domain="www.test.com">Remove</button>
<button type="button" class="btn btn-primary update_domain" domain="www.test.com" matchedto="anothertest2.com">Keep</button>
<input name="domain[]" value="www.test.com" type="checkbox"></td>
</tr>
<tr id="6" role="row" class="odd">
<td>50</td>
<td class="sorting_1">www.test2.com</td>
<td class="sorting_1">anothertest2.com</td>
<td><button type="button" class="btn btn-danger del_domain" domain="www.test2.com">Remove</button>
<button type="button" class="btn btn-primary update_domain" domain="www.test.com" matchedto="anothertest2.com">Keep</button>
<input name="domain[]" value="www.test2.com" type="checkbox"></td>
</tr>
</tbody>
</table>
<button class="btn btn-success" type="submit" value="save"><span class="fa fa-arrow-right">Save Selected</span></button>
<button class="btn btn-danger" type="submit" value="delete"><span class="fa fa-times">Delete Selected</span></button>
<button class="btn btn-warning" type="reset" value="reset"><span class="fa fa-times">Clear Selected</span></button>
</form>
I am assuming I need to create an input field for each column? How do I go about POSTing all of these fields when a box is checked?
Thank you for any assistance.
If you're going to submit via ajax, you'll probably want to create the string you'll be submitting. Something like the following may be a starting-point, if I understand what you're trying to do.
Note that this doesn't address actually sending the data, it's simply about how to hijack the form and create the format you're looking for.
// First, I'm stopping the default behaviors
$("button").on("click", function(event){
event.stopPropagation();
event.preventDefault();
})
// Now, when we click save, I want to format
// a string.
$("button[value='save']").on("click", function(){
var returnString = "";
// The following selector gets all the rows
// that have a CHECKED checkbox. Note I
// don't get the checkbox, simply the row.
var rowEls = $("#test-form").find("tr:has(input[type='checkbox']:checked) ");
// For every row, we'll add to our string...
rowEls.each(function(){
var rowEl = $(this);
// First, a row id
returnString += rowEl.attr("id")+" - ";
var cells = rowEl.children("td");
// Next the contents of each cell THAT
// HAS A data-content ATTRIBUTE. This
// way, we don't get the remove/keep.
cells.each(function(){
if($(this).data("content")){
returnString += $(this).data("content")+"="+$(this).text();
if($(this).not(":last"))
returnString += " | ";
}
})
returnString += " ";
})
console.log(returnString);
})
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST" id="test-form">
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
<thead>
<tr>
<th>Ratio</th>
<th>Domain</th>
<th>Matched</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr id="6" role="row" class="odd">
<td data-content="ratio">50</td>
<td class="sorting_1" data-content="domain">www.test.com</td>
<td class="sorting_1" data-content="matched">anothertest2.com</td>
<td><button type="button" class="btn btn-danger del_domain" domain="www.test.com">Remove</button>
<button type="button" class="btn btn-primary update_domain" domain="www.test.com" matchedto="anothertest2.com">Keep</button>
<input name="domain[]" value="www.test.com" type="checkbox"></td>
</tr>
<tr id="6" role="row" class="odd">
<td data-content="ratio">50</td>
<td class="sorting_1" data-content="domain">www.test2.com</td>
<td class="sorting_1" data-content="matched">anothertest2.com</td>
<td><button type="button" class="btn btn-danger del_domain" domain="www.test2.com">Remove</button>
<button type="button" class="btn btn-primary update_domain" domain="www.test.com" matchedto="anothertest2.com">Keep</button>
<input name="domain[]" value="www.test2.com" type="checkbox"></td>
</tr>
</tbody>
</table>
<button class="btn btn-success" type="submit" value="save"><span class="fa fa-arrow-right">Save Selected</span></button>
<button class="btn btn-danger" type="submit" value="delete" disabled><span class="fa fa-times">Delete Selected</span></button>
<button class="btn btn-warning" type="reset" value="reset" disabled><span class="fa fa-times">Clear Selected</span></button>
</form>
Related
I am trying to get id of a selected row in a table.
The rows are generated based on number of objects in foodList (JSP page).
JSP Code
<tbody>
<c:forEach items="${foodList}" var="det">
<tr class="clickable-row">
<td class="pt-0 pb-0"><button id="${det.b_No}" style="font-size:8px" class="btn btn-danger delete btn-sm pt-1 pb-1 mb-0" data-title="Delete"></button></td>
<td><input type="text" class="form-control" value="${det.wt}" /></td>
</c:forEach>
</tr>
</c:forEach>
</tbody>
JavaScript Code
$('#table_id').on('click', '.clickable-row', function(event) {
alert($(this).find(".pt-0").html());
alert($(this).find(".pt-0").attr("id"));
});
First alert is displaying the text as follows which is as expected,
<button id="1015" style="font-size:8px" class="btn btn-danger delete btn-sm pt-1 pb-1 mb-0" data-title="Delete"></button>
But for the second alert I am expecting the id (1015) but showing as "undefined".
the id is in button element so use :
alert($(this).find(".pt-0").find("button").attr("id"));
or simply direct access
alert($(this).find(".pt-0 button").attr("id"));
See below snippet :
$('#table').on('click', '.clickable-row', function(event) {
alert($(this).find(".pt-0").html());
alert($(this).find(".pt-0 button").attr("id"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table">
<tr class="clickable-row">
<td class="pt-0 pb-0"><button id="1508" style="font-size:8px" class="btn btn-danger delete btn-sm pt-1 pb-1 mb-0" data-title="Delete">del</button></td>
</tr>
</table>
I have created with JQuery a table where I can add a certain text by pressing a button.
As you can see Product 2 and Product 3 can only be added once. Product 4 can be added several times. All text that is inserted can also be deleted by pressing the x-button.
$(".btn.btn-primary.btn-sm").on("click", this.ourClickDispatcher.bind(this))
$("#tableProd").on("click", ".btn.btn-danger.btn-sm.deleteMe", this.deleteRow.bind(this))
function deleteRow(e) {
let deleteBtn = $(e.target).closest(".deleteMe");
deleteBtn.closest('tr').remove()
}
function ourClickDispatcher(e) {
let targetButton = $(e.target).closest(".btn.btn-primary.btn-sm")
let targetButtonParent = targetButton[0].parentElement.parentElement
targetButtonParent.insertAdjacentHTML('afterend', `
<tr>
<td></td>
<td>
<img src="" alt="" height="42" width="42">
<a href="">
Test Product2
</a>
</td>
<td class="deleteMe">
<button type="button" class="btn btn-danger btn-sm deleteMe">x</button>
</td>
</tr>
`)
if (targetButton.hasClass('product3') || targetButton.hasClass('product2')) {
targetButton.attr("disabled", true);
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableProd" style="float: left;" class="table table-bordered">
<tbody>
<tr>
<td>Product 2</td>
<td>
<button type="button" data-exists="product2" class="btn btn-primary btn-sm product2">
Add Product 2
</button>
</td>
</tr>
<tr>
<td>Product 3</td>
<td>
<button type="button" data-exists="product3" class="btn btn-primary btn-sm product3">
Add Product 3
</button>
</td>
</tr>
<tr>
<td>Product 4</td>
<td>
<button type="button" data-exists="product4" class="btn btn-primary btn-sm product4">
Add Product 4
</td>
</tr>
</tbody>
</table>
My problem is that if I delete all rows below a disabled button I cannot add any new rows again. This case is shown in the picture below:
Any suggestions how to enable the button if all rows below have been deleted?
I appreciate your replies!
I added you one new function to your javascript
function enableButton(elemId) {
console.log(document.getElementById(elemId));
if (!document.getElementById(elemId)) {
var str = elemId.split('_');
var button = $('#'+str[1]);
$('#'+str[1]).removeAttr('disabled');
}
}
and i also set ids on your html buttons
$(".btn.btn-primary.btn-sm").on("click", this.ourClickDispatcher.bind(this))
$("#tableProd").on("click", ".btn.btn-danger.btn-sm.deleteMe", this.deleteRow.bind(this))
function deleteRow(e) {
let deleteBtn = $(e.target).closest(".deleteMe");
let itemId = e.target.getAttribute('id');
deleteBtn.closest('tr').remove();
enableButton(itemId);
}
function enableButton(elemId) {
if (!document.getElementById(elemId)) {
var str = elemId.split('_');
var button = $('#'+str[1]);
$('#'+str[1]).removeAttr('disabled');
}
}
function ourClickDispatcher(e) {
let targetButton = $(e.target).closest(".btn.btn-primary.btn-sm");
let targetButtonParent = targetButton[0].parentElement.parentElement;
var elemId = 'item_'+e.target.getAttribute('id');
targetButtonParent.insertAdjacentHTML('afterend', `
<tr>
<td></td>
<td>
<img src="" alt="" height="42" width="42">
<a href="">
Test Product2
</a>
</td>
<td class="deleteMe">
<button id='`+elemId+`' type="button" class="btn btn-danger btn-sm deleteMe">x</button>
</td>
</tr>
`)
if (targetButton.hasClass('product3') || targetButton.hasClass('product2')) {
targetButton.attr("disabled", true);
}
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableProd" style="float: left;" class="table table-bordered">
<tbody>
<tr>
<td>Product 2</td>
<td>
<button type="button" id='btn2' data-exists="product2" class="btn btn-primary btn-sm product2">
Add Product 2
</button>
</td>
</tr>
<tr>
<td>Product 3</td>
<td>
<button type="button" id='btn3' data-exists="product3" class="btn btn-primary btn-sm product3">
Add Product 3
</button>
</td>
</tr>
<tr>
<td>Product 4</td>
<td>
<button type="button" id='btn4' data-exists="product4" class="btn btn-primary btn-sm product4">
Add Product 4
</button>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Just add $(".btn.btn-primary.btn-sm").attr("disabled", false); at the end of deleteRow method.
$(".btn.btn-primary.btn-sm").on("click", this.ourClickDispatcher.bind(this))
$("#tableProd").on("click", ".btn.btn-danger.btn-sm.deleteMe", this.deleteRow.bind(this))
function deleteRow(e) {
let deleteBtn = $(e.target).closest(".deleteMe");
deleteBtn.closest('tr').remove();
$(".btn.btn-primary.btn-sm").attr("disabled", false);
}
function ourClickDispatcher(e) {
let targetButton = $(e.target).closest(".btn.btn-primary.btn-sm")
let targetButtonParent = targetButton[0].parentElement.parentElement
targetButtonParent.insertAdjacentHTML('afterend', `
<tr>
<td></td>
<td>
<img src="" alt="" height="42" width="42">
<a href="">
Test Product2
</a>
</td>
<td class="deleteMe">
<button type="button" class="btn btn-danger btn-sm deleteMe">x</button>
</td>
</tr>
`)
if (targetButton.hasClass('product3') || targetButton.hasClass('product2')) {
targetButton.attr("disabled", true);
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableProd" style="float: left;" class="table table-bordered">
<tbody>
<tr>
<td>Product 2</td>
<td>
<button type="button" data-exists="product2" class="btn btn-primary btn-sm product2">
Add Product 2
</button>
</td>
</tr>
<tr>
<td>Product 3</td>
<td>
<button type="button" data-exists="product3" class="btn btn-primary btn-sm product3">
Add Product 3
</button>
</td>
</tr>
<tr>
<td>Product 4</td>
<td>
<button type="button" data-exists="product4" class="btn btn-primary btn-sm product4">
Add Product 4
</td>
</tr>
</tbody>
</table>
I am looking for a way to insert an element directly below a row. My table should look like the following:
As you can see the following element is inserted below my row:
<tr>
<td></td>
<td>
<button type="button" data-exists="product2" class="btn btn-primary btn-sm product2">
Add Product2
</button>
</td>
</tr>
Below you can find my viable example:
$(".btn.btn-dark.btn-sm").on("click", this.clickDispatcherTable.bind(this))
function clickDispatcherTable(e) {
let plusButton = $(e.target).closest(".btn.btn-dark.btn-sm")
if (plusButton.hasClass("product2")) {
let plusButtonParent = plusButton[0].parentElement
plusButtonParent.insertAdjacentHTML('beforebegin', `
<tr>
<td></td>
<td>
<button type="button" data-exists="product2" class="btn btn-primary btn-sm product2">
Add Product2
</button>
</td>
</tr>
`)
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="float: left;" class="table table-bordered">
<tbody>
<tr>
<td>Product 1</td>
<td>
<button type="button" data-exists="cpu" class="btn btn-primary btn-sm product1">
Add Product1
</button>
</td>
</tr>
<tr>
<td>Product 2</td>
<td>
<button type="button" data-exists="product2" class="btn btn-primary btn-sm product2">
Add Product2
</button>
<button type="button" class="btn btn-dark btn-sm product2">+</button>
</td>
</tr>
<tr>
<td>Product3</td>
<td>
<button type="button" data-exists="product3" class="btn btn-primary btn-sm product3">
Add Product 3
</button>
<button type="button" class="btn btn-dark btn-sm product3">+</button>
</td>
</tr>
</tbody>
</table>
As you can see the element is inserted on the side and not at the bottom.
Any suggestions how to insert the element below the row?
I appreciate your replies!
It is an issue with your Javascript. You were close!
This is the problematic line:
let plusButtonParent = plusButton[0].parentElement;
You are accessing the <td> element. So inserting a <tr> before the <td> starts would result in something like this:
<tr>
<tr> <!-- this code is added -->
<td>...</td> <!-- this code is added -->
</tr> <!-- this code is added -->
<td>...</td>
</tr>
That's clearly not what you want. So target the parent <tr> instead, and problem solved.
let plusButtonParent = plusButton[0].parentElement.parentElement;
And you will probably want to keep the Product 2 at the top like in your example. Easy, just change beforebegin to afterend.
$(".btn.btn-dark.btn-sm").on("click", this.clickDispatcherTable.bind(this))
function clickDispatcherTable(e) {
let plusButton = $(e.target).closest(".btn.btn-dark.btn-sm")
if (plusButton.hasClass("product2")) {
let plusButtonParent = plusButton[0].parentElement.parentElement;
plusButtonParent.insertAdjacentHTML('afterend', `
<tr>
<td></td>
<td>
<button type="button" data-exists="product2" class="btn btn-primary btn-sm product2">
Add Product2
</button>
</td>
</tr>
`)
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="float: left;" class="table table-bordered">
<tbody>
<tr>
<td>Product 1</td>
<td>
<button type="button" data-exists="cpu" class="btn btn-primary btn-sm product1">
Add Product1
</button>
</td>
</tr>
<tr>
<td>Product 2</td>
<td>
<button type="button" data-exists="product2" class="btn btn-primary btn-sm product2">
Add Product2
</button>
<button type="button" class="btn btn-dark btn-sm product2">+</button>
</td>
</tr>
<tr>
<td>Product3</td>
<td>
<button type="button" data-exists="product3" class="btn btn-primary btn-sm product3">
Add Product 3
</button>
<button type="button" class="btn btn-dark btn-sm product3">+</button>
</td>
</tr>
</tbody>
</table>
I am trying to create a repeater field within my table.
Basically I want the following behavior:
If no "Test Product2" has been added to the table, the user cannot add another field below.
If a "Test Product2" has been added to the table, the user is allowed to add a field below and can add another "Test Product2" next to the new blue button.
The below an example of the second case for the behaviour.
$(".btn.btn-dark.btn-sm.product2").on("click", this.clickDispatcherTable.bind(this))
//$(".btn.btn-primary.btn-sm").on("click", this.ourClickDispatcher.bind(this));
$("#miningTable").on("click", ".btn.btn-primary.btn-sm.product2", this.ourClickDispatcher.bind(this));
function clickDispatcherTable(e) {
let plusButton = $(e.target).closest(".btn.btn-dark.btn-sm")
if (plusButton.hasClass("product2")) {
let plusButtonParent = plusButton[0].parentElement.parentElement;
plusButtonParent.insertAdjacentHTML('afterend', `
<tr>
<td></td>
<td>
<button type="button" data-exists="product2" class="btn btn-primary btn-sm product2">
Add Product2
</button>
</td>
</tr>
`)
}
}
function ourClickDispatcher(e) {
let targetButton = $(".btn.btn-primary.btn-sm.product2")
let targetButtonParent = targetButton[0].parentElement
targetButtonParent.insertAdjacentHTML('beforebegin', `
<td>
<img src="" alt="" height="42" width="42">
<a href="">
Test Product2
</a>
</td>
`)
targetButton.attr('class', 'btn btn-danger btn-sm product2'); // change button class to red
targetButton.text(function() {
return $(this).text().replace("Add", "Edit");
});
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="miningTable" style="float: left;" class="table table-bordered">
<tbody>
<tr>
<td>Product 2</td>
<td>
<button type="button" data-exists="product2" class="btn btn-primary btn-sm product2">
Add Product2
</button>
<button type="button" class="btn btn-dark btn-sm product2">+</button>
</td>
</tr>
<tr>
<td>Product 3</td>
<td>
<button type="button" data-exists="product3" class="btn btn-primary btn-sm product3">
Add Product3
</button>
</td>
</tr>
<tr>
<td>Product 4</td>
<td>
<button type="button" data-exists="product4" class="btn btn-primary btn-sm product4">
Add Product4
</td>
</tr>
</tbody>
</table>
As you can see in the above example a user can add multiple fields as he want. There is currently no restriction.
Any suggestions how to restrict the user for adding a field if a condition is not satisfied?
I appreciate your reply!
If I correctly understand your problem, think this is your answer
function clickDispatcherTable(e) {
let plusButton = $(e.target).closest(".btn.btn-dark.btn-sm")
let sw = true;
$( "tbody tr" ).each(function(index, row) {
if(row.children.length != 3) {
sw = false;
}
});
if (sw) {
$('tbody tr:last').after(`
<tr>
<td></td>
<td>
<button type="button" data-exists="product2" class="btn btn-primary btn-sm product2">
Add Product2
</button>
</td>
</tr>`)
}
}
I want to change a row from a table to another but I want to replace the addBtn for a removeBtn.
dataTableTeamMembers is the other table
$('.addBtn').click(function() {
var row = $(this).closest('tr');
console.log(row[1]);
$('#dataTableTeamMembers tbody').append(row);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr class="text-center hover-table odd" role="row">
<td class="sorting_1"><img class="avatarImage" src="data:image/jpg;base64,iVBORw"></td>
<td>johns</td>
<td>John Smith</td>
<td>Member</td>
<td>
<button type="button" class="btn btn-primary addBtn"> Add</button>
</td>
</tr>
update your js code with this.
$('.addBtn').click(function () {
var row = $(this).closest('tr');
console.log(row[0]);
$('#dataTableTeamMembers tbody').append(row[0].innerHTML);
});
$('.addBtn').click(function() {
var row = $(".tbl .tbltr").html();
console.log(row[1]);
$('.tbl').append(row);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class='tbl'>
<tr class="text-center hover-table odd tbltr" role="row">
<td class="sorting_1"><img class="avatarImage" src="data:image/jpg;base64,iVBORw"></td>
<td>johns</td>
<td>John Smith</td>
<td>Member</td>
<td>
<button type="button" class="btn btn-primary addBtn"> Add</button>
</td>
</tr>
</table>