I am trying to convert form data into json
I have a html table as following. On form submit what i want to do is convert it to json
<form class="sales-order-form">
<table class="table">
<tbody>
<tr>
<th>Item Name</th>
<th>Unit Price</th>
<th>Quantity</th>
<th>Free Quantity</th>
<th>Sub Total</th>
</tr>
<tr>
<td><select class="form-control" name="itemName" style="width: 250px;">
<option></option>
<option>Option1</option>
<option>Option2</option>
<option>Option3</option>
</select></td>
<td><input class="form-control" name="unitPrice" type="text" readonly="readonly" value="50">
</td>
</tr>
<tr>
<td><select class="form-control" name="itemName" style="width: 250px;">
<option></option>
<option>Option1</option>
<option>Option2</option>
<option>Option3</option>
</select></td>
<td><input class="form-control" name="unitPrice" type="text" readonly="readonly" value="50">
</td>
</tr>
</tbody>
</table>
</form>
On form submit how do I convert this form into following json?
[
{
"itemName": "item1",
"unitPrice": "49"
},
{
"itemName": "item2",
"unitPrice": "56"
}
]
How to do this??
I tried following
function getFormData($salesOrderForm){
var unindexed_array = $salesOrderForm.serializeArray();
var indexed_array = {};
$.map(unindexed_array, function(n, i){
indexed_array[n['name']] = n['value'];
});
return indexed_array;
}
But it only returns one json
{
"itemName": "item1",
"unitPrice": "50"
}
You can get elements details by using document.getElementsByName("unitPrice") and document.getElementsByName("itemName")
Try this:
function getFormData() {
let res = [];
let x = document.getElementsByName("unitPrice");
let y = document.getElementsByName("itemName");
for (let i = 0; i < x.length; i++) {
let obj = {
"itemName": x[i].value,
"unitPrice": y[i].value
}
res.push(obj);
}
console.log(res);
}
<form class="sales-order-form">
<table class="table">
<tbody>
<tr>
<th>Item Name</th>
<th>Unit Price</th>
<th>Quantity</th>
<th>Free Quantity</th>
<th>Sub Total</th>
</tr>
<tr>
<td><select class="form-control" name="itemName" style="width: 250px;">
<option></option>
<option>Option1</option>
<option>Option2</option>
<option>Option3</option>
</select></td>
<td><input class="form-control" name="unitPrice" type="text" readonly="readonly" value="50">
</td>
</tr>
<tr>
<td><select class="form-control" name="itemName" style="width: 250px;">
<option></option>
<option>Option1</option>
<option>Option2</option>
<option>Option3</option>
</select></td>
<td><input class="form-control" name="unitPrice" type="text" readonly="readonly" value="50">
</td>
</tr>
</tbody>
</table>
</form>
<button onclick="getFormData()">getFormData</button>
You can try with jQuery's .map() and .get()
$('form').submit(function(){
var json = $('.table tr:gt(0)').map(function(){
return {
itemName: $(this).find('select option:selected').text(),
unitPrice: $(this).find('[name=unitPrice]').val()
}
}).get();
console.log(json);
return false; // added to stay on the page for testing purpose
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="sales-order-form">
<table class="table">
<tbody>
<tr>
<th>Item Name</th>
<th>Unit Price</th>
<th>Quantity</th>
<th>Free Quantity</th>
<th>Sub Total</th>
</tr>
<tr>
<td><select class="form-control" name="itemName" style="width: 250px;">
<option></option>
<option>Option1</option>
<option>Option2</option>
<option>Option3</option>
</select></td>
<td><input class="form-control" name="unitPrice" type="text" readonly="readonly" value="50">
</td>
</tr>
<tr>
<td><select class="form-control" name="itemName" style="width: 250px;">
<option></option>
<option>Option1</option>
<option>Option2</option>
<option>Option3</option>
</select></td>
<td><input class="form-control" name="unitPrice" type="text" readonly="readonly" value="50">
</td>
</tr>
</tbody>
</table>
<input type="submit" id="Submit" value="Submit"/>
</form>
I would rely on Array.reduce:
function getFormData($salesOrderForm) {
const serializedArray = $salesOrderForm.serializeArray();
var result = serializedArray.reduce((accumulator, value, index) => {
const isNewObj = index % 2 === 0;
const obj = isNewObj ? {} : accumulator[accumulator.length - 1];
if (isNewObj) {
accumulator.push(obj);
}
obj[value.name] = value.value;
return accumulator;
}, []);
console.log(result);
return result;
}
Related
i have this table
and i would like to change all the EDW column value for all rows by the value selected on the top , hoe can i do that with javascript ?
this is my table html :
<table id="example1" class="table table-bordered">
<thead>
<th>Employee ID</th>
<th>Full Name</th>
<th>Salary</th>
<th>EDW <select type="number" class="edw" name="edw1">
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select></th>
<th>TDW</th>
<th>Deduction</th>
<th>Net Pay</th>
</thead>
<tbody>
#foreach( $employees as $employee)
<tr>
<td>{{$employee->id}}</td>
<td>{{$employee->firstname}} {{$employee->lastname}}</td>
<td><input type="number" class="salary" value="{{$employee->salary}}" name="salary"></td>
<td><input type="number" class="edw" value="30" name="edw"></td>
<td><input type="number" class="tdw" value="30" name="tdw"></td>
<td><input type="number" class="deduction" value="0" name="deduction"></td>
<td><span class="result"></span> AED</td>
</tr>
#endforeach
Solution based on jQuery
<!DOCTYPE html>
<html>
<head>
<title>Salary Table</title>
<meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1"></meta>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<table id="example1" class="table table-bordered">
<thead>
<th>Employee ID</th>
<th>Full Name</th>
<th>Salary</th>
<th>EDW <select id="edw_selection" type="number" class="edw" name="edw1">
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select></th>
<th>TDW</th>
<th>Deduction</th>
<th>Net Pay</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Smith</td>
<td><input type="number" class="salary" value=1000000 name="salary"></td>
<td><input type="number" class="edw" value="30" name="edw"></td>
<td><input type="number" class="tdw" value="30" name="tdw"></td>
<td><input type="number" class="deduction" value="0" name="deduction"></td>
<td><span class="result"></span> AED</td>
</tr>
<tr>
<td>2</td>
<td>Ivan Petrov</td>
<td><input type="number" class="salary" value=3000 name="salary"></td>
<td><input type="number" class="edw" value="30" name="edw"></td>
<td><input type="number" class="tdw" value="30" name="tdw"></td>
<td><input type="number" class="deduction" value="0" name="deduction"></td>
<td><span class="result"></span> AED</td>
</tbody>
<script>
$('#example1').on('change','select', () => {
var selected_value = document.getElementById("edw_selection").value;
$('input[name="edw"]').each( (key,value) => {
value.value = selected_value;
});
});
</script>
</body>
</html>
What you can do is add a change event listener on the dropdown selector. This will allow you to perform an action every time the value changes.
On this action callback, you can retrieve all the fields having the name edw1 using document.querySelector. Then, you can retrieve the value of the edw1 field using the e argument that is passed to the callback. This variable will contain information about the event, including the clicked element inside e.target. All there is to do now is looping through all selects of name edw using querySelectorAll and pass the value : el.value = e.target.value
document.querySelector('select[name=edw1]').addEventListener('change', e => {
document.querySelectorAll('input[name=edw]').forEach(el => {
el.value = e.target.value
})
})
I have a table inside a form each row correspond to data that can be extract alone. usualy when i submit the form all row are send to the request post. So i add checkboxes to each row in order to select only the raw that supposed to be send and not the other like the picture bellow :
i have to find a solution but i don't know where to start i have to send the request in ajax
i'm new at coding so if anyone have a lead that can help me resolve this issue or how can i reform my question i will appreciate
my code look like this :
<form action="" method="post">
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col"><i class="fas fa-inbox"></i></th>
<th scope="col">Consulant</th>
<th scope="col">cra</th>
<th scope="col">taux</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"><input type="checkbox"></th>
<td>The One</td>
<td><select name="Cras_status[]" id="">
<option value="">--Choississez le status--</option>
<option value="1">En cours</option>
<option value="">Validité</option>
<option value="">Refuser</option>
</select></td>
<td><input name="taux" type="number"></td>
</tr>
<tr>
<th scope="row"><input type="checkbox"></th>
<td>The Two</td>
<td><select name="Cras_status[]" id="">
<option value="">--Choississez le status--</option>
<option value="1">En cours</option>
<option value="2">Validité</option>
<option value="3">Refuser</option>
</select></td>
<td><input type="number"></td>
</tr>
<tr>
<th scope="row"><input type="checkbox"></th>
<td>The Three</td>
<td><select name="Cras_status[]" id="">
<option value="">--Choississez le status--</option>
<option value="1">En cours</option>
<option value="2">Validité</option>
<option value="3">Refuser</option>
</select></td>
<td><input name type="number"></td>
</tr>
<tr>
<th scope="row"><input type="checkbox"></th>
<td>The Four</td>
<td><select name="Cras_status[]" id="">
<option value="">--Choississez le status--</option>
<option value="1">En cours</option>
<option value="2">Validité</option>
<option value="3">Refuser</option>
</select></td>
<td><input type="number"></td>
</tr>
<tr>
<th scope="row"><input type="checkbox"></th>
<td>The Five</td>
<td><select name="" id="">
<option value="">--Choississez le status--</option>
<option value="1">En cours</option>
<option value="2">Validité</option>
<option value="3">Refuser</option>
</select></td>
<td><input name="taux" type="number"></td>
</tr>
</tbody>
</table>
<div class="float-right">
<button class="btn btn-primary" type="submit">Envoyer</button>
</div>
</form>
This ought to work for you within modern browsers.
function submitFormAction(event, form) {
event.preventDefault();
var tbody = document.getElementsByTagName('tbody')[0];
var rows = tbody.getElementsByTagName('tr');
var data = new FormData();
for (var row of rows) {
let checked = row.querySelector('input[type="checkbox"]').checked;
let option = row.querySelector('select')
let rate = row.querySelector('input[type="number"]');
if (checked) {
data.append(option.name, option.value);
data.append(rate.name, rate.value);
}
}
fetch("some/url", {
method: "POST",
body: data,
headers: {
"Content-Type": "multipart/form-data"
}
})
.then((response) => {
//Do some stuff
})
.catch((error) => {
//Handle failure
})
}
window.onload = ((event) => {
const form = document.getElementsByTagName('form')[0];
form.onsubmit = ((submitEvent) => submitFormAction(submitEvent, form));
})
Alternatively, if you want the request to be handled through a regular browser form submit, one approach would be to use javascript to copy the selected element values into a second hidden form and submit that one.
It would also be a good idea to add some ids to your important html elements. For example <form id="myForm" action="" method="post"> would let you use document.getElementById('#myForm'); and avoid the [0] collection access. This would also keep your code from breaking if you restructure your page or add more forms.
I manage to retreive the data in a array object :
function submitFormAction(event, form) {
event.preventDefault();
var tbody = document.getElementsByTagName('tbody')[0];
var rows = tbody.getElementsByTagName('tr');
var Test = [];
var data = new FormData();
for (var row of rows) {
let checked = row.querySelector('input[type="checkbox"]').checked;
let consultant = row.querySelector('input[type="text"]');
let option = row.querySelector('select');
let rate = row.querySelector('input[type="number"]');
if(checked) {
Test.push({
'consultant_name': consultant.value,
'Type de cra' : option.value,
'Taux' : rate.value });
}
}
for (key in Test){
data.append('Consultant[]', JSON.stringify(Test[key]));
}
console.log(Test);
var request = new XMLHttpRequest();
request.open("POST", "bottle.php", true);
request.send(data);
}
window.onload = ((event) => {
const form = document.getElementsByTagName('form')[0];
form.onsubmit = ((submitEvent) => submitFormAction(submitEvent, form));
})
<div>
<form action="" method="post">
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col"><i class="fas fa-inbox"></i></th>
<th scope="col">Consulant</th>
<th scope="col">cra</th>
<th scope="col">taux</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"><input type="checkbox"></th>
<td><input name="Consulant[]" type="text" value="The One"></td>
<td><select name="Cras_status[]" id="">
<option value="">--Choississez le status--</option>
<option value="En_cours">En cours</option>
<option value="Valide">Validité</option>
<option value="Refuser">Refuser</option>
</select></td>
<td><input name="taux[]" name="taux" type="number"></td>
</tr>
<tr>
<th scope="row"><input type="checkbox"></th>
<td><input name="Consulant[]" type="text" value="The Two"></td>
<td><select name="Cras_status[]" id="">
<option value="">--Choississez le status--</option>
<option value="En_cours">En cours</option>
<option value="Valide">Validité</option>
<option value="Refuser">Refuser</option>
</select></td>
<td><input name="taux[]" type="number"></td>
</tr>
<tr>
<th scope="row"><input type="checkbox"></th>
<td><input name="Consulant[]" type="text" value="The Three"></td>
<td><select name="Cras_status[]" id="">
<option value="">--Choississez le status--</option>
<option value="En_cours">En cours</option>
<option value="Valide">Validité</option>
<option value="Refuser">Refuser</option>
</select></td>
<td><input name="taux[]" type="number"></td>
</tr>
<tr>
<th scope="row"><input type="checkbox"></th>
<td><input name="Consulant[]" type="text" value="The Four"></td>
<td><select name="Cras_status[]" id="">
<option value="">--Choississez le status--</option>
<option value="En_cours">En cours</option>
<option value="Valide">Validité</option>
<option value="Refuser">Refuser</option>
</select></td>
<td><input name="taux[]" type="number"></td>
</tr>
<tr>
<th scope="row"><input type="checkbox"></th>
<td><input name="Consulant[]" type="text" value="The five"></td>
<td><select name="" id="">
<option value="">--Choississez le status--</option>
<option value="En_cours">En cours</option>
<option value="Valide">Validé</option>
<option value="Refuser">Refuser</option>
</select></td>
<td><input name="taux[]" type="number"></td>
</tr>
</tbody>
</table>
<div class="float-right">
<button class="btn btn-primary" type="submit">Envoyer</button>
</div>
</form>
</div>
i can clone the first and the last row but i cant clone the 2, 3, 4 and so on rows, so how can i target this rows to clone and erase them respectively.
now i have to write trash so i can post cause my whatever have too mucho code, really men come on this is not esayflow is it XD
demo
$('button[name=add]').on('click', function() {
var cloned = $('#table1 tr:last').clone(true);
$('#table1').append(cloned);
})
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered" id="table1">
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
<tbody>
<tr id="2">
<td>2</td>
<td>
<select name="numero" id="" class="form-control">
<option value="">a</option>
<option value="">b</option>
<option value="">c</option>
<option value="">d</option>
<option value="">e</option>
<option value="">...</option>
</select>
<button name="add">+</button>
<button name="erase">-</button>
</td>
<td><input type="number" min="0" class="form-control"></td>
<td><input type="number" min="0" class="form-control"></td>
<td><input type="number" min="0" class="form-control"></td>
</tr>
<tr>
<td>3</td>
<td>
<select name="numero" id="" class="form-control">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
<option value="">...</option>
</select>
<button name="add">+</button>
<button name="erase">-</button>
</td>
<td><input type="number" min="0" class="form-control"></td>
<td><input type="number" min="0" class="form-control"></td>
<td><input type="number" min="0" class="form-control"></td>
</tr>
</tbody>
</table>
If clone does not work properly use "outerHTML" and append it to nearest "tbody".
as follows:
$('button[name=add]').on('click', function() {
var cloned = $(this).closest('tr')[0].outerHTML;
$(this).closest('tbody').append(cloned);
});
For removing row:
$('button[name=minus]').on('click', function() {
$(this).closest('tr').remove();
});
You need to clone the tr that has the button you clicked.
In your code, you are specifying only the last row to be cloned.
So, to clone any other row, target the row containing the button that has been clicked using jQuery .closest()
$('button[name=add]').on('click', function() {
// this will select the first tr parent that contain the button
var cloned = $(this).closest('tr').clone(true);
$('#table1').append(cloned);
})
Use remove() function to remove your target.
$('button[name=add]').on('click', function() {
var cloned = $(this).closest('tr').clone(true);
$('#table1').append(cloned);
})
$('button[name=erase]').on('click', function() {
$(this).closest('tr').remove();
});
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered" id="table1">
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
</thead>
<tbody>
<tr id="2">
<td>2</td>
<td>
<select name="numero" id="" class="form-control">
<option value="">a</option>
<option value="">b</option>
<option value="">c</option>
<option value="">d</option>
<option value="">e</option>
<option value="">...</option>
</select>
<button name="add">+</button>
<button name="erase">-</button>
</td>
<td><input type="number" min="0" class="form-control"></td>
<td><input type="number" min="0" class="form-control"></td>
<td><input type="number" min="0" class="form-control"></td>
</tr>
<tr>
<td>3</td>
<td>
<select name="numero" id="" class="form-control">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
<option value="">...</option>
</select>
<button name="add">+</button>
<button name="erase">-</button>
</td>
<td><input type="number" min="0" class="form-control"></td>
<td><input type="number" min="0" class="form-control"></td>
<td><input type="number" min="0" class="form-control"></td>
</tr>
</tbody>
</table>
Use closest() to clone and remove closest tr.
$('button[name=add]').on('click', function() {
var cloned = $(this).closest('tr').clone(true);
$('#table1 tbody tr:last').after(cloned);
})
$('button[name=erase]').on('click', function() {
$(this).closest("tr").remove();
})
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered" id="table1">
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
<tbody>
<tr id="2">
<td class="count">1</td>
<td>
<select name="numero" id="" class="form-control">
<option value="">a</option>
<option value="">b</option>
<option value="">c</option>
<option value="">d</option>
<option value="">e</option>
<option value="">...</option>
</select>
<button name="add">+</button>
<button name="erase">-</button>
</td>
<td><input type="number" min="0" class="form-control"></td>
<td><input type="number" min="0" class="form-control"></td>
<td><input type="number" min="0" class="form-control"></td>
</tr>
</tbody>
</table>
<select class="form-control" name="suppliername" ng-model="suppliername" data-ng-change="supplier_data1(suppliername)" required>
<option value="">Select</option>
<option ng-repeat="custids in supp_nmArray" value="{{custids.Supplier_Id}}" >{{custids.name}}
</option>
</select>
<table class="table table-striped" >
<thead>
<tr>
<th>Product Name</th>
<th>Qty</th>
<th>Rate</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="p in products">
<td>{{ p.Product_Name }}
<input type="hidden" class="form-control" name="sname" ng-model="sname" required>
</td>
<td>
<input type="text" class="form-control" name="finalqty" ng-model="p.finalqty" ng-change="change_qty(p.productrate,p.finalqty)"/>
</td>
<td>
<span ng-init="GetProdcutDetails(p.Product_Name,sname,'productrate'+$index)"></span>
<input type="text" class="form-control" name="purches_rate" ng-model="p.purches_rate" id="productrate{{$index}}">
</td>
</tr>
</tbody>
</table>
var app=angular.module("myapp",['ui.bootstrap']);
app.controller("ctrl",function($scope,$http)
{
$scope.supplier_data1 = function(suppliername)
{
$scope.sname=suppliername;
}
$scope.GetProdcutDetails = function(Product_Name,sname,productrate)
{
$http.post("get_prodcut_rate.php",{'Product_Name':Product_Name,'suppliername':$scope.sname})
.success(function(data)
{
var x = document.getElementById(productrate);
document.getElementById(productrate).value = data[0].purches_rate;
});
}
});
I'am getting product rate value in ng repeat by use of javascript(getElementById).
How to assign the document.getElementById to ng-model in ng-repeat ?
I need to pass the value in another function. kinldy help me
Thanks you in Advance.
I have to disable a input in a td, based in the selection in the td select, the td target is the next one, but when I select a option it changes all the next td in the column. I´m new in this u_u
<table id="tabla">
<!-- Cabecera de la tabla -->
thead>
<tr>
<th>Nombre</th>
<th>Apellidos</th>
<th>Sexo</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td class="especial">
<select id="mySelect" onchange="funcSelect()" name="inmueble_psesion" class="browser-default">
<option value="1">PROPIO</option>
<option value="2">RENTADO</option>
<option value="3">COMODATO</option>
<option value="4">*OTRO</option>
</select>
</td>
<td><input type="text" name="" disabled></td>
<td><input type="text" name="" value="3" ></td>
<td></td>
</tr>
<tr>
<td class="especial">
<select id="mySelect2" onchange="funcSelect()"
name="inmueble_psesion" class="browser-default">
<option value="1">PROPIO</option>
<option value="2">RENTADO</option>
<option value="3">COMODATO</option>
<option value="4">*OTRO</option>
</select>
</td>
<td><input type="text" name="" disabled></td>
<td><input type="text" name="" value=""></td>
<td><input type="text" name="" value=""></td>
</tr>
</tbody>
</table>
this is the function I call for disable the next input, basically i am obtaining the id and the value and depending on that I disable the input, but apparently I disable or enable all the td's not just the one in the row I work
function funcSelect(){
var idSel = $("select").attr("id");
console.log(idSel);
var valSel = $("#"+idSel).val();
var id = "#"+idSel;
console.log(id);
console.log(valSel);
if(valSel === "4"){
$("td.especial").next("td").children().removeAttr("disabled");
}else{
$("td.especial").next("td").children().attr("disabled", "disabled");
}
}
Javascript doesn't work this way.Here is a working version of you code..... Plus you don't have to use any inline function to get this work.....
HTML:
<table id="tabla">
<!-- Cabecera de la tabla -->
<thead>
<tr>
<th>Nombre</th>
<th>Apellidos</th>
<th>Sexo</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td class="especial">
<select id="mySelect" name="inmueble_psesion" class="browser-default">
<option value="1">PROPIO</option>
<option value="2">RENTADO</option>
<option value="3">COMODATO</option>
<option value="4">*OTRO</option>
</select>
</td>
<td><input type="text" name="" disabled></td>
<td><input type="text" name="" value="3" ></td>
<td></td>
</tr>
<tr>
<td class="especial">
<select id="mySelect2"
name="inmueble_psesion" class="browser-default">
<option value="1">PROPIO</option>
<option value="2">RENTADO</option>
<option value="3">COMODATO</option>
<option value="4">*OTRO</option>
</select>
</td>
<td><input type="text" name="" disabled></td>
<td><input type="text" name="" value=""></td>
<td><input type="text" name="" value=""></td>
</tr>
</tbody>
</table>
Javascript/Jquery:
$(document).on('change', 'select', function(event) {
var val = $(this).val();
if (val == 4) {
$(this).parent().next('td').children().removeAttr('disabled');
}else{
$(this).parent().next('td').children().attr('disabled', 'disabled');
}
});
You should use $("#"+idSel).closest("td.especial") instead of $("td.especial") to find just the first ancestor matching td.especial selector.
Your current code is just matching everything existing in DOM matching given selector `td.especial.