Develop Reference

jQuery not getting changed input value

Ive got a button with id 'filter' and also two input fields:
<input type="text" name="Status" value="{{ $Status }}">
<input type="text" name="CusJobNum" value="{{ $CusJobNum }}">
Then I have this jQuery script
$(document).on('click', '#filter', function(){
var url = 'JobsByDate/?';
$('input').each(function(){
var a = $(this).attr('name');
var b = $(this).attr('value');
if(!(b == ''))
url = url + '&'+a+'='+b;
});
window.location = url;
});
The code is only getting the default value for the input even if i make a change to the field. Does anyone know why?

Use val() to get the value, as of now you are reading its attribute. the method .attr() is used to get attribute value
var b = $(this).val();
OR, Go native
var b = this.value;

You are using attr() method to get the value which always return the attribute value in the markup. You should use val() method to get the current value of the element.
var b = $(this).val();

Use val() to get value of input.
$(document).on('click', '#filter', function(){
var url = 'JobsByDate/?';
$('input').each(function(){
var a = $(this).attr('name');
var b = $(this).val();
if(!(b == ''))
url = url + '&'+a+'='+b;
});
window.location = url;
});

Match the value of inputs on change using jquery

I have two inputs which I want to have the same input values when one is typed in. It kind of works but not all the time.
I will leave the code here:
$('#google-querynav').keypress(function() {
var text = $(this).val();
$('#google-querystat').attr('value', text);
})
$('#google-querystat').keypress(function() {
var text = $(this).val();
$('#google-querynav').attr('value', text);
})
Thanks for the help

You need to use change and keyup event to do this work. Also you can use val() method to change value of input instead of attr("value").
$('#google-querynav').on("change keyup", function() {
var text = $(this).val();
$('#google-querystat').val(text);
})
$('#google-querystat').on("change keyup",function() {
var text = $(this).val();
$('#google-querynav').val(text);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="google-querynav"/>
<input type="text" id="google-querystat"/>
You can use shorter code to do this
$('#google-querynav, #google-querystat').on("keyup change", function() {
var text = $(this).val();
$('#google-querynav, #google-querystat').val(text);
})
Test it in jsfiddle

Use keyup instead of keypress. And use val instead of attr
$('#google-querynav').on('keyup change', function() {
var text = $(this).val();
$('#google-querystat').val(text);
})
$('#google-querystat').on('keyup change', function() {
var text = $(this).val();
$('#google-querynav').val(text);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="google-querynav">
<input id="google-querystat">

Jquery :How to store textbox value clientside and display?

The below code will update the display value enter by user in textbox when button clicked but in this code it will not preserve the previous value enter by user .
<h1>Type your comment below </h1>
<input id="txt_name" type="text" value="" />
<button id="Get">Submit</button>
<div id="textDiv"></div> -
<div id="dateDiv"></div>
jQuery(function(){
$("button").click(function() {
var value = $("#txt_name").val();
$("#textDiv").text(value);
$("#dateDiv").text(new Date().toString());
});
});
Now I want preserve all the value enter by user and when user will submit the button show both value previous as well as current.
How to achieve this ?
Can below code will help to preserve all the value
var $input = $('#inputId');
$input.data('persist', $input.val() );
If yes how to display all value previous,current etc. when user click on button ?

If i got this right, this is what you need?
<h1>Type your comment below </h1>
<input id="txt_name" type="text" value="" />
<button id="Get">Submit</button>
<script type="text/javascript">
jQuery(function(){
$("button").click(function() {
var value = $("#txt_name").val();
$("#section").prepend('<div class="textDiv">'+value+'</div>')
$("#section").prepend('<div class="dateDiv">'+new Date().toString()+'</div>')
$("#txt_name").val('');
});
});
</script>
<!-- each time you press submit, a new line will be pushed here -->
<div id="section">
</div>

If you want to display only the previous and current value the user submitted and use the data function then:
$("button").click(function() {
var input = $("#txt_name").val();
var previous = $("#textDiv").data('previous') || '';
$("#textDiv").text(previous+input);
$("#textDiv").data('previous',input);
$("#dateDiv").text(new Date().toString());
});
If you want all the values and you want to store them, then I would create an array. But you could always concatenate the string.
var arr = [];
$("button").click(function() {
var input = $("#txt_name").val();
arr.push(input);
var previous = $("#textDiv").data('previous') || '';
$("#textDiv").text(previous+input);
$("#textDiv").data('previous',previous+input);
$("#dateDiv").text(new Date().toString());
});
Without using .data() you can do this:
$("button").click(function() {
var input = $("#txt_name").val();
$("#textDiv").text($("#textDiv").text()+input);
$("#dateDiv").text(new Date().toString());
});

Instead of using two separate divs for message and date, you can use a single div.
<h1>Type your comment below </h1>
<input id="txt_name" type="text" value="" />
<button id="Get">Submit</button>
<div id="msgDiv"></div>
$(document).ready(function() {
var preservedTxt = '';
$("button").click(function() {
var input = $("#txt_name").val();
var date = new Date().toString();
var msg = input + ' - ' + date;
preservedTxt = preservedTxt + '<br>' + msg;
$('#msgDiv').html(preservedTxt);
});
});
Jsfiddle : https://jsfiddle.net/nikdtu/p2pcwj2f/

Storing values in array will help
jQuery(function(){
var name=[];
var time=[];
$("button").click(function() {
var value = $("#txt_name").val();
name.push(value);
$("#textDiv").text(name);
time.push(new Date().toString())
$("#dateDiv").text(time);
});
});

Combining arrays from different inputs

I'm trying to combine mulitple inputs then combine them to form a sentence/phrase. This example will elaborate it more.
INPUT1: Happy
INPUT2: Birthday to you
INPUT4: You belong to the zoo
INPUT5: and the monkey and the donkey
INPUT6: The Gorilla is you
Output:
Happy, Birthday to you, You belong to the zoo, and the monkey and the donkey, The Gorilla is you
Expected Output:
Happy Birthday to you, You belong to the zoo, and the monkey and the donkey, The Gorilla is you
I want to set a condition where in INPUT one will not be joined using comma(,) rather just a space. How can I accomplish this? Here's a fiddle and code. Appreciate all the help thnx
Fiddle: http://jsfiddle.net/hztMj/6/
Code:
<input class="combine" id="input1" disabled="true" value="Happy"></input>
<input class="combine" id="input2" disabled="true" value="Birthday to you"></input>
<input class="combine" id="input3" disabled="true" value="You belong to the zoo"></input>
<input class="combine" id="input4" disabled="true" value="and the monkey and the donkey"></input>
<input class="combine" id="input5" disabled="true" value="The Gorilla is you"></input>
<input class="combine" id="Voltes5" disabled="true" size="75"></input>
<button id="LaserSword">Set</button>
JS
$(document).ready(function () {
$('#LaserSword').on('click', function () {
var form = $('.combine').not('#Voltes5');
var val = form.map(function () {
var value = $.trim(this.value)
return value ? value : undefined;
}).get();
$('#Voltes5').val(val.join(', '))//part to be improved
});
});

If this a simple-not-dynamic scenario, you can achive that with a simple .slice()
$('#Voltes5').val(val[0] + ' ' + val.slice(1).join(', '))

You can build your sentence this way :
$(document).ready(function () {
$('#LaserSword').on('click', function () {
var form = $('.combine').not('#Voltes5');
var val = "" ;
form.each(function (i,e) {
var value = $.trim(this.value) ;
if(i > 0){ // we don't add a separator for the first element
val = val + ( i==1 ? " " : ", " ) ;
// separator according to index
// (you can easily extend it as you want)
}
val = val + (value || "") ;
});
$('#Voltes5').val(val)
});
});
Demo : http://jsfiddle.net/XF7K8/1/

You can use something like this :
$(document).ready(function () {
$('#LaserSword').on('click', function () {
var form = $('.combine').not('#input1','#Voltes5');
var val = form.map(function () {
var value = $.trim(this.value)
return value ? value : undefined;
}).get();
$('#Voltes5').val($('#input1').val()+" "+val.join(', '))
});
});
DEMO
UPDATE:
In more general ,
$(document).ready(function () {
$('#LaserSword').on('click', function () {
var form = $('.combine').not('.spaceNeeded','#Voltes5');
var val = form.map(function () {
var value = $.trim(this.value)
return value ? value : undefined;
}).get();
var spaceval = $('.spaceNeeded').map(function () {
var value = $.trim(this.value)
return value ? value : undefined;
}).get();
$('#Voltes5').val(spaceval.join(' ')+" "+val.join(', '))
});
});
Add a class spaceNeeded to html elements :
<input class="combine spaceNeeded" id="input1" disabled="true" value="Happy"></input>
DEMO

$(document).ready(function () {
$('#LaserSword').on('click', function () {
var res = []
$('.combine').not('#Voltes5').each(function() {
res.push($(this).val())
})
$('#Voltes5').val(res.join(',').replace(/,/, ' '))
});
});
demo

jQuery focus() and empty field

I want to empty a login field when it is selected. I'm working with a JS/jQuery-Book and copied the example exactly like this into my document but it doesnt want to work...
Field:
<input type="text" id="username" value="Username" name="username" />
jQuery:
$(document).ready(function(){
$("#username").focus(function(){
var field = $(this);
if(field.val() == field.attr("defaultValue")){
field.val(""); // also tried field.val() = "";
}
});
});
I already put an alert() after each line and I figured out that it doesnt go into the if-statement.

You can try this...
$("#username").focus(function(){
var field = $(this);
var username=field.attr("value");
if(field.val() == username){
field.val("");
}
});
It is tested and work properly with your attr also....

$("#username").focus(function(){
$(this).val("");
});
As simple as it can get.

Use .prop() (see the jsfiddle):
$("#username").focus(function(){
var field = $(this);
if(field.val() == field.prop("defaultValue")) {
field.val("");
}
});

Try it:
<input type="text" id="username" value="Username" name="username" defaultValue="" />
And try it:
$(document).ready(function(){
$("#username").focus(function(){
if($(this).val() === $(this).attr("defaultValue")){
$(this).val("");
}
});
});

Try this....
$(document).ready(function(){
var user = $("#username").val();
$("#username").focus(function()
{
if($(this).val()==user)
$(this).val("");
});
});
This works fine for me.

Use jQuery method prop to get the DOM attribute instead of attr.
$(document).ready(function(){
$("#username").focus(function(){
var field = $(this);
if(field.val() == field.prop("defaultValue")){ // or: field.val() == field[0].defaultValue
field.val("");
}
});
});