Develop Reference

How to get the changed input box value?

I am having jquery as follows,
$(document).on('click', '.save_button', function (e) {
var amount = $('.actual_pay').val();
});
Which means when a user clicks the button with class save_button, the script executes and sets the value of the var amount to the value of the field with class actual_pay.
Up to this no problems and it is working fine, but the input box with class name actual_pay is editable and any time the value can be changed, I have to detect the changed value of the input box, for which i have tried with
var amount = $('.actual_pay').val().change();
But it is showing error:
.change is not a function.
How to detect the change happening to the class actual_pay and to store the changed value to the amount variable?

You can attach an input event listener.
var amount;
$('.actual_pay').on("input", function(){
console.log("Something is changed in actual_pay");
amount = $(this).val(); // save val
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="actual_pay">
Actions which invoke input events are
Entering some text into an element.
Cutting, deleting or pasting some content.
Dropping some content into an element. (only in Google Chrome and Safari)

$('.actual_pay').val().change(); won't work because this is wrong approach. You can do by following method
$('.actual_pay').on('input',function(){
alert('Something Modified');
});

You can get value of that input box with this function:
$( "input.actual_pay" ).keyup(function() {
var amount = $(this).val();
});
If you are changing that input manually, you will use 'keyup', otherwise you should use
$( "input.actual_pay" ).change(function() {
var amount = $(this).val();
});

Retrieve .val() from inputs on .focusout()

I have a series of dynamically generated inputs with the same class, eg:
<input class="addressitem" type="text"/>
<input class="addressitem" type="text"/>
<input class="addressitem" type="text"/>
After the user inputs data into each field I want to take that data and place it in the value field of a hidden input.
However, I am having trouble figuring out the best way to do this. So far I've tried:
$(".addressitem").focusout(function() {
var addressinput = $(this).val();
console.log(addressinput);
});
and
$(".addressitem").change(function() {
var addressinput = $(this).val();
console.log(addressinput);
});
But I cannot get anything to appear in console.
Could anyone point me in the right direction?

Both of your approaches should work as long as you define them inside the document.ready event and you do not have any other script errors in your page.
$(function(){
$(".addressitem").change(function() {
var addressinput = $(this).val();
console.log(addressinput);
});
$(".addressitem").focusout(function() {
var addressinput = $(this).val();
console.log(addressinput);
});
});
You may use your browser console to verify the existence of other script errors in the page.
Also remember that, change event occurs on the text input fields when the focus is out. So you will see the console.log when user changes the focus from the textboxes. If you want instant updates, you should consider using keyUp event
Here is a working sample.
EDIT : As per the comment : I had the fields generated by a Jquery click function. I had to move my code within the click function for it to work.
No you don't need to. You can simply use the jQuery on delegation method. When you register an event handler with jQuery on, It will work for current and future elements(dynamically injected) in the DOM.
So your code will be
$(function(){
$(document).on("change",".addressitem",function() {
var addressinput = $(this).val();
console.log(addressinput);
});
});

This might be the best option, as you said they are dynamically generated inputs.
$(document).on("blur",".addressitem",function() {
var addressinput = $(this).val();
console.log(addressinput);
});
WORKING FIDDLE
Check your console

On focusout in HTML5 as following:
<input type="text" onfocusout="makeITUpperCase(this)">
And in javascript as following:
function makeITUpperCase(e) {
console.log(e.value);
e.value = e.value.toUpperCase();
}
The function takes 'this' object as e which can be used to get value or alter

Change focus on next input after paste event with JQuery

I have got an HTML form with many input boxes. At the paste event on any of my input boxes I would like to set the focus on the following one.
Here is the code I am currently using:
$("input").bind('paste', function(e) {
var inputs = $(this).closest('form').find(':input');
//alert(e.originalEvent.clipboardData.getData('Text'));
inputs.eq( inputs.index(this)+ 1 ).focus();
});
What happens with this code is the following. Let's say I have got input boxes "A" and "B". I paste a text into "A"; the function changes the focus on "B" and then save the text into "B". Nothing is pasted into "A".
Of course I would like the content to be pasted into "A" and then the focus switched to "B".
Is there a way to obtain this latter behaviour?

You want your paste event to trigger before changing focus, and so you need to finish your bind callback before calling the focus.
What you should do is to defer your focus call. You can use setTimeout and delay by 0 milliseconds - basically, call after your paste function ends.
$("input").bind('paste', function(e) {
var inputs = $(this).closest('form').find(':input');
var self = this;
setTimeout(function(){
inputs.eq( inputs.index(self)+ 1 ).focus();
}, 0)
});
http://jsfiddle.net/6utcnaq3/1/

Here's a one liner. You just need to introduce some delay.
$("input").on('paste', function(e) {
var $this = $(this);
setTimeout(function () {
$this
.closest('form')
.find('input')
.eq($this.index() + 1)
.focus();
}, 100);
});

Disable Submit button if none of selector options is selected

I would like to disable the Submit button on a search form that only contains select dropdowns. There are several similar questions here but I most of them deal with fields. The closest thing to my case is Disable submit button if all three of three specific dropdown fields are empty. I modified the solution supplied in JSFiddle to feature an empty option, and did get it working -- but only in JSFiddle, not on my page.
I use the same code from the proposed answer (only changed IDs):
$('#submit').attr('disabled','disabled');
$('select').change(function(){
if ( $(this).hasClass('require_one') ){
$('#submit').removeAttr('disabled');
}
});
$('#submit').click(function() {
$('#searchform').submit();
});
I add the above code right after I include the jquery.js (v. 1.9.1).
I generate the form dynamically, but in JSFiddle I use exactly what is seen in the page source: http://jsfiddle.net/cheeseus/d5xz6aw8/8/
I have no idea why I can't get it to work on the actual page, hope those more knowledgeable can help sort it out.
And, if possible, I would also like the Submit button to be disabled again if all three selects are set to blank values again.

I usually don't like using the ID(3) for CSS selector since you can have only one ID selector with that name on the document and there might be another element already with the same ID. How about using the class hierarchy instead to pinpoint the button element?
In any case you need to re-check the count everytime what you select on what is empty:
var $submitButton=$('.selector .btn');
var $selectors=$('.selector select.require_one');
$submitButton.attr('disabled','disabled');
$('.selector select.require_one').change(function(){
var $empty=$selectors.filter(function() { return this.value == ""; });
if ( $selectors.filter(function() { return this.value == ""; }).length == $selectors.length ){
$submitButton.attr('disabled','disabled');
} else
{
$submitButton.removeAttr('disabled');
}
});
$submitButton.click(function() {
$('#searchform').submit();
});
JSFiddle code here

You can just use a simple count to see if you should display the button or not. Here is jQuery code.
var count = 0;
$('.require_one').change(function() {
count++;
if (count >= 3) {
$('#submit').removeAttr('disabled');
}
});
$('#submit').attr('disabled','disabled');

I think this is because you didn't check is your document ready.
I added few improvements:
caching jquery object in variables, makes your code a bit faster (you don't look for it everytime select is beeing changes).
used recommended way of binding events - 'on' function
'disabled' is property not an attribute, jQuery has dedicated method to use
on select change - check all selects if there is any not selected, it there is - set prop disabled to true, otherwise set false.
instead of disabling submit at initialization, trigger same action you do when selected is beeing changed (if you start with option selected in all select initial state won't be disabled).
$(document).ready(function () {
var $submit = $('#submit');
var $selects = $('select.require_one');
$submit.on("click", function() {
$('#searchform').submit();
});
$selects
.on("change", function(){
var $not_selected = $selects.filter(function() {
return !$(this).val();
});
$submit.prop('disabled', $not_selected.length ? true : false);
})
.first()
.triggerHandler('change');
});

Capture the size of textarea dynamically through javascript

how to trigger a event in jquery when the value of a textarea is changing without losing focus form textarea.

You can use the keyup event to get the value as it's entered, like this:
$("textarea").keyup(function() {
var newVal = $(this).val();
});
Or, to be a bit safer:
$("textarea").bind("keyup paste change", function() {
var newVal = $(this).val();
});
Unlike only using change this will get the value as it updates, instead of when the <textarea> loses focus.

You could use keypress(), although that's not strictly tied to the change of a value, just the events of a key being pressed.
$("textarea").keypress(
function() {
var newValue = $(this).val();
}
);

You can use the Autoresize with this jquery:
JQUERY PLUGIN: ‘AUTORESIZE’