We Keep Coding

jQuery check value of every input in a given div

I have the following validation script I'm trying to get working:
function validate(id){
// checks only inputs with type "text" inside div id-calc
// e.g #haveprice-calc or #dontknow-calc
var input = $("." + id + "-calc input[type='text']").val();
if (input == ""){
alert("You must fill in all items on the form");
}
}
It is passed an ID (the ID is a div that wraps around these specific elements) and then I would like it to check every input of type text within the div=ID
At present, this code works only for the first input in the HTML. If it's unfilled, the alert appears. Once you fill it, the alert will no longer appear. But it doesn't then check the NEXT text input in the DOM.
Some example HTML
<div class="dontknow-calc">
<label>My materials cost</label><input type="text" name="materialcost" id="materialcost" /><br />
<label>My packing materials cost</label><input type="text" name="packingmaterialcost" id="packingmaterialcost" /><br />
<div class="btn btnCalc" id="dontknow">Calculate</div>
</div>
I expect it needs a foreach loop to run through every text element but I'm not sure how.
JSFiddle

Try this:
function validate(id){
// checks only inputs with type "text" inside div id-calc
// e.g #haveprice-calc or #dontknow-calc
var div = $("." + id + "-calc");
$(div).find("input[type = 'text']").each(function() {
if(this.value == "") {
alert("You must fill in all items on the form");
return false;
}
});
}

You can use .each() for this:
function validate(id)
{
$("." + id + "-calc input[type='text']").each(function()
{
if (this.value == "")
{
alert("You must fill in all items on the form");
return false;
}
});
}

I think what you are trying to do is to give an alert if any of the input fields are empty, in that case use .filter() to find out if any of the inputs are empty if any input is empty then show the alert
$(".btnCalc").click(function() {
var id = this.id;
var valid = validate(id);
console.log(valid)
});
function validate(id) {
// checks only inputs with type "text" inside div id-calc
// e.g #haveprice-calc or #dontknow-calc
var $empties = $("." + id + "-calc input[type='text']").filter(function() {
//may also use .trim() like !this.value.trim();
return !this.value
});
if ($empties.length) {
alert("You must fill in all items on the form");
return false;
}
return true;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="dontknow-calc">
<label>My materials cost</label>
<input type="text" name="materialcost" id="materialcost" />
<br />
<label>My packing materials cost</label>
<input type="text" name="packingmaterialcost" id="packingmaterialcost" />
<br />
<div class="btn btnCalc" id="dontknow">Calculate</div>
</div>
<br />
<br />
<div class="haveprice-calc">
<label>My other field</label>
<input type="text" name="materiotherfieldalcost" id="otherfield" />
<br />
<div class="btn btnCalc" id="haveprice">Calculate</div>
</div>

Or you could use the jQuery.Validation plugin (see http://jqueryvalidation.org/category/methods/ for some examples), and then use something like this:
$( "#myform" ).validate({
rules: {
field1: {
required: true
}
field2: {
required: true
}
// etc...
}
});

if you want to use each loop you can write some code like this:
$("." + id + "-calc input[type='text']").each(function(index,val){
// for current item value
console.log(val); // to see what's in the val argument
current_item_value = val.value;
});
I hope it helps

Cannot get jQuery to get 2 values of input boxes

I am developing a little script on jsfiddle.com
I can get it to work with one element like in this jsfiddle: http://jsfiddle.net/8hXGq/3/
Here's the jQuery code:
jQuery(function() {
$("input[name=action]").click(function() {
value = $(':Password').val();
alert(value);
});
})
but then when I try to get 2 input values like in this jsfiddle it does not work
Visit http://jsfiddle.net/8hXGq/2/
Here's the jQuery code
jQuery(function(){
$("input[name=action]").click(function(){
newas = $(':Login').val();
value = $(':Password').val();
alert(value);
alert(newas);
});
})
How do I fix this problem?

':Password' is shorthand for input[type="password] thus works. Your problem is $(':Login') here you are looking for element input[type="Login] which doesn't exists
Use
jQuery(function () {
$("input[name=action]").click(function () {
newas = $("input[name=Login]").val();
alert(newas);
value = $(':Password').val();
alert(value);
});
})
DEMO

Try this:
jQuery(function(){
$("input[name=action]").click(function(){
newas = $('input[name=Login]').val();
value = $('input[name=Password]').val();
alert(value);
alert(newas);
});
});
DEMO

Please try this:
if get value on the basis of name property then use it:
jQuery(function () {
$("input[name=action]").click(function () {
var newas = $('input[name=Login]').val();
var value = $('input[name=Password]').val();
alert(value);
alert(newas);
});
});
If get value on the basis of id then use it:
jQuery(function () {
$("input[name=action]").click(function () {
var newas = $("input[id$='Login']").val();
var value = $("input[id$='Password']").val()
alert(value);
alert(newas);
});
});

Change your jquery to look like this
jQuery(function(){
$("input[name=action]").click(function(){
newas = $('[name=Login]').val();
value = $('[name=Password]').val();
alert(value);
alert(newas);
});
});

:Password is pseudo for type password, not for name. To access by name use [name=Login].
Also use var keyword as without var you initialized two global variable which is not allowed in ecmascript 5 strict mode and cause confusion sometime:
jQuery(function () {
$("input[name=action]").click(function () {
var newas = $('input[name=Login]').val();
var value = $(':Password').val();
alert(value);
alert(newas);
});
})
Here is Demo

:password is the Password selector of jQuery, thats why its not working with other pseudos.
https://api.jquery.com/password-selector/
i recommend NOT to do it how you did. instead it'll be better to acces by IDs.
this is working:
http://jsfiddle.net/Vy23k/1/
<input type="text" size="20" maxlength="15" name="login" id="login" />
<input type="password" size="32" maxlength="64" name="password" autocomplete="off" id="password" />
<input type="submit" name="action" class="button" value="Preview">
jQuery(function(){
$("input[name=action]").click(function(){
login = $("#login").val();
//pw = $(':Password').val(); //pseudo selector
pw = $("#password").val(); //better way
alert(login + " - " + pw);
});
})

Detect the largest number in inputs

I want Detect the largest number in inputs and done alert for it, How is it in following code by jQuery?
Example: http://jsfiddle.net/3cTqD/
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<button>Click Me</button>
$('button').live('click', function(){
$('input').each(function(){
var val = $('this').val();
alert(val); // i want done alert largest number from input
})
})

$( 'button' ).live( 'click', function(){
alert(
Math.max.apply( Math, $( 'input' ).map( function(){
return 0|this.value;
}).get())
);
} );

$('button').live('click', function(){
var i = 0;
$('input').each(function(){
var val = $(this).val();
if(val > i) i = val;
});
alert(i);
});

comparing 50 pairs of input textboxes

If I have 50 pairs of input textboxes, i.e.
<input type="text" id="name_0" /><input type="text" id="name_1" />
<input type="text" id="dept_0" /><input type="text" id="dept_1" />
...
<input type="text" id="age_0" /><input type="text" id="age_1" />
<input type="text" id="weight_0" /><input type="text" id="weight_1" />
i.e 50 variables of these.
When the page loads, I populate each pair with identical data.
What is the best way to check if the _0 is different from the _1?
then returning a message showing which pair has changed.
The comparison should take place once the values have been changed and a button is clicked.

$("input[type=text]").each(function () {
var $this = $(this);
if ( /_0$/.test(this.id) ) {
if ( $this.val() != $this.next("input").val() ) {
$this.css("color", "red"); // or whatever
}
}
});

Tomalak's answer should work, but just in case your inputs are scattered or not necessarily beside each other, something like this should suffice.
$('input:text[id$="_0"]').each(function() {
var new_id = this.id.replace('_0','_1');
if ($(this).val() !== $('input#'+new_id).val()) {
// not the same
}
});

var changed = [];
$("[id$=_0]").each(function() {
var name = this.id.replace("_0", "");
if (this.value != $("#" + name + "_1").val()) {
changed.push(name);
}
});
console.log(changed);

the value parameter is not being passed using jquery?

<textarea name="inputField" id="inputField" tabindex="1" rows="2" cols="40"onblur="DoBlur(this);" onfocus="DoFocus(this);" ></textarea>
<input class="submitButton inact" name="submit" type="submit" value="update" disabled="disabled" />
<input name="status_id" type="hidden">
the javascript(jquery):
function insertParamIntoField(anchor, param, field) {
var query = anchor.search.substring(1, anchor.search.length).split('&');
for(var i = 0, kv; i < query.length; i++) {
kv = query[i].split('=', 2);
if (kv[0] == param) {
field.value = kv[1];
return;
}
}
}
$(function () {
$("a.reply").click(function (e) {
console.log("clicked");
insertParamIntoField(this,"status_id",$("#status_id"));
insertParamIntoField(this, "replyto", $("#inputField")[0]);
$("#inputField").focus()
$("#inputField").val($("#inputField").val() + ' ');
e.preventDefault();
return false; // prevent default action
});
});
the status_id parameter is not being passed:
post.php?reply_to=#muna&status_id=345667
it always give a value of zero, when its meant to give 345667

You have two problems, the first #Guffa mentioned, you need an ID for $("#status_id") to work, like this:
<input id="status_id" name="status_id" type="hidden">
The other is here:
insertParamIntoField(this,"status_id",$("#status_id"));
insertParamIntoField(this, "replyto", $("#inputField")[0]);
Notice you don't have a [0] there, so you're setting .value on the jQuery object, not the element itself. Instead you need this:
insertParamIntoField(this,"status_id",$("#status_id")[0]);
insertParamIntoField(this, "replyto", $("#inputField")[0]);
Or change your method to use .val(), like this:
field.val(kv[1]);
And strip off the [0] calls so they're just
insertParamIntoField(this,"status_id",$("#status_id"));
insertParamIntoField(this, "replyto", $("#inputField"));

You don't have any id on the field, so when you try to set the value using $('#status_id') it won't put the value anywhere.
Add the id to the field:
<input name="status_id" id="status_id" type="hidden">

add value to input
<input name="status_id" id="status_id" value="345667" type="hidden">