If I have a table with 2 columns, a textfield and a checkbox... Each column has a class, and multiple rows in it. I don't know how to work this out:
If the textfield's number larger than 10, that row's checkbox automatically change from unchecked to checked.
Any ideas?
ok .. you can get the value of the input .. and in every keystroke check if the entered number is greater than 10 then loop through all the checkboxes and check them like that
$(".textfield").on("input", function () {
if (+$(this).val() > 10) {
$(".checkboxes").prop("checked", true)
} else {
$(".checkboxes").prop("checked", false)
}
})
you can try this and tell me if something went wrong
note : I added (+) before the $(this).val() to make sure the value is converted from string to number
edit: if you want to make an input for every row so this will not work!
you can make a specific class for every row and put the same class as a data attr in every input .. and then you can directly access to the input specific row checkboxes like that
$(".textfields").on("input", function () {
if (+$(this).val() > 10) {
$(`.${$(this).attr("data-id")} > td >
checkboxes`).prop("checked", true)
} else {
$(`.${$(this).attr("data-id")} > td >
checkboxes`).prop("checked", false)
}
})
I hope this works .. I know It's a little bit confusing .. by understanding the main idea you solve it with multible solutions
If you can't understand this let me know
$('.input').on('blur', function() {
if(parseInt($(this).val()) > 10){
$(this).parent().closest('tr').find('.checkbox').attr("checked","checked");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="text" class="input">
</td>
<td>
<input type="checkbox" class="checkbox">
</td>
</tr>
<tr>
<td>
<input type="text" class="input">
</td>
<td>
<input type="checkbox" class="checkbox">
</td>
</tr>
<tr>
<td>
<input type="text" class="input">
</td>
<td>
<input type="checkbox" class="checkbox">
</td>
</tr>
<tr>
<td>
<input type="text" class="input">
</td>
<td>
<input type="checkbox" class="checkbox">
</td>
</tr>
</table>
You need use blur of jQuery, it means when the user looses the focus from input/textfield then implement the functionality of checkbox to be checked, this is for single input and checkbox, if you want to achieve it for multiple row with column then see the above snippet.
$('#input_field').on('blur', function() {
if(parseInt($(this).val()) > 10){
$('#checkbox').attr("checked","checked");
}
});
Related
This is the base of a table that I have.
It could have many more rows and the last number in the name attribute indicates the row number. I want get the name attribute of any of the inputs inside the last row. It does not matter which input is because then I will split the string and only keep the last number.
How can I achieve this?
Thanks!
<table id="tableNames">
<tbody>
<tr>
<td>
<input type="text" name="contact1_1"/>
<input type="text" name="contact2_1"/>
<input type="text" name="contact3_1"/>
</td>
<td>
<input type="text" name="phone1_1"/>
<input type="text" name="phone2_1"/>
<input type="text" name="phone3_1"/>
</td>
</tr>
</tbody>
</table>
:last selector with split() and pop()
console.log( $("#tableNames tbody tr:last input:last").attr("name").split("_").pop())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableNames">
<tbody>
<tr>
<td>
<input type="text" name="contact1_1"/>
<input type="text" name="contact2_1"/>
<input type="text" name="contact3_1"/>
</td>
<td>
<input type="text" name="phone1_1"/>
<input type="text" name="phone2_1"/>
<input type="text" name="phone3_1"/>
</td>
</tr>
</tbody>
</table>
$(document).ready(function() {
alert($("#tableNames").find("tr:last").find("input").attr("name"));
})
Or a shorter version:
$(document).ready(function() {
alert($("#tableNames tr:last input").attr("name"));
})
Here is a fiddle of this getting the name of the input on the last row:
https://jsfiddle.net/L7k2w6Ls/2/
$('#tableNames tr:last input').map(function(){return $(this).attr('name');}).get();
The other answers will do exactly what you are asking. In an attempt to be more generally helpful, I want to make sure this isn't an XY problem.
It sounds like you are effectively encoding some application data in the name of your input elements. It may be worth asking if that is what you actually want to do. Often times I have data related to an element, and the best place to put that for jQuery to find is in the elements data array. Even if the server actually needs that same piece of information in the name, putting the data somewhere more easily accessible to javascript can help minimize bugs in the future and simplify your application. So I might suggest a completely different solution like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableNames">
<tbody>
<tr>
<td>
<input type="text" name="contact1" data-more="1"/>
<input type="text" name="contact2" data-more="1"/>
<input type="text" name="contact3" data-more="1"/>
</td>
<td>
<input type="text" name="phone1" data-more="1"/>
<input type="text" name="phone2" data-more="1"/>
<input type="text" name="phone3" data-more="1"/>
</td>
</tr>
</tbody>
</table>
$( function(){
$("#tableNames tr:last input").each( function(){
var input = $(this);
console.log( input.attr( 'name' ) + ' has data ' + input.data( 'more' ) );
});
} );
The table contains a few rows like that:
<tr>
<td>
<input type="checkbox" name="indicator[]">
</td>
<td>
<input type="checkbox" name="graduations[]">
</td>
<td>
<input type="checkbox" name="graduations[]">
</td>
<td>
<input type="checkbox" name="graduations[]">
</td>
<td>
<input type="checkbox" name="graduations[]">
</td>
<td>
<input type="checkbox" name="graduations[]">
</td>
</tr>
I need to disable 'graduations' being checked if 'indicator' is not checked. And if checked, i need to check exactly two 'graduations' in that row.
My actual code only limits the number of checked 'graduations'.
$(function() {
$('input[name=graduations\\[\\]]').click(function() {
if($(this).parent().siblings().children("input[name=graduations\\[\\]]:checkbox:checked").length >= 2)
this.checked = false;
});
});
You can try this:
$("#area_covered").click(function(){
if($("#area_covered").is(':checked'))
$('.area_covered').prop('checked', true);
else
$('.area_covered').prop('checked', false);
});
give some id to the checkbox you're going to click, and give some class to both of the other checkboxes which you want to be get checked also.
then use the above jquery tag, which would work for you definitely.\
Thanks & Enjoy coding :)
Updated try this simple FIDDLE
$(function(){
$("input[name^=graduations]").on("change",function(e){
if((!$("input[name^=indicator]").is(":checked")) || +$("input[name^=graduations]:checked").length > 2 ){
$(this).prop('checked',false);
}
});
});
makes it simple
Hope it helps
How to skip hidden input type in td and set focus to next visible input type
here is the table for your reference
HTML:
<table border="1" cellspacing="0" id="vitProb">
<tbody>
<tr>
<td>
<input type="text" name="" value="" id="" class="unitfocus0 ">
</td>
<td>
<label id="" class="centerlabeltext">0</label>
<input type="hidden" name="" id="" class="" value="0">
</td>
<td>
<input type="text" name="" value="" id="" class="unitfocus1 ">
</td>
<td>
<input type="text" name="" value="" id="" class="unitfocus2 ">
</td>
<td>
<input type="text" name="" value="" id="" class="unitfocus4 ">
</td>
<td>
<input type="text" name="" value="" id="" class="unitfocus5 ">
</td>
<td>
<input type="text" name="" value="" id="" class="unitfocus6 ">
</td>
</tr>
</tbody>
</table>
Here is the js code:
$(document).delegate('table#vitProb tbody tr td input ' ,"keydown",function(e) {
// get the code of the key that was pressed
var code = e.keyCode ? e.keyCode : e.which;
// varify that side key was pressed
if (code === 39) {
// get the next tr's input field, and set focus to it
var c=this.className;
var a=c.split("");
var m=a[9];
if(isNaN(m))
{ m=0;}
else
{m=parseInt(m)+1;}
var n="unitfocus"+m;
$(this).closest('td').next().find('input[text].'+n+'').focus();
return false;
}
else if (code === 37) {
// get the next tr's input field, and set focus to it
var c=this.className;
var a=c.split("");
var m=a[9];
m=parseInt(m)-1;
if(m==0){m=0;}else{m;}
;
var n="unitfocus"+m;
$(this).closest('td').prev().find('input.'+n+'').focus();
// prevent any default actions
return false;
}
});
As shown in an image next arrow works in first tr from year 1 to year 5, but in first tr arrow key doesn't work from share to first year
I Unit column there is hidden input type and label inside td
I think because of hidden field arrow key doesn't work from share to year 1
How to skip hidden fields and travel to next visible input type.
You already determine the classname of the next and previous elements.
There is no need to call the next() or prev() methods.
Here is a JSFiddle where first the parent tr is selected, and then the underlying td with the correct class:
http://jsfiddle.net/av6abz0f/
This is the line I've changed:
$(this).parents('tr').find('input.'+n+'').focus();
I have 2 text fields that need to be validated.
Merge/Reason field needs to be validated
Barcode needs to be validated only if it is displayed, i.e. if checkbox is checked.
What I am trying to do is pop-up an alert box for merge-reason (regardless) and add a validation message for barcode in alert if not hidden
Here is the code:
<tr><td>
<input type="checkbox" name="createCharge" id="createCharge" onClick="checkBox('Barcode', 'CreateCharge');" value="1"/>
<lable>Charge</label>
</td></tr>
<tr id="Barcode" style="display:none;">
<td>
<label>Barcode</label>
<input type="text" name="Barcode" id="Barcode"/>
</td>
</tr>
<tr>
<td>
<label>Merge:</label>
<input type="text" name="Reason" id="Reason"/>
</td>
</tr>
You can simply check like this:-
if($(x).is(":visible"))
{
//your element is visible
}
JAVASCRIPT
var display= document.getElementById('x').style.display;
if(display=='block')
{
//do validation here.
}
if( $('#Barcode').is(':visible') ){
// Perform code here
}
How do I check if an element is hidden in jQuery?
if( $('#Barcode').is(':visible') && $('#Reason').val().length!==0 ){
// Barcode is visible and reason has a value more then 0 chars long
}
I am trying to make textbox readonly or not depending on the value of a checkbox of personalLoan. If personalLoan checkbox is checked I want the text to be not readonly. If it is unchecked then I want the text box to be readonly. Here is one of the rows
<tr id="mytableRows">
<td class="even"><input type="checkbox" value="true" name="homeLoan" ></td>
<td class="odd"><input type="checkbox" value="true" name="autoLoan" ></td>
<td class="even"><input type="checkbox" value="true" name="personalLoan" ></td>
<td class="odd"><input type="checkbox" value="true" name="noLoan" ></td>
<td class="odd"><input type="text" name="peronalAmount" value="1" readonly></td>
</tr>
I so far has this code
$(document).ready(function(){
$('.test tr').click(function (event) {
$(this).find(':checkbox').each(function(p){
if($(this).attr('name') == 'personalLoan'){
if ($(this).is(':checked')) {
alert("checked");
}else{
alert("unchecked");
}
}
});
});
});
This tells me the current status of the checkbox but what I really need is to know onchange of the personalLoan checkbox so I can make the textbox readonly or not in that row (td)
thanks
For my own sanity, here is what I understand the solution to be.
$('input[type=checkbox]', '.test').on('change', function(e) {
if (this.name === 'personalLoan') {
$(this).parents('tr').find('input[type=text]').prop('readonly', !this.checked);
}
});
Assuming a table with class test, this allows input when personalLoan is checked, and toggles to readonly when unchecked.
Demo on jsFiddle. (I've highlighted the checkbox in red.)
If this isn't it, then I really have no idea what you're trying to do.
It seems to me that you really want radio buttons, not checkboxes, and that the amount field should be set to disabled rather than readonly if the user selects "no loan".
Anyhow, here's an approach you can take. I've put the code in–line for convenience, it can re-implemented in jQuery or whatever you want, it's just an example of how to do what you seem to be trying to do.
The timeout is used so that the one click event can be used for any element in the form, including the reset button.
<form onclick="
var form = this;
setTimeout(function() {
form.personalAmount.readOnly = form.loanType[3].checked;
},0);
">
<table>
<tr>
<td><input type="radio" value="homeLoan" name="loanType">Home</td>
<td><input type="radio" value="autoLoan" name="loanType">Auto</td>
<td><input type="radio" value="personalLoan" name="loanType">Personal</td>
<td><input type="radio" value="true" name="loanType">None</td>
<td><input type="text" name="personalAmount" readonly></td>
<tr>
<td colspan="4">
<input type="reset">
</table>
</form>