How to extract data from a Editable Table Form with ajax

How to extract data from a Editable Table Form with ajax - javascript

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>

Related

Bootstrap - Table Column Widths Not Sizing Correctly

I have a Bootstrap 4 table which shows existing data as well as a row at the bottom to enter another line and submit that. I've setup fixed column widths in the header row but these are not being respected when the table is rendered.
Here's an example:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-striped table-hover table-bordered">
<thead>
<tr>
<th style="width:20%">No</th>
<th style="width:30%">Name</th>
<th style="width:5%">Phase</th>
<th style="width:15%">Name</th>
<th style="width:5%">Day</th>
<th style="width:5%">Time</th>
<th style="width:5%">Totals</th>
<th style="width:10%">Notes</th>
<th style="width:5%">Action</th>
</tr>
</thead>
<tbody>
<tr id="1956253">
<td>2368941257</td>
<td>London Gateway</td>
<td>23/B</td>
<td>Planning</td>
<td>Mon</td>
<td>7</td>
<td>7</td>
<td>lorem ipsum</td>
<td>N/A</td>
</tr>
<tr>
<td>
<select name="projectNumber" required>
<option value=""></option>
<option value="365541254">365541254</option>
<option value="874521147">874521147</option>
<option value="3456467456">3456467456</option>
</select>
</td>
<td id="ProjectName"></td>
<td id="ProjectPhases"></td>
<td></td>
<td>
<select name="Date" required>
<option value=""></option>
<option value="Mon">Mon</option>
<option value="Tue">Tue</option>
<option value="Wed">Wed</option>
<option value="Thu">Thu</option>
<option value="Fri">Fri</option>
<option value="Sat">Sat</option>
<option value="Sun">Sun</option>
</select>
</td>
<td><input type="text" name="Time" required></td>
<td></td>
<td><input type="text" name="Notes"></td>
<td></td>
</tr>
<tr>
<td colspan="9">
<button type="reset" class="btn">Reset</button>
<button type="submit" class="btn btn-success">Save</button>
</td>
</tr>
</tbody>
</table>
For example the Time column should only be 5% of the width but is taking up much more space. Nothing I've tried has been able to get the specified widths to be respected here.

Well, you gave width to the ths but not the trs - Also, the input field inside the cell is much wider so the entire column gets wider to accommodate.
You could use specific classes for each width to avoid repeating styles.
See demo below
.w-5{
width: 5%;
}
.w-10
width: 10%;
}
.w-15{
width: 15%;
}
.w-20{
width: 20%;
}
.w-30{
width: 30%;
}
.w-5 input{
width:100%;
}
.w-20 select{
width:100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<table class="table table-striped table-hover table-bordered">
<thead>
<tr>
<th class="w-20">No</th>
<th class="w-10">Name</th>
<th class="w-5">Phase</th>
<th class="w-15">Name</th>
<th class="w-5">Day</th>
<th class="w-5">Time</th>
<th class="w-5">Totals</th>
<th class="w-10">Notes</th>
<th class="w-5">Action</th>
</tr>
</thead>
<tbody>
<tr id="1956253">
<td>2368941257</td>
<td>London Gateway</td>
<td>23/B</td>
<td>Planning</td>
<td>Mon</td>
<td>7</td>
<td>7</td>
<td>lorem ipsum</td>
<td>N/A</td>
</tr>
<tr>
<td class="w-20">
<select name="projectNumber" required>
<option value=""></option>
<option value="365541254">365541254</option>
<option value="874521147">874521147</option>
<option value="3456467456">3456467456</option>
</select>
</td>
<td id="ProjectName"></td>
<td id="ProjectPhases"></td>
<td></td>
<td>
<select name="Date" required>
<option value=""></option>
<option value="Mon">Mon</option>
<option value="Tue">Tue</option>
<option value="Wed">Wed</option>
<option value="Thu">Thu</option>
<option value="Fri">Fri</option>
<option value="Sat">Sat</option>
<option value="Sun">Sun</option>
</select>
</td>
<td class="w-5"><input class="time" type="text" name="Time" required></td>
<td></td>
<td><input type="text" name="Notes"></td>
<td></td>
</tr>
<tr>
<td colspan="9">
<button type="reset" class="btn">Reset</button>
<button type="submit" class="btn btn-success">Save</button>
</td>
</tr>
</tbody>
</table>

Why does Jquery parent child selecter return undefined?

Why jquery parent child selector is not working here :
$(document).on('change', 'select[name="slct_sec"]', function() {
var cls_1 = $(this).closest('article').find('select[name="slct_cls"]').val();
console.log(cls_1);
var cls_1_bis = $(this).parent().siblings().find('select[name="slct_cls"]').val();
console.log(cls_1_bis);
});
$("#productTableServerSide").on('change', '.server-dropdown', function(event) {
//ancienne valeur
var oldValue = $.data(this, 'itemValue');
//nouvelle valeur
var newValue = $(this).val();
console.log('break1');
//not working
var itemName = $(this).closest('tbody').find('.col-name').val();
console.log('itemName : ', itemName);
//not working
var itemName1 = $(this).parent().children('.col-name').val();
console.log('itemName1 : ', itemName1);
//not working
var itemName2 = $(this).parent().siblings().find('select[name="values"]').val();
console.log('itemName2 : ', itemName2);
//not working
var itemName3 = $(this).parent().children('.col-name').find('select[name="values"]').val();
console.log('itemName3 : ', itemName3);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Example from Internet which is working</p>
<article>
<section>
<select name='slct_cls'>
<option value='1'>One</option>
<option value='2'>Two</option>
</select>
</section>
<br/>
<section>
<select name='slct_sec'>
<option value='1'>A</option>
<option value='2'>B</option>
</select>
</section>
</article>
<br/>
<p>My Example</p>
<table id="productTableServerSide" class="table table-bordered" style="width:100%;">
<thead class="thead-dark text-white">
<tr>
<th>Check</th>
<th>#</th>
<th>The product name</th>
<th>The product value</th>
<th>Dropdown</th>
</tr>
</thead>
<tbody>
<tr role="row" class="odd">
<td class="col-checkbox sorting_1">
<input id="check0" type="checkbox" class="server-checkbox">
</td>
<td class=" col-action">
Action
</td>
<td class=" col-name">item 0</td>
<td class=" col-value">3</td>
<td class=" col-dropdown">
<select id="drop3" class="server-dropdown custom-select custom-select-sm form-control form-control-sm" name="values">
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected="">3</option>
<option value="4">4</option>
<option value="2130554612">2130554612</option>
</select>
</td>
</tr>
<tr role="row" class="even">
<td class="col-checkbox sorting_1">
<input id="check1" type="checkbox" class="server-checkbox">
</td>
<td class=" col-action">
Action
</td>
<td class=" col-name">item 1</td>
<td class=" col-value">1436184776</td>
<td class=" col-dropdown">
<select id="drop1436184776" class="server-dropdown custom-select custom-select-sm form-control form-control-sm" name="values">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="1436184776" selected="">1436184776</option>
</select>
</td>
</tr>
</tbody>
</table>
I've used an example from here : Jquery selecting a parents child which didn't work for me.
The console.log returns undefined => which means that either the variable is undefined or something else
Could you help me?

Thanks for your help. After searching an answer to my question here is the solution of my problem :
$("#productTableServerSide").on('change', '.server-dropdown', function (event) {
//ancienne valeur
var oldValue = $.data(this, 'itemValue');
//nouvelle valeur
var newValue = $(this).val();
console.log('break1');
//working
var itemName = $(this).closest('tr').find('.col-name').text();
console.log('itemName : ', itemName);
alert(itemName);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>My Example</p>
<table id="productTableServerSide" class="table table-bordered" style="width:100%;">
<thead class="thead-dark text-white">
<tr>
<th>Check</th>
<th>#</th>
<th>The product name</th>
<th>The product value</th>
<th>Dropdown</th>
</tr>
</thead>
<tbody>
<tr role="row" class="odd">
<td class="col-checkbox sorting_1">
<input id="check0" type="checkbox" class="server-checkbox">
</td>
<td class=" col-action">
Action
</td>
<td class=" col-name">item 0</td>
<td class=" col-value">3</td>
<td class=" col-dropdown">
<select id="drop3" class="server-dropdown custom-select custom-select-sm form-control form-control-sm" name="values">
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected="">3</option>
<option value="4">4</option>
<option value="2130554612">2130554612</option>
</select>
</td>
</tr>
<tr role="row" class="even">
<td class="col-checkbox sorting_1">
<input id="check1" type="checkbox" class="server-checkbox">
</td>
<td class=" col-action">
Action
</td>
<td class=" col-name">item 1</td>
<td class=" col-value">1436184776</td>
<td class=" col-dropdown">
<select id="drop1436184776" class="server-dropdown custom-select custom-select-sm form-control form-control-sm" name="values">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="1436184776" selected="">1436184776</option>
</select>
</td>
</tr>
</tbody>
</table>
I pulish it for the others, in case they have the same issue.
Have a nice day!

var itemName = $(this).closest('tbody').find('.col-name').text();
try this,
is not an input elelment so I dont think you'll get anything with val()
instead I've used text(), or you can try other functions jquery provides, like html()
And out of all selectors you've tried to target <td class="col-name"> , above seems to work fine, second one wont work, I didnt try every one of them.

Get data from specific columns in table when row checked

I need to get from specific table columns in a row. All data should be pushed into an array.
I should take data from each checked row from different columns (1,3,4). Column #4 contains drop-down option and it should take only selected value.
I am having a hard time getting this function to work, it works if I have only one column. I am facing trouble when I am retrieving data from , it retrieves all data from option values, I should get only selected value.
function getData() {
// Enumerate over each checked checkbox
$('input:checked').each(function() {
var row = [];
$(this).closest('tr').find('td:eq(5)').each(function() {
row.push($(this).text());
});
// Add this row to our list of rows
rows.push(row);
//debugger;
});
console.log(row);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Country</th>
</tr>
<tr>
<td><input type="checkbox" id="checkbox" value="1"></td>
<td>Jill</td>
<td>Smith</td>
<td>20</td>
<td>
<select id="country">
<option value='1'>Germany</option>
<option value='2'>England</option>
<option value='3'>Croatia</option>
<option value='4'>USA</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox" value="2"></td>
<td>Eve</td>
<td>Jackson</td>
<td>14</td>
<td>
<select id="country">
<option value='1'>Germany</option>
<option value='2'>England</option>
<option value='3'>Croatia</option>
<option value='4'>USA</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox" value="3"></td>
<td>Amanda</td>
<td>Jac</td>
<td>14</td>
<td>
<select id="country">
<option value='1'>Germany</option>
<option value='2'>England</option>
<option value='3'>Croatia</option>
<option value='4'>USA</option>
</select>
</td>
</tr>
</table>
<button type="button" onclick="getData()">Submit</button>
Function displays only data from one column. If I add .'td:eg(6)' I got empty array

#Bruno your case is little different and to get the desired result I have updated your code for button click event & it is as follow.
$("#btnSubmit").click(function(){
var rows = [];
$('input:checked').each(function() {
var row = $(this).parent().parent();
var data = {};
$(row).find("td").each(function(i,obj){
if(i == 1){
data.name = $(this).text();
}
else if(i == 3){
data.age = $(this).text();
}
else if(i == 4){
data.country = $(this).find("select").val();
}
})
rows.push(data);
})
console.log(rows);
})
And before implementing it to your code you can play it in here at JS Fiddle Demo.
In fiddle demo open console [F12] you can see your list of selected row value in an array.
Hope this is what you are looking for.

Here i try your result to get select row dropdwun value.
function getData(){
var rows=[];
// Enumerate over each checked checkbox
$('input:checked').each(function () {
var row = [];
var cnty= $(this).closest('tr').find('td:nth-child(5)').children('select').val();
var fname=$(this).closest('tr').find('td:nth-child(2)').text();
var lname=$(this).closest('tr').find('td:nth-child(3)').text();
var age=$(this).closest('tr').find('td:nth-child(4)').text();
var vals=[fname ,lname, age, cnty];
row.push(vals);
// Add this row to our list of rows
rows.push(row);
//debugger;
});
console.log(rows);
}
<table >
<tr>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Country</th>
</tr>
<tr>
<td><input type="checkbox" id="checkbox" value="1"></td>
<td>Jill</td>
<td>Smith</td>
<td>20</td>
<td>
<select id="country">
<option value='1'>Germany</option>
<option value='2'>England</option>
<option value='3'>Croatia</option>
<option value='4'>USA</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox" value="2"></td>
<td>Eve</td>
<td>Jackson</td>
<td>14</td>
<td>
<select id="country">
<option value='1'>Germany</option>
<option value='2'>England</option>
<option value='3'>Croatia</option>
<option value='4'>USA</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox" value="3"></td>
<td>Amanda</td>
<td>Jac</td>
<td>14</td>
<td>
<select id="country">
<option value='1'>Germany</option>
<option value='2'>England</option>
<option value='3'>Croatia</option>
<option value='4'>USA</option>
</select>
</td>
</tr>
</table>
<button type="button" onclick="getData()">Submit</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Here is how you could have all the selected values on button click. Just iterate over all tr and find select inside and get the value .
function getData(){
$("tr").each(function() {
if($(this).find("select")){
console.log($(this).find("select").val())
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table >
<tr>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Country</th>
</tr>
<tr>
<td><input type="checkbox" id="checkbox" value="1"></td>
<td>Jill</td>
<td>Smith</td>
<td>20</td>
<td>
<select class="select-cls" id="country">
<option value='1'>Germany</option>
<option value='2'>England</option>
<option value='3'>Croatia</option>
<option value='4'>USA</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox" value="2"></td>
<td>Eve</td>
<td>Jackson</td>
<td>14</td>
<td>
<select id="country">
<option value='1'>Germany</option>
<option value='2'>England</option>
<option value='3'>Croatia</option>
<option value='4'>USA</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox" value="3"></td>
<td>Amanda</td>
<td>Jac</td>
<td>14</td>
<td>
<select id="country">
<option value='1'>Germany</option>
<option value='2'>England</option>
<option value='3'>Croatia</option>
<option value='4'>USA</option>
</select>
</td>
</tr>
</table>
<button type="button" onclick="getData()">Submit</button>

change a td change all the column

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.

how to get value in textboxes selecting dropdown list value?

hi i want to display value in textbox selected by dropdown value. suppose i selected sql
i got the value like jdbc:mysql://localhost/lportal?useUnicode=true&characterEncoding=UTF-8&useFastDateParsing=falsein jdbc url textbox.com.mysql.jdbc.Driver driver name in driver class textbox.
this type of code i want
<form>
<table>
<tr>
<td>Database Type</td>
</tr>
<tr>
<td><select name="Database Type" onclick="fillData()" id="sel_value">
<option value="DB2">DB2</option>
<option value="Derby">Derby</option>
<option value="Hypersonic">Hypersonic</option>
<option value="Ingres">Ingres</option>
<option value="MySQL">MySQL</option>
<option value="Oracle">Oracle</option>
<option value="P6Spy">P6Spy</option>
<option value="PostgreSQL">PostgreSQL</option>
<option value="SQL Server">SQL Server</option>
<option value="Sybase">Sybase</option>
</select>
</tr>
<tr>
<td>JDBC URL(required)</td>
</tr>
<tr>
<td><input type="text" name="jdbcUrl" style="width: 550px;" id="jdbcUrl"></td>
</tr>
<tr>
<td>JDBC Driver Class Name(Required)</td>
</tr>
<tr>
<td><input type="text" name="text" style="width: 550px;"></td>
</tr>
<tr>
<td>username</td>
</tr>
<tr>
<td><input type="text" name="text" style="width: 550px;"></td>
</tr>
<tr>
<td>password</td>
</tr>
<tr>
<td><input type="password" name="text" style="width: 550px;"></td>
</tr>
</table>
</form>

Replace the onclick with onchange. Here try this code:
<select name="Database Type" onchange="fillData()" id="sel_value">
<option value="DB2">DB2</option>
<option value="Derby">Derby</option>
<option value="Hypersonic">Hypersonic</option>
<option value="Ingres">Ingres</option>
<option value="MySQL">MySQL</option>
<option value="Oracle">Oracle</option>
<option value="P6Spy">P6Spy</option>
<option value="PostgreSQL">PostgreSQL</option>
<option value="SQL Server">SQL Server</option>
<option value="Sybase">Sybase</option>
</select>
Javascript:
function fillData(){
alert($('#sel_value').val());
}

Develop Reference

JavaScript is the programming language of the Web.

How to extract data from a Editable Table Form with ajax - javascript

Related

Bootstrap - Table Column Widths Not Sizing Correctly

Why does Jquery parent child selecter return undefined?

Get data from specific columns in table when row checked

change a td change all the column

how to get value in textboxes selecting dropdown list value?

Categories

Resources