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>
Related
I am using bootstrap table.
My table contains cells that contains input fields.
I try to add event handlers (using jquery) to those input fields but it does not seem to work.
If I add the event handlers to a non bootstrap table it works.
The code below demonstrates the issue. When the user change input fields in the upper table (a bootstrap table), nothing is written to the console.When user change input fields in the lower table (non bootstrap table), a message is written to the console.
How do I add event handlers to the input fields in a bootstrap-table?
$(document).ready(function() {
console.log('ready');
$('#my_table_1').find('input[type="date"]').change(function() {
console.log('Table 1.Date was changed. Need to check if table is sorted by column C.If so - call the table sort.');
});
$('#my_table_1').find('select').change(function() {
console.log('Table 1.Selection was changed. Need to check if table is sorted by column B.If so - call the table sort.');
});
$('#my_table_2').find('input[type="date"]').change(function() {
console.log('Table 2.Date was changed. Need to check if table is sorted by column C.If so - call the table sort.');
});
$('#my_table_2').find('select').change(function() {
console.log('Table 2.Selection was changed. Need to check if table is sorted by column B.If so - call the table sort.');
});
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table#1.15.4/dist/bootstrap-table.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<span>A Bootstrap table</span>
<table id="my_table_1" data-toggle="table" data-sort-stable="true">
<thead>
<tr>
<th data-sortable="true">A</th>
<th data-sortable="true">B</th>
<th data-sortable="true">C</th>
<th data-sortable="false">D</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<select>
<option val="112">A</option>
<option val="2">B</option>
<option val="356" selected>C</option>
</select>
</td>
<td><input type="date" value="2018-07-22"></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>123</td>
<td>
<select>
<option val="1" selected>A</option>
<option val="2">B</option>
<option val="3">C</option>
</select>
</td>
<td><input type="date" value="2014-07-22"></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>56</td>
<td>
<select>
<option val="1">A</option>
<option val="2" selected>B</option>
<option val="3">C</option>
</select>
</td>
<td><input type="date" value="2014-08-23"></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>14</td>
<td>
<select>
<option val="1">A</option>
<option val="2" selected>B</option>
<option val="3">C</option>
</select>
</td>
<td><input type="date" value="2014-07-23"></td>
<td><input type="checkbox"></td>
</tr>
</tbody>
</table>
<!------------------------------------------------------------------->
<hr>
<span>A Non Bootstrap table</span>
<table id="my_table_2">
<thead>
<tr>
<th data-sortable="true">A</th>
<th data-sortable="true">B</th>
<th data-sortable="true">C</th>
<th data-sortable="false">D</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<select>
<option val="112">A</option>
<option val="2">B</option>
<option val="356" selected>C</option>
</select>
</td>
<td><input type="date" value="2018-07-22"></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>123</td>
<td>
<select>
<option val="1" selected>A</option>
<option val="2">B</option>
<option val="3">C</option>
</select>
</td>
<td><input type="date" value="2014-07-22"></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>56</td>
<td>
<select>
<option val="1">A</option>
<option val="2" selected>B</option>
<option val="3">C</option>
</select>
</td>
<td><input type="date" value="2014-08-23"></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>14</td>
<td>
<select>
<option val="1">A</option>
<option val="2" selected>B</option>
<option val="3">C</option>
</select>
</td>
<td><input type="date" value="2014-07-23"></td>
<td><input type="checkbox"></td>
</tr>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/bootstrap-table#1.15.4/dist/bootstrap-table.min.js"></script>
u need to add your script at the bottom and not in top of the table html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table#1.15.4/dist/bootstrap-table.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<title>sorted table</title>
</head>
<body>
<span>A Bootstrap table</span>
<table id="my_table_1" data-toggle="table" data-sort-stable="true">
<thead>
<tr>
<th data-sortable="true">A</th>
<th data-sortable="true">B</th>
<th data-sortable="true">C</th>
<th data-sortable="false">D</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td><select>
<option val="112">A</option>
<option val="2">B</option>
<option val="356" selected>C</option>
</select>
</td>
<td><input type="date" value="2018-07-22"></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>123</td>
<td><select>
<option val="1" selected>A</option>
<option val="2">B</option>
<option val="3">C</option>
</select>
</td>
<td><input type="date" value="2014-07-22"></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>56</td>
<td><select>
<option val="1">A</option>
<option val="2" selected>B</option>
<option val="3">C</option>
</select>
</td>
<td><input type="date" value="2014-08-23"></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>14</td>
<td><select>
<option val="1">A</option>
<option val="2" selected>B</option>
<option val="3">C</option>
</select>
</td>
<td><input type="date" value="2014-07-23"></td>
<td><input type="checkbox"></td>
</tr>
</tbody>
</table>
<!------------------------------------------------------------------->
<hr>
<span>A Non Bootstrap table</span>
<table id="my_table_2">
<thead>
<tr>
<th data-sortable="true">A</th>
<th data-sortable="true">B</th>
<th data-sortable="true">C</th>
<th data-sortable="false">D</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td><select>
<option val="112">A</option>
<option val="2">B</option>
<option val="356" selected>C</option>
</select>
</td>
<td><input type="date" value="2018-07-22"></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>123</td>
<td><select>
<option val="1" selected>A</option>
<option val="2">B</option>
<option val="3">C</option>
</select>
</td>
<td><input type="date" value="2014-07-22"></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>56</td>
<td><select>
<option val="1">A</option>
<option val="2" selected>B</option>
<option val="3">C</option>
</select>
</td>
<td><input type="date" value="2014-08-23"></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>14</td>
<td><select>
<option val="1">A</option>
<option val="2" selected>B</option>
<option val="3">C</option>
</select>
</td>
<td><input type="date" value="2014-07-23"></td>
<td><input type="checkbox"></td>
</tr>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-table#1.15.4/dist/bootstrap-table.min.js"></script>
<script>
$(document).ready(function() {
console.log('ready');
$('#my_table_1').find('input[type="date"]').change(function() {
console.log('Table 1.Date was changed. Need to check if table is sorted by column C.If so - call the table sort.');
});
$('#my_table_1').find('select').change(function() {
console.log('Table 1.Selection was changed. Need to check if table is sorted by column B.If so - call the table sort.');
});
$('#my_table_2').find('input[type="date"]').change(function() {
console.log('Table 2.Date was changed. Need to check if table is sorted by column C.If so - call the table sort.');
});
$('#my_table_2').find('select').change(function() {
console.log('Table 2.Selection was changed. Need to check if table is sorted by column B.If so - call the table sort.');
});
});
</script>
</body>
</html>
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.
I have the below html and jquery:
var result = {
"TPS on Desktop": "Green",
'TPS on mobile': 'Amber'
};
for (var key in result) {
$('td[id="checklist"]').each(function() {
if (JSON.stringify($(this).text().trim() === key)) {
$(this).closest('tr').find('td[class="tdcolor"] select option:selected').val(result[key]);
console.log(key + ' : ' + $(this).closest('tr').find('td[class="tdcolor"] select option:selected').val());
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="decisionTable" class="CSSTableGenerator" width="100%" border=1 id="table1">
<tr color="23145">
<th><b>CheckList</b></th>
<th><b>Health</b></th>
</tr>
<tr>
<td id="checklist">
TPS on Desktop
</td>
<td class="tdcolor">
<select class="health">
<option value=0>Select</option>
<option value="1">Green</option>
<option value="2">Amber</option>
<option value="3">Red</option>
</select>
</td>
</tr>
<tr>
<td id="checklist">
TPS on Mobile
</td>
<td class="tdcolor">
<select class="health">
<option value=0>Select</option>
<option value="1">Green</option>
<option value="2">Amber</option>
<option value="3">Red</option>
</select>
</td>
</tr>
</table>
Using the above jquery, I want to change the value of the dropdown in tdcolor td element and the same should reflect on the web page. But, I've not had luck with above code, however console.log output of the selected value says the new value is updated but the same isn't reflected.
Could you please help me in solving this issue? I want to change the color of tdcolor based on the colors passed in result map.
Many Thanks in advance.
Don't use duplicate ids, id value should be unique. Use another attribute like data-id instead.
Also, no need to use nested iterations
var result = {
"TPS on Desktop": "Green",
'TPS on Mobile': 'Amber'
};
$('td[data-id="checklist"]').each(function()
{
var value = result[ $(this).html().trim() ];
$(this).closest('tr').find('td[class="tdcolor"] select option:contains(' + value + ')').prop("selected", true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="decisionTable" class="CSSTableGenerator" width="100%" border=1 id="table1">
<tr color="23145">
<th><b>CheckList</b></th>
<th><b>Health</b></th>
</tr>
<tr>
<td data-id="checklist">
TPS on Desktop
</td>
<td class="tdcolor">
<select class="health">
<option value=0>Select</option>
<option value="1">Green</option>
<option value="2">Amber</option>
<option value="3">Red</option>
</select>
</td>
</tr>
<tr>
<td data-id="checklist">
TPS on Mobile
</td>
<td class="tdcolor">
<select class="health">
<option value=0>Select</option>
<option value="1">Green</option>
<option value="2">Amber</option>
<option value="3">Red</option>
</select>
</td>
</tr>
</table>
$('select').change(function(){
var value = $(this).find("option:selected").text();
var txtVal = $(this).parent().parent().find('#checklist').text();
console.log(txtVal.trim()+':'+value.trim());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="decisionTable" class="CSSTableGenerator" width="100%" border=1 id="table1">
<tr color="23145">
<th><b>CheckList</b></th>
<th><b>Health</b></th>
</tr>
<tr>
<td id="checklist">
TPS on Desktop
</td>
<td class="tdcolor">
<select class="health">
<option value=0>Select</option>
<option value="1">Green</option>
<option value="2">Amber</option>
<option value="3">Red</option>
</select>
</td>
</tr>
<tr>
<td id="checklist">
TPS on Mobile
</td>
<td class="tdcolor">
<select class="health">
<option value=0>Select</option>
<option value="1">Green</option>
<option value="2">Amber</option>
<option value="3">Red</option>
</select>
</td>
</tr>
</table>
Hello Stackoverflow Coders. I downloaded this code online and now wish to add quantity to each product.
what I want is to be able to multiple each product price by the quantity that is whenever a user selects
quantity of products, it will be multiply by the price and displays results each and then sum all the calculations if
depending on the number of product item selected. thanks
source: http://viralpatel.net/blogs/sum-html-textbox-values-using-jquery-javascript/
<html>
<head>
<title>Sum Html Textbox Values using jQuery/JavaScript</title>
<style>
body {
font-family: sans-serif;
}
#summation {
font-size: 18px;
font-weight: bold;
color:#174C68;
}
.txt {
background-color: #FEFFB0;
font-weight: bold;
text-align: right;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<table width="300px" border="1" style="border-collapse:collapse;background-color:#E8DCFF">
<th>no</th>
<th>product</th>
<th>price</th>
<th>quantity</th>
<tr>
<td width="40px">1</td>
<td>Butter</td>
<td><input class="txt" type="text" name="txt" value="500" /></td>
<td><select name="qty" class="txt" />
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select></td>
</tr>
<tr>
<td>2</td>
<td>Cheese</td>
<td><input class="txt" type="text" name="txt" value="250"/></td>
<td><select name="qty" class="txt" />
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select></td>
</tr>
<tr>
<td>3</td>
<td>Eggs</td>
<td><input class="txt" type="text" name="txt" value="400"/></td>
<td><select name="qty" class="txt" />
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select></td>
</tr>
<tr id="summation">
<td> </td>
<td align="right">Sum :</td>
<td align="center"><span id="sum">0</span></td>
</tr>
</table>
<script>
$(document).ready(function(){
//iterate through each textboxes and add keyup
//handler to trigger sum event
$(".txt").each(function() {
$(this).keyup(function(){
calculateSum();
});
});
});
function calculateSum() {
var sum = 0;
//iterate through each textboxes and add the values
$(".txt").each(function() {
//add only if the value is number
if(!isNaN(this.value) && this.value.length!=0) {
sum += parseFloat(this.value);
}
});
//.toFixed() method will roundoff the final sum to 2 decimal places
$("#sum").html(sum.toFixed(2));
}
</script>
</body>
</html>
This requires some minor changes in your html and js like below
<table width="300px" border="1" style="border-collapse:collapse;background-color:#E8DCFF">
<th>no</th>
<th>product</th>
<th>price</th>
<th>quantity</th>
<tr>
<td width="40px">1</td>
<td>Butter</td>
<td><input class="txt" type="text" name="txt" value="500" /></td>
<td>
<select name="qty" class="qty-txt" />
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
</tr>
<tr>
<td>2</td>
<td>Cheese</td>
<td><input class="txt" type="text" name="txt" value="250"/></td>
<td>
<select name="qty" class="qty-txt" />
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
</tr>
<tr>
<td>3</td>
<td>Eggs</td>
<td><input class="txt" type="text" name="txt" value="400"/></td>
<td>
<select name="qty" class="qty-txt" />
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
</tr>
<tr id="summation">
<td> </td>
<td align="right">Sum :</td>
<td align="center"><span id="sum">0</span></td>
</tr>
</table>
JS Code:
$(document).ready(function() {
$(".txt").keyup(function() {
calculateSum();
});
$('.qty-txt').on('change', function() {
calculateSum();
});
});
function calculateSum() {
var sum = 0;
//iterate through each textboxes and add the values
$(".txt").each(function() {
//add only if the value is number
if (!isNaN(this.value) && this.value.length != 0) {
//check cooresponding quantity
var qty = $(this).parents('tr').find('.qty-txt').val();
sum += (parseFloat(this.value) * parseInt(qty, 10));
}
});
//.toFixed() method will roundoff the final sum to 2 decimal places
$("#sum").html(sum.toFixed(2));
}
Link to fiddle.
It would look more like this:
Using the <select> id to find the associated price.
$("select").on("change",function(){
var sum = 0;
//iterate through each select and multiply the values
$("select").each(function(){
thisID = $(this).attr("id").replace("-qty","-price");
sum = sum + (parseInt($(this).val()) * parseInt($("#"+thisID).val()) );
});
//.toFixed() method will roundoff the final sum to 2 decimal places
$("#sum").html(sum.toFixed(2));
});
With as few changes to the HTML:
<table width="300px" border="1" style="border-collapse:collapse;background-color:#E8DCFF">
<th>no</th>
<th>product</th>
<th>price</th>
<th>quantity</th>
<tr>
<td width="40px">1</td>
<td>Butter</td>
<td><input type="text" id="butter-price" class="txt" value="500"></td>
<td><select id="butter-qty" class="txt">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select></td>
</tr>
<tr>
<td>2</td>
<td>Cheese</td>
<td><input type="text" id="cheese-price" class="txt" value="250"></td>
<td><select id="cheese-qty" class="txt">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select></td>
</tr>
<tr>
<td>3</td>
<td>Eggs</td>
<td><input type="text" id="eggs-price" class="txt" value="400"></td>
<td><select id="eggs-qty" class="txt">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select></td>
</tr>
<tr id="summation">
<td> </td>
<td align="right">Sum :</td>
<td align="center"><span id="sum">0</span></td>
</tr>
</table>
See in Fiddle : https://jsfiddle.net/Bes7weB/544vun0r/
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());
}