Develop Reference

Jquery - Limit insertion of an element

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>`)
}
}

PHP Form/Table - Sending row contents when checked

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>

Delete td of table htm with jquery

hi guys i have a question, i need remove a td of table, the td has a id and i try with remove(), but doesnt work this is my code in js
$('.btnEliminarLicencia').off('click');
$('.btnEliminarLicencia').on('click', function () {
$(this).parent().parent().remove();
var rlim=$('.btnEliminarRemoto').parent().parent().remove('#idLicenciaClienteR');
alert (rlim);
});
and i have two tables, in the first with the btnEliminarLicencia click remove the tr of table and in the second table delete also the td what is the first td of table , this is the code, i need delete the first table and a specific td
first table
<table class="table table-bordered tabla_licencia">
<thead>
<tr>
<th>Sucursal</th>
<th>Codigo (ID cliente)</th>
<th>Licencia</th>
<th>Caducidad</th>
<th>Estado</th>
<th style="width: 15%;"></th>
</tr>
</thead>
<tbody>
<tr>
<td data-id="318">13123</td>
<td id="id_Cliente">18865082</td>
<td>482947</td>
<td>2016-11-04</td>
<td>
<input type="checkbox" class="form-control" checked="" disabled="">
</td>
<td>
<button type="button" class="btn btn-info btnEditLicencia" style="float:right;">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-danger btnEliminarLicencia" style="float:left;">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
</td>
</tr>
</tbody>
second table
<table class="table table-bordered tabla_remoto">
<thead>
<tr>
<th>Licencia</th>
<th>Descripcion</th>
<th>Usuario</th>
<th>Clave</th>
<th style="width: 15%;"></th>
</tr>
</thead>
<tbody>
<tr>
<td id="idLicenciaClienteR">18865082</td>
<td>Caja</td>
<td>883792</td>
<td>nim3</td>
<td>
<button type="button" class="btn btn-info btnEditRemoto" style="float:right;">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-danger btnEliminarRemoto" style="float:left;">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
</td>
</tr>
</tbody>
in this case delete <td id='idLicenciaClienteR'>189992887</td>
as might do it, thanks

This might help you,
$('.btnEliminarLicencia').on('click', function () {
$('td#idLicenciaClienteR').remove();
});
Since id is unique in a page, you can dirctly use the id, no need to find with .parents().

Try something like this:
$('table td#id_Cliente').remove();
you can also define the class by putting .yourClass behind table

HTML Table - Track Selections for Form Submission

I've created a simple table using Bootstrap and PHP which looks like this:
<table class="table table-condensed table-striped table-bordered">
<thead>
<th scope="col">Name</th>
<th scope="col">Date</th>
<th scope="col">Select</th>
</thead>
<tbody>
<tr id="RFIT1000">
<td>Penny Lane</td>
<td>10/03/2015</td>
<td colspan="2">
<button type="button" class="btn btn-success btn-sm">Yes</button>
<button type="button" class="btn btn-danger btn-sm">No</button>
</td>
</tr>
<tr id="RFIT1001">
<td>Fred Kruger</td>
<td>18/01/2016</td>
<td colspan="2">
<button type="button" class="btn btn-success btn-sm">Yes</button>
<button type="button" class="btn btn-danger btn-sm">No</button>
</td>
</tr>
<tr id="RFIT1002">
<td>Bob Hope</td>
<td>09/08/2016</td>
<td colspan="2">
<button type="button" class="btn btn-success btn-sm">Yes</button>
<button type="button" class="btn btn-danger btn-sm">No</button>
</td>
</tr>
</tbody>
</table>
This is part of a form that will be submitted and I need to track which rows were selected Yes and which rows were selected No. I would also like to add a .success class to the table row when Yes is clicked (and remove a .danger class if previously present), and when No is clicked add a . danger class to the table row (and remove a . success class if previously present).
If the user clicks Yes I would like to track the id value for the Row in a variable/array somehow and the same for the No selections. If the user changes a selection it should also remove the value from the original variable/array - e.g. if they first clicked No and then they click Yes it should add the value to the 'Yes' variable/array list and remove it from the 'No" variable/array list.
I'm still learning HTML, Javascript and CSS as I'm going so not sure what the best approach here is and how to implement a system that tracks selections and makes those available as POST values to include in the form submission?

Try using this
var store={};
//store all values of succes fauilure in an object coresponding to the id
$("[id^=RFIT]").each(function(e,i){store[i.id]=$(i).hasClass('success')?'success':'danger'});
//on click update the closest tr class and store
$('button').click(function(){
if($(this).hasClass('btn-success')){
result='success';
}else{
result='danger';
}
$(this).closest('tr').attr('class',result);
store[ $(this).closest('tr').attr('id')]=result;
});

<table class="table table-condensed table-striped table-bordered">
<thead>
<th scope="col">Name</th>
<th scope="col">Date</th>
<th scope="col">Select</th>
</thead>
<tbody>
<tr id="RFIT1000">
<td>Penny Lane</td>
<td>10/03/2015</td>
<td colspan="2">
<label><input name="row1" id="row1Y" type="radio" class="btn btn-success btn-sm">Yes</label>
<label><input name="row1" id="row1N" type="radio" class="btn btn-danger btn-sm">No</label>
</td>
</tr>
<tr id="RFIT1001">
<td>Fred Kruger</td>
<td>18/01/2016</td>
<td colspan="2">
<label><input name="row2" id="row2Y" type="radio" class="btn btn-success btn-sm">Yes</label>
<label><input name="row2" id="row2N" type="radio" class="btn btn-danger btn-sm">No</label>
</td>
</tr>
<tr id="RFIT1002">
<td>Bob Hope</td>
<td>09/08/2016</td>
<td colspan="2">
<label><input name="row3" id="row3Y" type="radio" class="btn btn-success btn-sm">Yes</label>
<label><input name="row3" id="row3N" type="radio" class="btn btn-danger btn-sm">No</label>
</td>
</tr>
</tbody>
</table>
You can use radio button to get user response also you can provide id to those radio button to catch event in java script using that you can change classes of row at run time.
Hope it will help you, still if any doubt ask me I will provide java script code too.
I have used same name to radio buttons in one row as to read input in PHP and different id to handle different event in java script.

Angular Js: validating duplicate object key in table

I have a table with two column "user type" and "user Name" User type having a drop down selection So that i can select predefined user type and place a name in User name. There is a Add button on each click i am adding one another row.
I am doing one validation here So that user can't selected repeated "User type".
for example from row 1 is i select "value 1" from drop down. then from row 2 i should not be able to select same value. Anyway this validation works fine.
but there is one scenario if I add a duplicate row, then remove it right away, I am still unable to save because the validation error is still there.
here my jsp-
<div ng-class="{'col-sm-9'}" class="col-md-10">
<table class="table table-bordered table-striped table-hover table-condensed">
<thead>
<th>user type</th>
<th>user Name</th>
<th></th>
</thead>
<tbody>
<tr ng-repeat="object in edituserConfig track by $index" ng-form="jobfileForm">
<td><select class="form-control" ng-model="object.key" required ng-change="reValidateJob()" name="jobFileKey" ng-init="object.form = jobfileForm">
<option style="display:none" value=""></option>
<option value="value1">value1t</option>
<option value="value2">value2</option>
<option value="value3">value3</option>
<option value="value4">value4</option>
<option value="value5">value5</option>
</select></td>
<td><input type="text" class="form-control" name="jobFileName" ng-model="object.value" required/></td>
<td >
<button class="btn btn-danger btn-sm" data-style="zoom-in" ng-click="edituserConfig.splice($index,1)" ng-form="jobfileForm" title="Delete">
<span class="glyphicon glyphicon-remove"></span>
</button>
</td>
</tr>
<tr>
<td colspan="3">
<button class="btn btn-primary btn-sm" ng-click="edituserConfig.push({'key':'','value':''})" title="Add Value">
<span class="glyphicon glyphicon-plus"></span> Add Value
</button>
</td>
</tr>
</tbody>
</table>
</div>
My controller-
$scope.reValidateJob = function(){
angular.forEach($scope.edituserConfig, function(fieldMapO) {
var count = 0;
angular.forEach($scope.edituserConfig, function(fieldMapI) {
if(fieldMapO.key == fieldMapI.key){
count ++;
}
});
if(count >1){
fieldMapO.form.jobFileKey.$setValidity("duplicate",false);
}else{
fieldMapO.form.jobFileKey.$setValidity("duplicate",true);
}
});
};
Please advise me on delete button do i need to vaidate all the row again? any good solution?

Well, I think following should work. If not, I'd request you to create a js-fiddle or plunker.
add reValidateJob to ng-click of the add button like below
<button class="btn btn-danger btn-sm" data-style="zoom-in" ng-click="edituserConfig.splice($index,1); reValidateJob();" ng-form="jobfileForm" title="Delete">
<span class="glyphicon glyphicon-remove"></span>
</button>
Hope this helps!