We Keep Coding

Avoid $(document).click for certain textfiels

I've got 2 text fields and a button and also a $(document).click function to trigger showItems() function.
My question is how can I avoid showItems() from been triggered if the user is currently typing anything into those 2 text fields?
<input type="text" id="tf1">
<input type="text" id="tf2">
<button id="bt1">Preference</button>
$(document).click(function(){
if (typeof showItems() == "function") {
showItems();
}
});

You can check whether the click passed through #tf1 or #tf2:
$(document).click(function(e) {
if ($(e.target).closest("#tf1, #tf2").length) {
return;
}
if (typeof showItems == "function") {
showItems();
}
});
Example:
$(document).click(function(e) {
if ($(e.target).closest("#tf1, #tf2").length) {
return;
}
$("<p>click</p>").appendTo(document.body);
});
<input type="text" id="tf1">
<input type="text" id="tf2">
<button id="bt1">Preference</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Also note that when checking the type of showItems, you don't want the () on it, that will call it and check the type of what it returns. I've removed the () in the first code block above.

The simplest solution would be this:
<input type="text" id="tf1" onclick="event.stopPropagation()">
The click events bubble up the DOM from the element that was clicked. This way you stop it from bubbling up and it never reaches the document root.

event.stopPropagation() Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event
$(document).click(function() {
if (typeof showItems == "function") {
showItems();
}
});
function showItems() {
console.log('Here!');
}
$('#tf1,#tf2').on('click', function(e) {
e.stopPropagation();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="tf1">
<input type="text" id="tf2">
<button id="bt1">Preference</button>
Fiddle here

using .click() function without a target is never a good idea. rather use the button as a target for your click event for example:
<input type="text" id="tf1">
<input type="text" id="tf2">
<button id="bt1">Preference</button>
$("#bt1").click(function(){
if (typeof showItems() == "function") {
showItems();
}
});
but i am not sure when you want your click-event to actually fire.

Update textboxes based on checkboxes Jquery

I want to achieve following thing with Jquery
There are multiple trips and each trip has checkbox and textbox.
Whenever checkbox is checked then the value in textbox corresponding to that checkbox must be updated to "1" .
ehenever customer types in textbox then checkbox shall be checked.
Customer is not allowed to choose more than 10 trips in total. (i.e. if both input box total is 10 then there shall be error or alert shown.
I tried by following code but it is not working
<input type="checkbox" id="ckval1" class="checkvaloare" /> Trip 1
<input type="text" id="text1" class="ckval1" size="2" />
<br />
<input type="checkbox" id="ckval2" class="checkvaloare" /> Trip 2
<input type="text" id="text2" class="ckval2" size="2" />
JQuery as below:
$("input[type=checkbox]").click(function () {
update();
});
function update() {
$("input[type=text]").each(function () {
if (($(this).is(":checked"))) {
$(this).val(1);
}
else
{
$(this).val(0);
}
});
}

use .next() get next sibling element and .prev() get previous sibling element.
try
$(function () {
$("input[type=checkbox]").on('click', function () {
$(this).next().val($(this).is(':checked') ? '1' : '0');
});
$("input[type=text]").on('keyup', function () {
if (+ $(this).val()) {
alert('f');
$(this).prev().prop('checked', true);
} else {
$(this).prev().prop('checked', false);
}
});
});
Demo: http://jsfiddle.net/tamilcselvan/m242bo5z/2/

Two issues:
you can change a checkbox without clicking it
in your function, you are using $this) to refer to the checkbox, but it refers to the text input
Try something like this:
$("input[type=checkbox]").change(function (e) {
update(e.target);
});
function update(el) {
$("input[type=text]").each(function () {
if (($(el).is(":checked"))) {
$(this).val(1);
}
else
{
$(this).val(0);
}
});
}

JQuery if certain textboxe's are empty, disable button

I've seen plenty examples of people disabling buttons if textboxes are empty but I haven't found any which will disable a button for only certain textboxes. I'm new to Jquery and I know it is pseudo coded but you can get the idea. Which Jquery function do I have to call so that it is constantly checking? And how can I use an or statement in the if clause to determine if any textbox field is empty?
if( $('#txtEvent').val.length === 0 || $("#txtID").val.length === 0)
{
$('#btnSave').attr("disabled", "disabled");
}
else
{
$('#btnSave').attr("enabled", "enabled");
}
Form Controls
<asp:TextBox ID="txtEvent" runat="server"></asp:TextBox>
< asp:TextBox ID="txtID" runat="server"></asp:TextBox>
<asp:Button ID="btnSave" runat="server"" Text="Save and Next" />

You can do it two different ways:
if (!$("#txtEvent").val()) { //undefined will yield false
//call a method! .val() not .val
$("#btnSave").attr("disabled", "disabled");
} else {
$("#btnSave").attr("enabled", "enabled");
}
Or:
if ($("#txtEvent").length > 0) {
$("#btnSave").attr("disabled", "disabled");
} else {
$("#btnSave").attr("enabled", "enabled");
}
If you want these constantly running, wrap them in:
$("#txtEvent").on("change", function() { //code });
//using the onchange event will trigger the code whenever the txtbox changes.
//you can also use onblur if you want it to trigger AFTER the txtbox loses focus
Please note you'll have to convert these into proper asp code! This is simply a logistical answer.

Try
var $empties = $('#txtEvent, #txtID').filter(function(){
return $.trim($(this).val()).length == 0
})
$('#btnSave').prop("disabled", $empties.length === 0);

Even though this is two years old question, I would like to show another way using bind. See the text 'keyup mouseup cut paste'
This will also work if you cut or paste text as well as keyboard input. Also this will work if we click the little cross in the text box to clear the text( using mouseup).
OP stated that disable a button for "only certain textboxes".
Say we have following text boxes
<input type="text" name="tbox1" id="txtbox1" />
<input type="text" name="tbox2" id="txtbox2" />
<input type="text" name="tbox3" id="txtbox3" />
<input type="text" name="tbox4" id="txtbox4" />
<input type="submit" id="btnSubmit" name="button" value="Save and Next" disabled />
If we need to enable/disable the button based on values entered in to txtBox1 OR txtBox3 then we can use this
<script>
$(document).ready(function() {
$("#txtbox1, #txtbox3").bind('keyup mouseup cut paste', function () {
var txt = $(this);
setTimeout(function () {
$('#btnSubmit').prop('disabled', $(txt).val() == '');
}, 100);
});
});
</script>
If we need to enable/disable the button only when both txtBox1 AND txtBox3 are not empty then we can use this
<script>
$(document).ready(function() {
$("#txtbox1, #txtbox3").bind('keyup mouseup cut paste', function () {
setTimeout(function () {
($('#txtbox1').val() && $('#txtbox3').val()) ? $('#btnSubmit').prop('disabled', false) : $('#btnSubmit').prop('disabled', true);
}, 100);
});
});
</script>

jquery each for all text boxes

I am using following script to bind a keypress event on each textbox so that on reaching the maxlength, focus will switch to next input field. Passing classname as the prarameters to the function.
function autoFocusPhoneFields(txtbox1ID,txtbox2ID) {
$('input.'+txtbox1ID+', input.'+txtbox2ID+'').each(function() {
$(this).bind('keypress', function(){
if(this.value.length == $(this).attr('maxlength')) {
$(this).next('input').focus();
}
});
});
}
$(document).ready(function(){
autoFocusPhoneFields('mobileprefix','mobilecode');
});
As i have mentioned two different input ..it is runnign fine. Butis there any way around so that it will get the classnames and runs through each input box to attach keypress event.

If I understand you correctly, you want to attach the same event handler to every input field? Just use the selector:
$(':text')
(for all input type="text") fields.
So just change
$('input.'+txtbox1ID+', input.'+txtbox2ID+'').each(function() {
to:
$(':text').each(function() {

If I get you correctly you just need to use type selector for input. You can also get rid of calling each to iterate thru inputs since binding event to multiply elements interates via them. So you can change your code into something like following:
var autoFocusPhoneFields = function () {
$('input:text').keypress(function() {
if(this.value.length == $(this).attr('maxlength'))
$(this).next('input').focus();
});
}
$(autoFocusPhoneFields);

This works fine.
HTML
<input id="one" class="inp" maxlength="5" />
<input id="two" class="inp" maxlength="3" />
<input id="three" class="inp" maxlength="2" />
JS Part
$(function(){
var onpress = function(){
var val = $(this).val();
var next_input = $(this).next('input');
var mx = $(this).attr('maxlength');
try {
mx = Number(mx);
if (next_input.length >= 1 && val.length >= mx){
next_input.focus();
}
} catch(x){}
}
$('input.inp').bind('keypress', onpress);
});

Problem with giving focus to first element inside a container

I am just trying to cycle the focus between elements inside a particular element when the tab key is pressed. What I want to do is not to set focus to any element which is not a descendant of an element when tab is pressed from the last control inside the element. At that time the focus must be set to the first input element inside the container.
I have done a sample and it its not working, and I am unable to figure out the issue.
Sample can be found here
The complete code is
Script
$(function(){
$(":input:last","#div1").bind("keydown", function(e){
if ( e.keyCode === 9 )
{
var firstElem = $(":input:first","#div1");
firstElem.focus();
}
});
});
CSS
input.red { width: 200px; border: solid 1px red; }
input { width: 200px; }
HTML
<input type="text" class="red" />
<div id="div1">
<input type="text" id="txt1" />
<select id="sel1">
<option>1</option>
</select>
<input type="text" id="txt2" />
</div>
Any help would be appreciated.
Thanks
Edit
Thanks everyone. Problem solved. It was the lack of a return false; statement in the keydown event.

Try Keypress instead of Keydown
Also return false so that the keypress normal handling is cancelled.
What appears to be happening is that you are moving the focus then the tab happens, moving it to the select. You need to setfocus, then return false so that the regular tab is cancelled.
$(function(){
$(":input:last","#div1").bind("keydown", function(e){
if ( e.keyCode === 9 )
{
var firstElem = $(":input:first","#div1");
firstElem.focus();
return false;
}
});
});

Your example is not working because you are not stopping the keystroke, you set the focus on the first element, and then the tab key is sent, which causes the focus to be changed to the second element.
Try:
$(function(){
$(":input:last","#div1").bind("keydown", function(e){
if ( e.keyCode === 9 ) {
var firstElem = $(":input:first","#div1");
firstElem.focus();
e.preventDefault(); // or return false;
}
});
});
Check the above example here.

Can you not just use the tabindex attribute in the html?
If your page is dynamic it might be easier to set this attribute using JS rather than capturing the keypress etc.