How to assign a <input type="text" value=""> to a <input type="checkbox" value="">, without hardcoding a numerical value to the checkbox? Then calculating the value total based on what is checked?
For example, I have a form that is asking for the name of an item and its cost. Then when I click submit it adds the data into a table. I want to be able to check the checkbox and have it call on the value from the cost I entered. Is it possible to do something like <input type="checkbox" value="cost"> rather than assigning <input type="checkbox" value="10">?
The form is purely for visualization only. My actual code can post data and is more detailed with modals and what not.
$(document).on("change", ".check", function() {
var checked = $('.check:checked'),
sum = checked.get().reduce(function(prev, item) {
return prev + parseFloat(item.getAttribute('value'));
}, 0);
$('.addTotal').text(sum.toFixed(2));
});
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<form action="">
<div class="form-group">
<label for="name">Item name: </label>
<input class="form-control" type="text" name="itemname" placeholder="Item Name" />
</div>
<div class="form-group">
<label for="name">Cost: </label>
<input class="form-control" name="cost" placeholder="Cost (insert number only)" />
</div>
<button type="submit">Submit</button>
<button type="submit">Edit</button>
</form>
<br>
<br>
<table class="table table-hover table-sm bookstable">
<thead>
<tr>
<th></th>
<th>Item</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="check" name="" value="cost" /></td>
<!-- <td><input type="checkbox" class="check" name="" value="10"/></td> -->
<td>Item1</td>
<td>$10</td>
</tr>
<tr>
<td><input type="checkbox" class="check" name="" value="" /></td>
<!-- <td><input type="checkbox" class="check" name="" value="30"/></td> -->
<td>Item2</td>
<td>$30</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">
<div>Total $: <span class="addTotal"></span></div>
</td>
</tr>
</tfoot>
</table>
You can do this using jQuery's .parent() method.
jQuery Documentation
Get the ancestors of each element in the current set of matched elements, optionally filtered by a selector. The .parent() method is similar to the .parents() method.
Running Code
var total = 0;
$(document).on("change", ".check", function() {
var cost = parseFloat($(this).parent().parent().find(".cost").text().replace("$", ""));
if ($(this).is(":checked")) {
total += cost;
} else {
total += -cost;
}
$(".addTotal").text(total);
});
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<form action="">
<div class="form-group">
<label for="name">Item name: </label>
<input class="form-control" type="text" name="itemname" placeholder="Item Name" />
</div>
<div class="form-group">
<label for="name">Cost: </label>
<input class="form-control" name="cost" placeholder="Cost (insert number only)" />
</div>
<button type="submit">Submit</button>
<button type="submit">Edit</button>
</form>
<br>
<br>
<table class="table table-hover table-sm bookstable">
<thead>
<tr>
<th></th>
<th>Item</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="check" name="" value="cost" /></td>
<!-- <td><input type="checkbox" class="check" name="" value="10"/></td> -->
<td>Item1</td>
<td class="cost">$10</td>
</tr>
<tr>
<td><input type="checkbox" class="check" name="" value="" /></td>
<!-- <td><input type="checkbox" class="check" name="" value="30"/></td> -->
<td>Item2</td>
<td class="cost">$30</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">
<div>Total $: <span class="addTotal"></span></div>
</td>
</tr>
</tfoot>
</table>
Related
The below table I want to change the input value for first row become value="1" onclick the copy button.
This value="1" when I entered manually and the value should repeat to the entire row when I click the copy button.
Note: I couldn't found any script regarding this to add the tried code.
Kindly comment below for further clarification.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control" value="1"> Copy</td>
<td>
<input type="text" class="form-control" value="11">
</td>
<td>
<input type="text" class="form-control" value="11">
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control" value="2"> Copy</td>
<td>
<input type="text" class="form-control" value="2">
</td>
<td>
<input type="text" class="form-control" value="2">
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control" value="3"> Copy</td>
<td>
<input type="text" class="form-control" value="3">
</td>
<td>
<input type="text" class="form-control" value="3">
</td>
</tr>
</tbody>
</table>
Copy this first value to the rest:
$(function() {
$(".btn-success").on("click", function(e) {
e.preventDefault(); // stop the link
var $inputs = $(this).closest("tr").find("input");
var val = $inputs.eq(0).val(); // take the first
$inputs.val(val);
})
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control" value="1"> Copy</td>
<td>
<input type="text" class="form-control" value="11">
</td>
<td>
<input type="text" class="form-control" value="11">
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control" value="2"> Copy</td>
<td>
<input type="text" class="form-control" value="2">
</td>
<td>
<input type="text" class="form-control" value="2">
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control" value="3"> Copy</td>
<td>
<input type="text" class="form-control" value="3">
</td>
<td>
<input type="text" class="form-control" value="3">
</td>
</tr>
</tbody>
</table>
You could do it like this:
$('.table a.btn').click(function() {
var inputVal = $(this).prev().val();
var td = $(this).closest("td");
var sib = td.siblings().find("input");
sib.val(inputVal)
});
This will take the value from the input associated with the link/button and put that value into the other input's on the same tr
Demo
$('.table a.btn').click(function() {
var inputVal = $(this).prev().val();
var td = $(this).closest("td");
var sib = td.siblings().find("input");
sib.val(inputVal)
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control" value="1"> Copy</td>
<td>
<input type="text" class="form-control" value="11">
</td>
<td>
<input type="text" class="form-control" value="11">
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control" value="2"> Copy</td>
<td>
<input type="text" class="form-control" value="2">
</td>
<td>
<input type="text" class="form-control" value="2">
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control" value="3"> Copy</td>
<td>
<input type="text" class="form-control" value="3">
</td>
<td>
<input type="text" class="form-control" value="3">
</td>
</tr>
</tbody>
</table>
You get the value of input using prev() inside click handler of the copy button.
Find parent td using closest and then get all its sibling tds. find input inside sibling tds and append first input value to the input existing values
$(document).ready(function(){
$('a.btn.btn-success').on('click', function(){
var val = $(this).prev('input').val();
var $td = $(this).closest('td');
var $siblings = $td.siblings();
//to append values
/*$siblings.find('input.form-control').each(function(){
$(this).val($(this).val() + val);
});*/
// to replace values
$siblings.find('input.form-control').val(val);
});
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control" value="1"> Copy</td>
<td>
<input type="text" class="form-control" value="11">
</td>
<td>
<input type="text" class="form-control" value="11">
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control" value="2"> Copy</td>
<td>
<input type="text" class="form-control" value="2">
</td>
<td>
<input type="text" class="form-control" value="2">
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control" value="3"> Copy</td>
<td>
<input type="text" class="form-control" value="3">
</td>
<td>
<input type="text" class="form-control" value="3">
</td>
</tr>
</tbody>
</table>
This JS code could be helpful.
jQuery(document).ready(function($) {
jQuery('.table a.btn').click(function(event) {
event.preventDefault();
var fieldVal = jQuery(this).siblings('.form-control').val();
jQuery(this).parent('td').siblings('td').children('.form-control').val(fieldVal);
});
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control" value="1"> Copy</td>
<td>
<input type="text" class="form-control" value="11">
</td>
<td>
<input type="text" class="form-control" value="11">
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control" value="2"> Copy</td>
<td>
<input type="text" class="form-control" value="2">
</td>
<td>
<input type="text" class="form-control" value="2">
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control" value="3"> Copy</td>
<td>
<input type="text" class="form-control" value="3">
</td>
<td>
<input type="text" class="form-control" value="3">
</td>
</tr>
</tbody>
</table>
In order to answer the question "Is it possible to place the button outside?":
Here is a version with the button in front of all the input fields:
Starting from the button itself (this) you look for the closest parent container of type td, then find all its siblings and their children of type input. The result is a jquery object with all the inputs of one table row. Then do the copying of values from the first (flds.eq(0)) to the rest of them all (flds.slice(1)).
$('.table a.btn').click(function() {
var flds = $(this).closest('td').siblings().find('input');
flds.slice(1).val(flds.eq(0).val());
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<table class="table"><thead><tr>
<th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th>
</tr></thead><tbody><tr><td>
Copy
</td><td>
<input type="text" class="form-control" value="1">
</td><td>
<input type="text" class="form-control" value="11">
</td><td>
<input type="text" class="form-control" value="11">
</td></tr><tr><td>
Copy
</td><td>
<input type="text" class="form-control" value="2">
</td><td>
<input type="text" class="form-control" value="2">
</td><td>
<input type="text" class="form-control" value="2">
</td></tr><tr><td>
Copy
</td><td>
<input type="text" class="form-control" value="3">
</td><td>
<input type="text" class="form-control" value="3">
</td><td>
<input type="text" class="form-control" value="3">
</td></tr></tbody></table>
I'm working on an application that has 2 tables on the left side and a row on the right side, on the table when the user selects any number, the values are dynamically added on the rows on the right side.
This works as expected but I'm trying to add CSS where if the user hovers on the input on the row (on the right side) it changes to green and the corresponding value/td on the table background color immediately changes to green.
Here is my attempt:
// window.onload = function () { alert("Js working!") };
let currentInput = 1;
let bonusInput = 1;
$("#table1").on('click', function(event) {
let num = event.target.textContent;
$("#inp" + currentInput++).attr("value", num);
});
// bonus input:
$("#table2").on('click', function(event) {
let bon = event.target.textContent;
$("#bonus" + bonusInput++).attr("value", bon);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--Table on the left -->
<div style="width: 140px; float: left;">
<table id="table1">
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
</tr>
</tbody>
</table>
</div>
<!-- Rows on the right-->
<!--2nd table-->
<div style="width: 140px; float: left; margin-left: 12px;">
<table id="table2">
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
</tr>
</tbody>
</table>
</div>
<!-- Rows on the right-->
<!-- Input values to populate dynamically-->
<div style="width: 600px; float: right;">
<div>
<input type="text" size="4" id="inp1" value="">
<input type="text" size="4" id="inp2" value="">
<input type="text" size="4" id="inp3" value="">
<input type="text" size="4" id="inp4" value="">
<input type="text" size="4" id="inp5" value=""> +
<input style="margin-left: 20px;" type="text" size="4" id="bonus1" value="">
</div>
<div style="margin-top: 5px;">
<input type="text" size="4" id="inp7" value="">
<input type="text" size="4" id="inp8" value="">
<input type="text" size="4" id="inp9" value="">
<input type="text" size="4" id="inp10" value="">
<input type="text" size="4" id="inp11" value=""> +
<input style="margin-left: 20px;" type="text" size="4" id="bonus2" value="">
</div>
</div>
Here is the screenshot of the result:
You could use JavaScript instead:
// window.onload = function () { alert("Js working!") };
let currentInput = 1;
let bonusInput = 1;
$("#table1").on('click', function(event) {
let num = event.target.textContent;
$("#inp" + currentInput++).attr("value", num);
});
//Bonus input
$("#table2").on('click', function(event) {
let bon = event.target.textContent;
$("#bonus" + bonusInput++).attr("value", bon);
});
$('#result input').hover(function() {
var key = parseInt(this.id.replace(/(inp|bonus)/gm, ''), 10);
var dir = this.id.indexOf('bonus') >= 0 ? '1' : '2';
var row = (key > 6 || this.id == 'bonus2') ? 1 : 0;
var col = key % 6;
$('td').attr('style', '');
$('input').attr('style', '');
var table = '1';
if (dir == 1) table = '2';
var compare_key = this.value;
$('#table' + table + ' td').each(function() {
if (this.innerText.trim() == compare_key) {
$(this).css('background-color', 'green').css('color', 'white');
}
});
$(this).css('background-color', 'green').css('color', 'white');
});
* {
font-size: 15px;
}
td {
text-align: center;
border: 2px solid red;
line-height: 3.5rem;
width: 200px;
cursor: pointer;
}
td:hover {
background-color: green;
color: white;
}
#table1 td {}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Draggable Bootstrap nav-tabs with jQuery UI</title>
<meta name="description" content="Draggable Bootstrap nav-tabs with jQuery UI">
<!-- include bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<!--Table on the left -->
<div style="width: 140px; float: left;">
<table id="table1">
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
</tr>
</tbody>
</table>
</div>
<!-- Rows on the right-->
<!--2nd table-->
<div style="width: 140px; float: left; margin-left: 12px;">
<table id="table2">
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
</tr>
</tbody>
</table>
</div>
<!-- Rows on the right-->
<!-- Input values to populate dynamically-->
<div id="result" style="width: 600px; float: right;">
<div>
<input type="text" size="4" id="inp1" value="">
<input type="text" size="4" id="inp2" value="">
<input type="text" size="4" id="inp3" value="">
<input type="text" size="4" id="inp4" value="">
<input type="text" size="4" id="inp5" value=""> +
<input style="margin-left: 20px;" type="text" size="4" id="bonus1" value="">
</div>
<div style="margin-top: 5px;">
<input type="text" size="4" id="inp7" value="">
<input type="text" size="4" id="inp8" value="">
<input type="text" size="4" id="inp9" value="">
<input type="text" size="4" id="inp10" value="">
<input type="text" size="4" id="inp11" value=""> +
<input style="margin-left: 20px;" type="text" size="4" id="bonus2" value="">
</div>
</div>
<!-- include jQuery -->
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<!-- include jQuery UI -->
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<!-- include bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
</html>
I'm sure there is more efficient ways to do this. I've just played around with classes. You can try the code snippet.
// window.onload = function () { alert("Js working!") };
let currentInput = 1;
let bonusInput = 1;
$("#table1").on('click', function(event) {
let num = event.target.textContent;
$("#inp" + currentInput++).attr("value", num);
});
//Bonus input
$("#table2").on('click', function(event) {
let bon = event.target.textContent;
$("#bonus" + bonusInput++).attr("value", bon);
});
$(".leftCell").mouseover(function() {
var val = $(this).val();
if (val != "") {
var cell = $('#table1').find('.' + val)
cell.css("background-color", "green")
}
});
$(".leftCell").mouseout(function() {
var val = $(this).val();
if (val != "") {
var cell = $('#table1').find('.' + val)
cell.css("background-color", "white")
}
});
$(".rightCell").mouseover(function() {
var val = $(this).val();
if (val != "") {
var cell = $('#table2').find('.' + val)
cell.css("background-color", "green")
}
});
$(".rightCell").mouseout(function() {
var val = $(this).val();
if (val != "") {
var cell = $('#table2').find('.' + val)
cell.css("background-color", "white")
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="width: 140px; float: left;">
<table id="table1">
<tbody>
<tr>
<td class="1">1</td>
<td class="2">2</td>
</tr>
<tr>
<td class="3">3</td>
<td class="4">4</td>
</tr>
<tr>
<td class="5">5</td>
<td class="6">6</td>
</tr>
<tr>
<td class="7">7</td>
<td class="8">8</td>
</tr>
<tr>
<td class="9">9</td>
<td class="10">10</td>
</tr>
</tbody>
</table>
</div>
<!-- Rows on the right-->
<!--2nd table-->
<div style="width: 140px; float: left; margin-left: 12px;">
<table id="table2">
<tbody>
<tr>
<td class="1">1</td>
<td class="2">2</td>
</tr>
<tr>
<td class="3">3</td>
<td class="4">4</td>
</tr>
<tr>
<td class="5">5</td>
<td class="6">6</td>
</tr>
<tr>
<td class="7">7</td>
<td class="8">8</td>
</tr>
<tr>
<td class="9">9</td>
<td class="10">10</td>
</tr>
</tbody>
</table>
</div>
<!-- Rows on the right-->
<!-- Input values to populate dynamically-->
<div style="width: 600px; float: right;">
<div>
<input type="text" class="leftCell" size="4" id="inp1" value="">
<input type="text" class="leftCell" size="4" id="inp2" value="">
<input type="text" class="leftCell" size="4" id="inp3" value="">
<input type="text" class="leftCell" size="4" id="inp4" value="">
<input type="text" class="leftCell" size="4" id="inp5" value=""> +
<input style="margin-left: 20px;" type="text" size="4" id="bonus1" class="rightCell" value="">
</div>
<div style="margin-top: 5px;">
<input type="text" class="leftCell" size="4" id="inp7" value="">
<input type="text" class="leftCell" size="4" id="inp8" value="">
<input type="text" class="leftCell" size="4" id="inp9" value="">
<input type="text" class="leftCell" size="4" id="inp10" value="">
<input type="text" class="leftCell" size="4" id="inp11" value=""> +
<input style="margin-left: 20px;" type="text" size="4" id="bonus2" class="rightCell" value="">
</div>
</div>
Im having trouble getting data from a html table all the other tutorials have text inside the td tag but I have a textfield and a textarea which I want to get the value of
I have tried
<script>
$(document).ready(function() {
//click on table body
$(".rubric_table tbody tr").on("click", function() {
var tableData = $(this).children("td").map(function() {
return $.trim($(this).text());
}).get();
var td = tableData[0]+'*'+tableData[1]+'*'+tableData[2]+'*'+tableData[3]+'*'+tableData[4];
})
})
</script>
And this is my table
<table class="rubric_table" id="rubricTable">
<thead>
<tr class="header-row">
<th>
<span>Criteria</span>
</th>
<th class="grading_scale">
<span>Grading scale</span>
</th>
<th style="width: 60px;">
<span>Pts</span>
</th>
</tr>
<tbody></tbody>
<tbody>
<tr class="rubric_row">
<td class="rubric_row_title">
<div class="rubric_row_relative">
<input type="text" placeholder="Add Title" class="rubric_title no_border_input">
<div class="rubric_row_details">
<textarea placeholder="Add Description" style="overflow: hidden; height: 32px;" class="no_border_input_textarea"></textarea>
</div>
</div>
</td>
<td>
<table class="grading-table">
<tbody>
<tr>
<td class="grading-wrapper">
<div class="grading-item first_grading_item">
<input type="text" class="no_border_input" value="4">
<textarea class="no_border_input_textarea">Excellent</textarea>
</div>
</td>
<td class="grading-wrapper">
<div class="grading-item">
<input type="text" class="no_border_input" value="4">
<textarea class="no_border_input_textarea">Excellent</textarea>
</div>
</td>
<td class="grading-wrapper">
<div class="grading-item">
<input type="text" class="no_border_input" value="4">
<textarea class="no_border_input_textarea">Excellent</textarea>
</div>
</td>
<td class="grading-wrapper">
<div class="grading-item">
<input type="text" class="no_border_input" value="4">
<textarea class="no_border_input_textarea">Excellent</textarea>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td class="rubric-row-pts">
<div class="rubric_points">
<input type="text" class="no_border_input" value="40">
</div>
</td>
</tr>
</tbody>
</thead>
</table>
I expected that my code would alert the values of the textfield and textarea but it doesn't.
Thanks
If you wan to get the values of the input, you can:
$(".rubric_table>tbody>tr") you have to use this selector in
adding click event. You have a table inside the table (I dont think
is ideal). To make sure you are only adding event on the direct tr
of .rubric_table
You have to loop thru each input of th and get their values.
$(".rubric_table>tbody>tr").on("click", function() {
var tableData = $(this).children("td").map(function() {
return $(this).find('input').map(function() {
return this.value;
}).get();
}).get();
console.log(tableData);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="rubric_table" id="rubricTable">
<thead>
<tr class="header-row">
<th>
<span>Criteria</span>
</th>
<th class="grading_scale">
<span>Grading scale</span>
</th>
<th style="width: 60px;">
<span>Pts</span>
</th>
</tr>
<tbody></tbody>
<tbody>
<tr class="rubric_row">
<td class="rubric_row_title">
<div class="rubric_row_relative">
<input type="text" placeholder="Add Title" class="rubric_title no_border_input">
<div class="rubric_row_details">
<textarea placeholder="Add Description" style="overflow: hidden; height: 32px;" class="no_border_input_textarea"></textarea>
</div>
</div>
</td>
<td>
<table class="grading-table">
<tbody>
<tr>
<td class="grading-wrapper">
<div class="grading-item first_grading_item">
<input type="text" class="no_border_input" value="4">
<textarea class="no_border_input_textarea">Excellent</textarea>
</div>
</td>
<td class="grading-wrapper">
<div class="grading-item">
<input type="text" class="no_border_input" value="4">
<textarea class="no_border_input_textarea">Excellent</textarea>
</div>
</td>
<td class="grading-wrapper">
<div class="grading-item">
<input type="text" class="no_border_input" value="4">
<textarea class="no_border_input_textarea">Excellent</textarea>
</div>
</td>
<td class="grading-wrapper">
<div class="grading-item">
<input type="text" class="no_border_input" value="4">
<textarea class="no_border_input_textarea">Excellent</textarea>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td class="rubric-row-pts">
<div class="rubric_points">
<input type="text" class="no_border_input" value="40">
</div>
</td>
</tr>
</tbody>
</thead>
</table>
I want to view all the rows which are checked on m alert box whenever i press the button but i am doing something wrong here
Javascript for Adding rows
$("#add").click(function () {
$("#myTable").last().append("<tr><td width='5%'><input type='checkbox'>
</td><td><input type='text' id='1stid'>
</td><td><input type='text' id='2ndid'></td><td><input type='text'id='3rdid'></td></tr>");
});
I also did this but now the alert box is empty
$("#view").click(function () {
$('input[type="checkbox"]:checked');
var n=$(this).closest('tr').text();
alert(n);
});
My HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" href="Project.css">
</head>
<body>
<div class="container">
<button id="add">Add</button> <button id="deleteLast">Remove </button> <button id="delete"> Remove All</button> <button id="view">View</button>
<table class="table table-bordered" id="myTable">
<tr>
<th width="5%"></th>
<th>First name</th>
<th>Last name</th>
<th>Profession</th>
</tr>
</table>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="Project.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
Since the $("input[type='checkbox']:checked") will return an array/list of elements, use jQuery's each method, $("input[type='checkbox']:checked").each(...) to iterate through the result
$("#view").click(function() {
$("input[type='checkbox']:checked").each(function(index) {
$('td input[type=text]', $(this).closest('tr')).each(function(index2) {
alert( $(this).val() );
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="test">
<td width='5%'>
<input type='checkbox'>
</td>
<td>
<input type='text' id='11stid' value="1 first">
</td>
<td>
<input type='text' id='12ndid' value="1 second">
</td>
<td>
<input type='text' id='13rdid' value="1 third">
</td>
</tr>
<tr>
<td width='5%'>
<input type='checkbox'>
</td>
<td>
<input type='text' id='21stid' value="2 first">
</td>
<td>
<input type='text' id='22ndid' value="2 second">
</td>
<td>
<input type='text' id='23rdid' value="2 third">
</td>
</tr>
<tr>
<td width='5%'>
<input type='checkbox'>
</td>
<td>
<input type='text' id='31stid' value="3 first">
</td>
<td>
<input type='text' id='32ndid' value="3 second">
</td>
<td>
<input type='text' id='33rdid' value="3 third">
</td>
</tr>
</table>
<button id="view">Checked</button>
I want to show/Hide the div on the basis of selection of checkbox values from the list.
Here is what I tried:-
function valueChanged() {
if ($('#ddlStatus_1').is(":checked"))
$("#divExpense").hide();
else
$("#divExpense").show();
}
and the html is
<div style="overflow-y: scroll; width: 320px; height: 100px;">
<table id="Table1" name="Status" onchange="valueChanged()">
<tr>
<td>
<input id="ddlStatus_0" type="checkbox" name="ddlStatus$0" value="20" /><label for="ddlStatus_0">Agreement</label>
</td>
</tr>
<tr>
<td>
<input id="ddlStatus_1" type="checkbox" name="ddlStatus$1" value="30" /><label for="ddlStatus_1">Registration
/ Conveyance Deed</label>
</td>
</tr>
<tr>
<td>
<input id="ddlStatus_2" type="checkbox" name="ddlStatus$2" value="40" /><label for="ddlStatus_2">7/12
Transfer on Name</label>
</td>
</tr>
<tr>
<td>
<input id="ddlStatus_3" type="checkbox" name="ddlStatus$3" value="50" /><label for="ddlStatus_3">Sold</label>
</td>
</tr>
<tr>
<td>
<input id="ddlStatus_4" type="checkbox" name="ddlStatus$4" value="60" /><label for="ddlStatus_4">Cancelled</label>
</td>
</tr>
</table>
</div>
<br />
<div id="div1">
<table cellpadding="0" cellspacing="2" width="100%">
<tr>
<td class="otab">
This is test Expense Information :
</td>
</tr>
</table>
</div>
<div id="divPayment">
<table cellpadding="0" cellspacing="2" width="100%">
<tr>
<td class="otab">
This is test Payment Information :
</td>
</tr>
</table>
</div>
But it is not working for me.
Add the change event to #ddlStatus_1 instead of table like following.
$('#ddlStatus_1').change(function() {
$("#divExpense").toggle(!this.checked);
})
Here is a running version of the code in my comment. You do not want to add the change to the table tag. If you need all checkboxes in the form to toggle something, then add a class to them and use data-attributes to see what to toggle
Note I changed div1 to divExpense
$(function() {
$('#ddlStatus_1').on("click", function() {
$("#divExpense").toggle(!this.checked);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<div style="overflow-y: scroll; width: 320px; height: 100px;">
<table id="Table1" name="Status">
<tr>
<td>
<input id="ddlStatus_0" type="checkbox" name="ddlStatus$0" value="20" />
<label for="ddlStatus_0">Agreement</label>
</td>
</tr>
<tr>
<td>
<input id="ddlStatus_1" type="checkbox" name="ddlStatus$1" value="30" />
<label for="ddlStatus_1">Registration / Conveyance Deed</label>
</td>
</tr>
<tr>
<td>
<input id="ddlStatus_2" type="checkbox" name="ddlStatus$2" value="40" />
<label for="ddlStatus_2">7/12 Transfer on Name</label>
</td>
</tr>
<tr>
<td>
<input id="ddlStatus_3" type="checkbox" name="ddlStatus$3" value="50" />
<label for="ddlStatus_3">Sold</label>
</td>
</tr>
<tr>
<td>
<input id="ddlStatus_4" type="checkbox" name="ddlStatus$4" value="60" />
<label for="ddlStatus_4">Cancelled</label>
</td>
</tr>
</table>
</div>
<br />
<div id="divExpense">
<table cellpadding="0" cellspacing="2" width="100%">
<tr>
<td class="otab">
This is test Expense Information :
</td>
</tr>
</table>
</div>
<div id="divPayment">
<table cellpadding="0" cellspacing="2" width="100%">
<tr>
<td class="otab">
This is test Payment Information :
</td>
</tr>
</table>
</div>