We Keep Coding

JavaScript - detect input change on any input/select field on current modal

I have a modal with ~20 input and select fields that the user is supposed to complete. I would like to a quick JavaScript check whether the field is empty or not after the user is navigating away / changing / etc. the field, but want to avoid having to copy paste the code below 20 times and personalize it for each field.
<!-- Holidex -->
<label>Holidex:</label>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-bars"></i></span>
<input type="text" class="form-control" maxlength="5" placeholder="What is your Holidex code?" id="addHolidex" name="addHolidex" style="text-transform:uppercase" />
</div>
<!-- /.Holidex -->
<script type="text/javascript">
$('#addHolidex').on('keyup keydown keypress change paste', function() {
if ($(this).val() == '') {
$('#addHolidex').removeClass('has-success').addClass('has-warning');
} else {
$('#addHolidex').addClass('has-success').removeClass('has-warning');
}
});
</script>
Is there any way to have the code above check for any select / input field on my NewUserModal?
Thank you!
EDIT
So I fiddled around with the suggested codes below but only the following managed to halfway work:
$('.input-group').on('keyup keydown keypress change paste', function() {
if ($(this).val() == '') {
$(this).removeClass('has-success').addClass('has-error');
} else {
$(this).addClass('has-success').removeClass('has-error');
}
});
Empty fields are being flagged correctly now, but fields with content do not have the has-success class added. Note that I have to apply this class to the <div class="input-group"> element instead of the input select fields.
Any suggestions? I am running on bootstrap 3 if that helps.
EDIT 2
Still no result and quite frankly have had enough for today.
- select fields are either ignored or incorrectly flagged with has-error if pre-populated
- individual input fields seem to work more or less
- grouped input fields nestled in one div all turn red if one field is empty (eg. phone number + phone country both turn red of there is not country code entered)
// highlight empty fields in red
$('.input-group input, select').on('keyup keydown keypress change paste',function(){
if ($(this).val() == '') {
$(this).parent().closest('.input-group').removeClass('has-success').addClass('has-error');
} else {
$(this).parent().closest('.input-group').removeClass('has-error').addClass('has-success');
}
});
I basically would have to redo the whole design of my modal and I quite frankly dont want to go down that road. Not a fan of JS/ Jquery today.

Not really sure this is what you're looking for but, why do not simply make your code more universal:
$('input').on('keyup keydown keypress change paste', function() {
if ($(this).val() == '') {
$(this).removeClass('has-success').addClass('has-warning');
} else {
$(this).addClass('has-success').removeClass('has-warning');
}
});
EDIT
If you would like to specify a precise form, add an ID to your form :
<form id="myForm">
<label>Holidex:</label>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-bars"></i></span>
<input type="text" class="form-control" maxlength="5" placeholder="What is your Holidex code?" id="addHolidex" name="addHolidex" style="text-transform:uppercase" />
</div>
</form>
$('#myForm input').on('keyup keydown keypress change paste', function() {
if ($(this).val() == '') {
$(this).removeClass('has-success').addClass('has-warning');
} else {
$(this).addClass('has-success').removeClass('has-warning');
}
});

Add a new class to the input
<input type="text" class="form-control Input-to-verify" maxlength="5" placeholder="What is your Holidex code?" id="addHolidex" name="addHolidex" style="text-transform:uppercase" />
and then in javascript:
$('.Input-to-verify').on('change',function(){
if ($(this).val() == '') {
$(this).removeClass('has-success').addClass('has-warning');
} else {
$(this).addClass('has-success').removeClass('has-warning');
}
});
I hope this works

onchange and focus out event on a text box with jquery

This is the fiddle
https://jsfiddle.net/or0db22d/
I want to show that div error if the textbox content's length greater than 3 then show that div with error as wrong format
and when textbox is not getting entered or out of focus , div error should go out
HTML
<div id="errorholder">
</div>
<br />
<input id="txtbox" type="text">
JS
$('#txtbox').onchange(function(e)
{
if($(this).length >3)
$('#errorholder').text("wrong format");
});
$('#txtbox').focusout(function(e)
{
$('#errorholder').text("");
});
how to write these two function ?

$('#txtbox').on('input', function(e) {
if ($(this).val().length > 3)
$('#errorholder').text("wrong format");
else
$('#errorholder').text("");
});
//$('#txtbox').focusout(function(e) {
// $('#errorholder').text("");
//});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="errorholder">
</div>
<br />
<input id="txtbox" type="text">
Use on input event
get the input value using .val()

Change our JS code to
$('input').on('keyup',function(){
if($(this).val().length > 3)
$('#errorholder').text("wrong format");
});

Try this. You have to use keyup event. Change event will listen only you focus out on text box. To find the length of text box you have to use $(this).val().length
$('#txtbox').keyup(function(e)
{
if($(this).val().length >3){
$('#errorholder').text("wrong format");
}
});
$('#txtbox').focusout(function(e)
{
$('#errorholder').text("");
});
here updated jsfiddle, https://jsfiddle.net/or0db22d/4/

Jquery select behavior differ on IE

I have simple code:
<input id="thisInput" class="MyInput"
maxlength="3"
value=" 0"
type="text" />
and JS code:
$("#thisInput").on( "click", function() {
$(this).select();
});
In Chrome this code. In first click selects all values in input. The other click end with no selection
In IE11 each click end with selection of all text in input.
my code is somewhat wrong? Or Chrome or IE is bugged?
JSFIDDLe

Like #Jai commented, this is the Chrome behavior. Personally I don't consider this a Chrome bug nor a IE one.
Selecting the text always
If you want to always select the text from input, you can trick it with an async call:
$("#thisInput").on("click", function() {
setTimeout(function() {
$(this).select();
}.bind(this), 0);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="thisInput" class="MyInput" maxlength="3" value=" 0" type="text" />
Toggle selection
Well, the best working solution I see is using a flag and toggling it:
var select = false;
$("#thisInput").on("click", function() {
if (select = !select) {
$(this).select();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="thisInput" class="MyInput" maxlength="3" value=" 0" type="text" />

It may happened that click event is not triggering properly in IE, so try adding focus event also
$("#thisInput").on( "click focus", function() {
$(this).select();
});
JSFiddle Demo

Form login button enabled after password field has focus

hello guys I have a login page with two inputs username and password and one button. I want to put a class on that button after password field has first character filled in. How can I do that , Thank's. If is possible to do that only with css will be awesome, or a small script to add a class on that button.
<form>
Username <input type="text" name="first" id="first" /><br/><br/>
Password <input type="text" name="last" id="last" />
<br/>
</form>
<input class="crbl" type="submit" name="last" id="last" value="login button" />
css
/*Normal State*/
.crbl{
margin-top:10px;
border:1px solid #555555;
border-radius:5px;
}
/*after password field has one character filled in state*/
.class{
???
}
fiddle:
http://jsfiddle.net/uGudk/16/

You can use toggleClass and keyup methods.
// caching the object for avoiding unnecessary DOM traversing.
var $login = $('.crbl');
$('#last').keyup(function(){
$login.toggleClass('className', this.value.length > 0);
});
http://jsfiddle.net/5eYN5/
Note that IDs must be unique.

You can do that using javascript. FIrst thing you need to put on password input the following event
Password <input type="text" name="last" id="last" onkeyup="myFunction(this);"/>
Then you define the javascript function:
function myFunction(element) {
if (element.value != '') {
document.getElementById('last').attr('class','password-1');
} else {
document.getElementById('last').attr('class','password-0');
}
}

You may try like this demo
jQuery(document).ready(function(){
jQuery('#last').keyup(function(event){
var password_length =jQuery("#last").val().length;
if(password_length >= 1){
jQuery("#last_button").addClass('someclass');
}
else
{
jQuery("#last_button").removeClass('someclass');
}
});
});

This is the best way to handle the entire input, with the "on()" Jquery method.
Use the very first parent
<form id="former">
Username <input type="text" name="first" id="first" /><br/><br/>
Password <input type="text" name="last" id="last" />
<br/>
</form>
<input class="crbl" type="submit" name="last" id="last_btn" value="login button" />
Then in Jquery
$("#former").on('keydown, keyup, keypress','#last',function(e){
var value = $(this).val();
if ( value.length > 0 ) {
$("#last_btn").addClass('class'):
}else{
$("#last_btn").removeClass('class');
}
});
With "on" method you can handle many event of the input as you can see...

make sure your ID is unique.. since you have two IDs with the same name in fiddle.. i changed the password id to 'password'...
use keyup() to check the key pressed.. and addClass() to add the class..
try this
$('#password').keyup(function(){
if($(this).val()==''){
$('#last').removeClass('newclassname'); //if empty remove the class
}else{
$('#last').addClass('newclassname'); // not not empty add
}
});
fiddle here

<script type="text/javascript">
$('#YourTextBoxId').keyup(function (e) {
if ($(this).val().length == 1) {
$(this).toggleClass("YourNewClassName");
}
else if ($(this).val().length == 0) {
$(this).toggleClass("YourOldClassName");
}
})
</script>

Test this:
http://jsfiddle.net/uGudk/33/
Please consider using unique id for all form elements, and use unique input name also.
$(document).ready(function(){
$("input[name=last]").keydown(function () {
if($(this).val().length > 0){
$(this).attr("class", "class");
//or change the submit button
$("input[type=submit]").attr("class", "class");
//or if you want to enable it if originally disbaled
$("input[type=submit]").removeAttr("disabled");
}
});
});

How do I move focus to next input with jQuery?

I am using the autocomplete plugin with jQuery and it is working fine. However, in IE, when the user selects an item in the autocomplete, the focus does not then move to the next input field. Naturally it works in Firefox. The plugin doesn't have a built-in solution but does provide for "options". Is there a way I can force it to move to the next input field?

You can do something like this:
$("input").change(function() {
var inputs = $(this).closest('form').find(':input');
inputs.eq( inputs.index(this)+ 1 ).focus();
});
The other answers posted here may not work for you since they depend on the next input being the very next sibling element, which often isn't the case. This approach goes up to the form and searches for the next input type element.

JQuery UI already has this, in my example below I included a maxchar attribute to focus on the next focus-able element (input, select, textarea, button and object) if i typed in the max number of characters
HTML:
text 1 <input type="text" value="" id="txt1" maxchar="5" /><br />
text 2 <input type="text" value="" id="txt2" maxchar="5" /><br />
checkbox 1 <input type="checkbox" value="" id="chk1" /><br />
checkbox 2 <input type="checkbox" value="" id="chk2" /><br />
dropdown 1 <select id="dd1" >
<option value="1">1</option>
<option value="1">2</option>
</select><br />
dropdown 2 <select id="dd2">
<option value="1">1</option>
<option value="1">2</option>
</select>
Javascript:
$(function() {
var focusables = $(":focusable");
focusables.keyup(function(e) {
var maxchar = false;
if ($(this).attr("maxchar")) {
if ($(this).val().length >= $(this).attr("maxchar"))
maxchar = true;
}
if (e.keyCode == 13 || maxchar) {
var current = focusables.index(this),
next = focusables.eq(current+1).length ? focusables.eq(current+1) : focusables.eq(0);
next.focus();
}
});
});

What Sam meant was :
$('#myInput').focus(function(){
$(this).next('input').focus();
})

Try using something like:
var inputs = $(this).closest('form').find(':focusable');
inputs.eq(inputs.index(this) + 1).focus();

why not simply just give the input field where you want to jump to a id and do a simple focus
$("#newListField").focus();

Use eq to get to specific element.
Documentation about index
$("input").keyup(function () {
var index = $(this).index("input");
$("input").eq(index + 1).focus();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" maxlength="1" />
<input type="text" maxlength="1" />
<input type="text" maxlength="1" />
<input type="text" maxlength="1" />
<input type="text" maxlength="1" />
<input type="text" maxlength="1" />

you can use
$(document).on("keypress","input,select",function (e) {
e.preventDefault();
if (e.keyCode==13) {
$(':input).eq($(':input').index(this) + 1)').focus();
}
});

Could you post some of your HTML as an example?
In the mean-time, try this:
$('#myInput').result(function(){
$(this).next('input').focus();
})
That's untested, so it'll probably need some tweaking.

I just wrote a jQuery plugin that does what you are looking for (annoyed that that I couldn't find andy solution myself (tabStop -> http://plugins.jquery.com/tabstop/)

function nextFormInput() {
var focused = $(':focus');
var inputs = $(focused).closest('form').find(':input');
inputs.eq(inputs.index(focused) + 1).focus();
}

if you are using event.preventDefault() in your script then comment it out because IE doesn't likes it.

The easiest way is to remove it from the tab index all together:
$('#control').find('input[readonly]').each(function () {
$(this).attr('tabindex', '-1');
});
I already use this on a couple of forms.

Here is what worked in my case. Might be less performance intensive.
$('#myelement').siblings('input').first().focus();

var inputs = $('input, select, textarea').keypress(function (e) {
if (e.which == 13) {
e.preventDefault();
var nextInput = inputs.get(inputs.index(this) + 1);
if (nextInput) {
nextInput.focus();
}
}
});

onchange="$('select')[$('select').index(this)+1].focus()"
This may work if your next field is another select.