jQuery - Checkbox checked enables field next to it in table - javascript

I currently have a table with a checkbox and product name on one side, then a quantity input field on the other side. By default, the quantity field is disabled, but I would like to enable it only if its corresponding product is checked.
I'm still new to jQuery and a bit stuck on this, so this is a best I could come up with:
$(document).ready(function(){
//enable quantity field if product is selected
$("input[name='quantity']").prop('disabled', 'true');
$(".product").on('click', function(){
$next = $(this).next();
$next.prop('disable', 'false');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="products">
<thead>
<tr>
<th>Product Name</th>
<th width="150">Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type='checkbox' id='product' class='product' name='product'><label>Product</label></td>
<td><input type='text' placeholder='0' name='quantity' id='quantity'></td>
</tr>
<tr>
<td><input type='checkbox' id='product' class='product' name='product'><label>Product</label></td>
<td><input type='text' placeholder='0' name='quantity' id='quantity'></td>
</tr>
<tr>
<td><input type='checkbox' id='product' class='product' name='product'><label>Product</label></td>
<td><input type='text' placeholder='0' name='quantity' id='quantity'></td>
</tr>
</tbody>
</table>

You have duplicate IDs for input element. IDs must be unique. you can rather use classname and then use class selector to target element by classname.
And your solution is not working because
1) you have wrong selector to target next input element. you need to traverse to closest tr and then find element with name quantity in it.
2) You are setting wrong property. you need to use disabled instead of disable :
$(".product").change(function(){
$next = $(this).closest('tr').find('[name=quantity]');
$next.prop('disabled', this.checked);
});
Working Demo

$(".product").on('change', function(){
$(this).closest('tr').find("input[name='quantity']").prop('disabled',!this.checked);
});

To get what you want you can use this two DOM traversal methods .closest() or .parents()
$(document).ready(function(){
//enable quantity field if product is selected
$("input[name='quantity']").prop('disabled', true);
$(".product").change(function(){
$(this)
.parents('td')
.next()
.find('input')
.prop('disabled', !$(this).is(":checked"));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="products">
<thead>
<tr>
<th>Product Name</th>
<th width="150">Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type='checkbox' class='product' name='product'><label>Product</label></td>
<td><input type='text' placeholder='0' name='quantity'></td>
</tr>
<tr>
<td><input type='checkbox' class='product' name='product'><label>Product</label></td>
<td><input type='text' placeholder='0' name='quantity' ></td>
</tr>
<tr>
<td><input type='checkbox' class='product' name='product'><label>Product</label></td>
<td><input type='text' placeholder='0' name='quantity' ></td>
</tr>
</tbody>
</table>

First, fix your code so that you don't have duplicate IDs. It won't prevent the code from running, but it's not good HTML.
Here's how I would write the script:
$(document).ready(function(){
// Enable quantity field if product is selected
$("input[name='quantity']").prop('disabled', true);
$(".product").on('click', function() {
// Get reference to the text field in the same row with the name "quantity"
var $next = $(this).closest('tr').find('input:text[name="quantity"]');
// Enable the text field if the checkbox is checked, disable it if it is unchecked
$next.prop('disabled', ! $(this).is(':checked'));
});
});
That will enable AND disable it as required.

This approach does what you are looking for.
$(function(){
$(':checkbox').change(function(){
var prodId = $(this).data('productidckbx');
if($(this).is(':checked')) {
$('#prodquantity-' + prodId).prop('disabled', false);
} else {
$('#prodquantity-' + prodId).prop('disabled', true);
}
});
});
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
<table id="products">
<thead>
<tr>
<th>Product Name</th>
<th width="150">Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type='checkbox' id='product-1' name='product' data-productidckbx='1'>
<label>Product</label>
</td>
<td><input type='text' placeholder='0' name='quantity' id='prodquantity-1' disabled="disabled"></td>
</tr>
<tr>
<td><input type='checkbox' id='product-2' class='product' name='product' data-productidckbx='2'>
<label>Product</label>
</td>
<td>
<input type='text' placeholder='0' name='quantity' id='prodquantity-2' disabled="disabled"></td>
</tr>
<tr>
<td>
<input type='checkbox' id='product-3' class='product' name='product' data-productidckbx='3'>
<label>Product</label>
</td>
<td>
<input type='text' placeholder='0' name='quantity' id='prodquantity-3' disabled="disabled">
</td>
</tr>
</tbody>
</table>

Related

How to get reference to another object on other column on same row in a table in Javascript?

I want to set disabled=false for the input box on 3rd column when a user 'check' the checkbox on the 2nd column on Same row
And again disable if user 'uncheck' the checkbox.
<!DOCTYPE html>
<html>
<body>
<p>Check the checkbox to display which type of form element it is.</p>
<table border='1' cellpadding='5'>
<tr>
<td>Item1</td>
<td><input type="checkbox" onclick="myFunction(this)"></td>
<td><input type='number' disabled></td>
<tr>
<tr>
<td>Item2</td>
<td><input type="checkbox" onclick="myFunction(this)"></td>
<td><input type='number' disabled></td>
<tr>
<tr>
<td>Item3</td>
<td><input type="checkbox" onclick="myFunction(this)"></td>
<td><input type='number' disabled></td>
<tr>
</table>
<script>
// function myFunction(item) {
// var x = document.getElementById(item).....how to get a reference to parent;
// x.disabled=false;
// }
</script>
</body>
</html>
I tried with this reference but that have not gave me any solution.
So how can i get the reference to the input box from the checkbox?
I browsed internet but have not get any solution .
You could give the inputs an id attribute for later addressing this element.
function myFunction(item) {
var x = document.getElementById(item);
x.disabled = !x.disabled;
}
<p>Check the checkbox to display which type of form element it is.</p>
<table border="1" cellpadding="5">
<tr>
<td>Item1</td>
<td><input type="checkbox" onclick="myFunction('itemInput1')"></td>
<td><input type="number" id="itemInput1" disabled></td>
</tr>
<tr>
<td>Item2</td>
<td><input type="checkbox" onclick="myFunction('itemInput2')"></td>
<td><input type="number" id="itemInput2" disabled></td>
</tr>
<tr>
<td>Item3</td>
<td><input type="checkbox" onclick="myFunction('itemInput3')"></td>
<td><input type="number" id="itemInput3" disabled></td>
<tr>
</table>
With Element.closest, as #August mentioned and Document.querySelector
function myFunction(element) {
var x = element.closest('tr').querySelector('input[type="number"]');
x.disabled = !x.disabled;
}
<p>Check the checkbox to display which type of form element it is.</p>
<table border="1" cellpadding="5">
<tr>
<td>Item1</td>
<td><input type="checkbox" onclick="myFunction(this)"></td>
<td><input type="number" disabled></td>
</tr>
<tr>
<td>Item2</td>
<td><input type="checkbox" onclick="myFunction(this)"></td>
<td><input type="number" disabled></td>
</tr>
<tr>
<td>Item3</td>
<td><input type="checkbox" onclick="myFunction(this)"></td>
<td><input type="number" disabled></td>
<tr>
</table>
Don't go back to DOM with document.getElementById to get your element, there is no point of doing that.
Try to use the event reference, when calling myFunction the event (onclick) is passed which has property "target".
To understand better do console.log(item); inside the function.
From there, inside your function you could do item.target.closest('tr') to identify the parent of the cell.
<script>
function myFunction(item) {
console.log(item);
var x = item.target.closest('tr');
x.disabled=false;
}
</script>
Documentation for closest() method

Detect html table cell value change

How am I able to detect change in html table on any cell? Currently I can only detect change in one cell, I could repeat the same code for all table cell ID but wondering if there is an efficient way.
Note that I have other inputs in my form and only wish to detect ones relevant to the table below:
Code:
html:
<table id="myTable" border="1" data-mini="true" >
<tbody>
<tr>
<th>Drawing Number</th>
<th>Description</th>
<th>Sheet Number</th>
<th>Issue</th>
</tr>
<tr>
<td><input name="drawing-n-1" id="drawing-n-1" type="text" /></td>
<td><input name="drawing-d-1" type="text" /></td>
<td><input name="drawing-s-1" type="text" /></td>
<td><input name="drawing-i-1" type="text" /></td>
<td><input name="drawing-n-2" id="drawing-n-2" type="text" /></td>
<td><input name="drawing-d-2" type="text" /></td>
<td><input name="drawing-s-2" type="text" /></td>
<td><input name="drawing-i-2" type="text" /></td>
</tr>
</tbody>
</table>
javascript:
var drawing_input = 'drawing-n-1';
$('#'+drawing_input).change(function(e) {
alert("aha");
var data = $('#'+drawing_input).val();
});
With jQuery you needn't be so specific. Just change the selector to listen for all <input>s.
$('input').on('change',
This selector will pick every <input> on the page.
Or if you need to isolate the table's inputs, add the table's id in the selector.
$('#xTable input').on('change'...
This selector will pick every <input> within the table.
Saw that you needed only to listen for inputs with ids. If so then you can use the brackets and ^=:
$("#xTable input[id^='drawing-n-']").on('change'....
This means get any <input> that has an [ id that starts ^= with "drawing-n-" ] which is in a <table> with the id of xTable.
That selector will pick only input#drawing-n-1 and input#drawing-n-2
Demo
$("#xTable input[id^='drawing-n-']").on('change', function(e) {
var data = $(this).val();
console.log(data);
});
<table id="xTable" border="1" data-mini="true">
<tbody>
<tr>
<th>Drawing Number</th>
<th>Description</th>
<th>Sheet Number</th>
<th>Issue</th>
</tr>
<tr>
<td><input name="drawing-n-1" id="drawing-n-1" type="text" /></td>
<td><input name="drawing-d-1" type="text" /></td>
<td><input name="drawing-s-1" type="text" /></td>
<td><input name="drawing-i-1" type="text" /></td>
<td><input name="drawing-n-2" id="drawing-n-2" type="text" /></td>
<td><input name="drawing-d-2" type="text" /></td>
<td><input name="drawing-s-2" type="text" /></td>
<td><input name="drawing-i-2" type="text" /></td>
</tr>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
event delegation
$("tbody").on("change", "input", function () {
console.log(this.name, this.value)
});

Javascript Checkbox add value Textarea

I have a code like these:
var fails = 'fail';
var sucs = 'success';
function showResult(state){
if(state){
document.getElementById("hasil").value=sucs;
}else{
document.getElementById("hasil").value=fails;
}
}
<form>
<table border='1'>
<tr>
<th>TARGET</th>
<th>RESULT</th>
<th>NOTES</th>
</tr>
<tr>
<td><input type='checkbox' name='target' onclick='showResult(this.checked);' /></td>
<td><textarea name='result[]' id='hasil'>fail</textarea></td> <td><textarea name='notes[]' class='form-control'></textarea></td>
</tr>
<tr>
<td><input type='checkbox' name='target' onclick='showResult(this.checked);' /></td>
<td><textarea name='result[]' id='hasil'>fail</textarea></td> <td><textarea name='notes[]' class='form-control'></textarea></td>
</tr>
<tr>
<td><input type='checkbox' name='target' onclick='showResult(this.checked);' /></td>
<td><textarea name='result[]' id='hasil'>fail</textarea></td> <td><textarea name='notes[]' class='form-control'></textarea></td>
</tr>
</form>
I want to create that checkbox, if it's clicked, it will change textarea on that row to success. If I uncheck, it will change back to fail. Can anyone help me?
it only works for the first row.
As #epascarello said, because ids are singular. so you need to select the parent tr, find the text area and set the value.
You can do in this way.
$('[type=checkbox]').change(function() {
if ($(this).is(":checked")) {
var $row = $(this).parents('tr');
$row.find('textarea[name="result[]"]').text("sucess");
} else {
var $row = $(this).parents('tr');
$row.find('textarea[name="result[]"]').text("fail");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<table border='1'>
<tr>
<th>TARGET</th>
<th>RESULT</th>
<th>NOTES</th>
</tr>
<tr>
<td>
<input type='checkbox' name='target' />
</td>
<td>
<textarea name='result[]' id='hasil'>fail</textarea>
</td>
<td>
<textarea name='notes[]' class='form-control'></textarea>
</td>
</tr>
<tr>
<td>
<input type='checkbox' name='target' />
</td>
<td>
<textarea name='result[]' id='hasil'>fail</textarea>
</td>
<td>
<textarea name='notes[]' class='form-control'></textarea>
</td>
</tr>
<tr>
<td>
<input type='checkbox' name='target' />
</td>
<td>
<textarea name='result[]' id='hasil'>fail</textarea>
</td>
<td>
<textarea name='notes[]' class='form-control'></textarea>
</td>
</tr>
</form>

jQuery not working for select only one checkbox

I have built a table with four rows and eight columns, each with a checkbox. I want only one checkbox to be allowed to check per row. I am trying to use jquery to do this. Logically, it works in jsfiddle but it does not work locally for me. I did use an alert first to make sure jQuery is being loaded first.
Here is my code below. The problem is, I can still check multiple checkboxes per row when I should only be allowed to check one:
<body>
<h2>Checkbox Test</h2>
<script type="text/javascript" src="http://localhost/mytesting/jquery-2.1.4.js"></script>
<script type="text/javascript">
function onLoadAlert() {
alert('Sup');
}
$(document).ready(onLoadAlert);
</script>
<script type="text/javascript">
$('input[type="checkbox"]').on('change', function() {
// uncheck sibling checkboxes (checkboxes on the same row)
$(this).siblings().prop('checked', false);
// uncheck checkboxes in the same column
$('div').find('input[type="checkbox"]:eq(' + $(this).index() + ')').not(this).prop('checked', false);
});
</script>
<table border="1">
<tbody>
<tr>
<th><b>COST</b></th>
<th colspan="3">Reduced Cost</th>
<th>Neutral</th>
<th colspan="3">Increased Cost</th>
<th>Don't Know</th>
</tr>
<tr>
<th></th>
<th>High</th>
<th>Medium</th>
<th>Low</th>
<th>No effect</th>
<th>Low</th>
<th>Medium</th>
<th>High</th>
<th></th>
</tr>
<tr>
<td>Capital cost</td>
<div>
<td><input type="checkbox" id="matrix1" value="1"></td>
<td><input type="checkbox" id="matrix2" value="1"></td>
<td><input type="checkbox" id="matrix3" value="1"></td>
<td><input type="checkbox" id="matrix4" value="1"></td>
<td><input type="checkbox" id="matrix5" value="1"></td>
<td><input type="checkbox" id="matrix6" value="1"></td>
<td><input type="checkbox" id="matrix7" value="1"></td>
<td><input type="checkbox" id="matrix8" value="1"></td>
</div>
</tr>
</tbody>
Your input elements are not siblings, because they have different parents – the td elements:
<td><input type="checkbox" id="matrix1" value="1"></td>
<td><input type="checkbox" id="matrix2" value="1"></td>
That's why this doesn't work:
$(this).siblings().prop('checked', false);
Instead, do this:
$(this).closest('tr').find('input').not(this).prop('checked', false);
Fiddle 1
Alternatively, you could use radio buttons having the same name:
<td><input type="radio" name="matrix"></td>
<td><input type="radio" name="matrix"></td>
<td><input type="radio" name="matrix"></td>
That way, you wouldn't need any JavaScript.
Fiddle 2
Would it not be a lot simpler to just do this
var checkBoxes = $('input[type=checkbox]');
$('table').on('click', 'input[type=checkbox]', function () {
checkBoxes.prop('checked', false);
$(this).prop('checked', true);
});
And you have a div inside a tr.

Jquery adding 3 input tags to a table

EDIT:
$(document).ready(function(){
$("#add").click(function(){
var currentValue = parseInt($("#hide").val())+1;
$("#Recipe_table").append("<tr><td><input type='text' name='name[]'/></td><td><input type='text' name='quantity[]'/></td><td><input type='text' name='measure[]'/></td></tr>");
$("#hide").val(currentValue);});
$("#remove").click(function(){
var currentValue = parseInt($("#hide").val())-1;
if ($("table tr").length != 1) {
$('#Recipe_table tr:last').remove();}});
});
Add and Deletion works.
My question is, I dont want to delete all rows or ill end up deleting my headers aswell until there was no table in the first place.
Secondly, The value doesnt decrement when i remove, i simply copied above since it works and adds the value of the hidden field.
Plus, Is there a better way of setting the value, The above approach just increments without hesitation like for example.
Plus how i prevent it from not reverting back to its original value when i submit and back one page.
I don't think the solution you got for counting the number of <td> is a good solution,
use
numberOfTds = $("#table").children('tr').children('td').length;
You have to close your elements
<table id='table'>
<th colspan='3'> Table</th>
<tr>
<td><input type='text' name='name1[]'/></td>
<td><input type='text' name='name2[]'/></td>
<td><input type='text' name='name3[]'/></td>
</tr>
</table>
You haven't closed your cell or table tags. Here's the corrected html. I had to assume where you wanted your final input tag...
<html>
<body>
<table id='table'>
<th colspan='3'> Table</th>
<tr>
<td><input type='text' name='name1[]'/></td>
<td><input type='text' name='name2[]'/></td>
<td><input type='text' name='name3[]'/></td>
</tr>
</table>
<input type='hidden' id='put int on how many rows added'/>
</body>
</html>
You look like a beginner to HTML, CSS and JS(JQuery) so a few rules. Structure your code like so:
<table id='table'>
<th colspan='3'>Table</th>
<tr>
<td><input type='text' name='name1'/></td>
<td><input type='text' name='name2'/></td>
<td><input type='text' name='name3'/></td>
</tr>
</table>
<input type='hidden' name="name4" value="The Text you Want to Store"/>
..but you still need to learn HTML before you can effectively use JS. With JQuery to can get the values of the table elements using:
$('[name="name1"]').val();
and set the value using:
$('[name="name1"]').val("NewValue");
Look at the website w3schools.com for HTML and JS help and jquery.com for learning jquery
Close your </td> tags
<table id='table'>
<th colspan='3'> Table</th>
<tr><td><input type='text' name='name1[]'/></td>
<td><input type='text' name='name2[]'/></td>
<td><input type='text' name='name3[]'/></td>
</tr>
Edit: this will also work
<table id='table'>
<th colspan='3'> Table</th>
<tr><td/><input type='text' name='name1[]'/>
<td/><input type='text' name='name2[]'/>
<td/><input type='text' name='name3[]'/>
</tr>
This is an example how the rows can be added dynamically
HTML
<table id='table'>
<th colspan='3'> Table</th>
<tr><td><input type='text' name='name1[]'/></td>
<td><input type='text' name='name2[]'/></td>
<td><input type='text' name='name3[]'/></td>
</tr>
</table>
<input type="button" id="btn" value="add"/>
Script
$(document).ready(function(){
$("#btn").click(function(){
$("#table").append(" <tr><td><input type='text' name='name1[]'/></td><td><input type='text' name='name2[]'/></td> <td><input type='text' name='name3[]'/></td></tr>");
});
});
Demo
Edit
<input type='hidden' id='hide'/>
var currentValue= parseInt($("#hide").val())+1;;
$("#hide").val(currentValue);

Categories