We Keep Coding

jQuery - How do I use AND with Selector?

My code's function is to alert user if the ptype textfield is empty.
$("input[name*='ptype']").each(function() {
if ($(this).val() == "") {
$(this).css({'background-color' : '#feffe3'});
e.preventDefault();
alert("Enter Value!");
}
});
However, I need to add another criteria where another field amount is not 0. So that the function get triggered when ptype="" && amount!=0. I'm very new in jQuery, and I'm not sure how to use AND operator in here. I've tried to do some based on other questions but it seems not working.
$("input[name*='ptype'][amount!='0']").each(function() {
$("input[name*='ptype'] , [amount!='0']").each(function() {
What am I missing ?

You can do it with && sign. Code depends on where your amount field is located and what it is. If I guess right it should be something like this:
$("input[name*='ptype']").each(function() {
if ($(this).val() == "" && $(this).parent().find(input[name='amount']).val() != 0) {
$(this).css({'background-color' : '#feffe3'});
e.preventDefault();
alert("Enter Value!");
}
});

That code $("input[name*='ptype'][amount!='0']").each(function() { is valid. You have to check the CSS selectors list.
The problem maybe in your *= selection. input[name*="ptype"] means Selects every element whose name attribute value contains the substring "ptype".
$('input[name*="ptype"][amount!="0"]').each(function() {
if ($(this).val() == "") {
$(this).css({'background-color' : '#feffe3'});
e.preventDefault();
alert("Enter Value!");
}
});
Take a look at this test https://jsfiddle.net/xpvt214o/211871/

« where another field» is the key in question.
So you need a selector to check if a selected element is empty and another element is not zero.
Holà!
Logic problem here.
with $(selector) you can look up for some elements.
There is no AND / OR in selectors for many sets of matching element.
A selector is ONE set of matching elements.
No way this selector can check for an attribute value of another set.
So you have to know your markup and navigate a bit... And take care of variable types.
$("input[name*='ptype']").each(function() {
if ( parseInt( $(this).next("input").val() ) != 0) {
$(this).css({"background-color" : "red"});
alert("Enter Value!");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
ptype: <input type="text" name="ptype"><br>
amount: <input type="text" name="amount" value="1">
You have to look for another element's value here, from my understanding. So you have to know what is that "other" element and the methods to use may vary a lot depending on your HTML...

You can use this function in your button.
function check(e){
var verror = false;
$("input[name*='ptype']").each(function(index, value) {
var amount = $($("input[name='amount[]']").get(index)).val();
var ptype = $(this).val();
if(ptype.length <= 0 && amount.length > 0 ){
verror = true;
$(this).focus();
return false;
}
});
if(verror){
e.preventDefault();
alert("Enter Value!");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
ptype: <input type="text" name="ptype[]">
amount: <input type="text" name="amount[]" value="1"> <br>
ptype: <input type="text" name="ptype[]">
amount: <input type="text" name="amount[]" value="2"> <br>
<button type="button" onclick="check(event)">Click</button>
</form>

Same function to any numbers of inputs elements javascript

I have multiple elements like this:
<input type="text">
And I want to add slashes (/) so the output is a date mask.
I am using the following function, which only applies on IDs
$(document).ready(function() {
$("#fecha").keyup(function(){
if ($(this).val().length == 2){
$(this).val($(this).val() + "/");
}else if ($(this).val().length == 5){
$(this).val($(this).val() + "/");
}
});
How can i modify the above function to do a date format mask?

Select all input type="text" elements within parent element where keyup event handler should be called on. You can alternatively set a common .className at the elements and use .className selector $(".date")
$(document).ready(function() {
$("#form input[type=text]").keyup(function() {
if (this.value.length == 2) {
$(this).val(this.value + "/");
} else if (this.value.length == 5) {
$(this).val(this.value + "/");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<form id="form">
<input type="text" />
<input type="text" />
</form>

Jquery on keypress

I'm looking for a function that gives an alert when a certain character key (g) is pressed in the first position of a postal code, and then disables the submit button if the postal code has a letter G in the beginning.
Is this possible?
My current code to detect a key up on the postal code field at the moment is this:
$(document).ready(function() {
var someTextInputField = "#postal-code";
$(someTextInputField).on("keyup", function() {
alert('not a valid postal code');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="postal-code" />

Javascript without extra libraries
document.addEventListener("input", function(e) {
if (e.target.id === "postal-code") {
var disable = /^g/i.test(e.target.value),
submit = document.getElementById("submit");
if (disable && !submit.disabled) {
alert("You cannot start a postal code with a G");
}
submit.disabled = disable;
}
});
<input placeholder="Address" />
<input id="postal-code" placeholder="Postal Code" />
<button id="submit">Submit</button>
jQuery
$(document).on("input", "#postal-code", function (e) {
var disable = /^g/i.test(this.value),
$submit = $("#submit");
if (disable && !$submit.prop("disabled")) {
alert("You cannot start a postal code with a G");
}
$submit.prop("disabled", disable);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input placeholder="Address" />
<input id="postal-code" placeholder="Postal Code" />
<button id="submit">Submit</button>

Check this fiddle http://jsfiddle.net/oyc2L9sy/12/
html:
<input id="test" type="text" />
javascript:
$(document).ready(function() {
$("#test").on("keypress", function(e) {
if ((e.keyCode == '65') ||
(e.keyCode == '71')) {
alert('not a valid postal code');
return false;
}
});
});

You can use this.value[0] to get the first character of the input. Then test whether it's one of the allowed characters.
$("#input").on("keyup", function() {
if (this.value != '') {
var firstchar = this.value[0].toUpperCase();
if (firstchar != 'A' && firstchar != 'G') {
alert('not a valid postal code');
$("#submitID").prop("disabled", true);
} else {
$("#submitID").prop("disabled", false);
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="input"/>

check all input values of same class is empty jquery

Here I have many input text fields with same class like
<input type="text" class="MyClass"></input>
<input type="text" class="MyClass"></input>
<input type="text" class="MyClass"></input>
My requirement is to check wheather all input fields of this class is empty or not.
I've tried this
if(!('.MyClass').val()){
alert("empty");
}
But it doesn't make any result. Can anyone help?

You can check
$('button').click(function() {
var $nonempty = $('.MyClass').filter(function() {
return this.value != ''
});
if ($nonempty.length == 0) {
alert('empty')
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" class="MyClass" />
<input type="text" class="MyClass" />
<input type="text" class="MyClass" />
<button>test</button>
Or using a flag
$('button').click(function() {
var flag = false;
$('.MyClass').filter(function() {
if (this.value != '') {
flag = true;
//no need to iterate further
return false;
}
});
if (!flag) {
alert('empty')
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" class="MyClass" />
<input type="text" class="MyClass" />
<input type="text" class="MyClass" />
<button>test</button>

You can compare the length of number of input with number of empty input using :
var allemptylength=$(".MyClass").filter(function() {
return this.value.length !== 0;
})});
if($('.MyClass').length== allemptylength.length){
alert("all empty");
}
Working Demo

To make sure each classes are checked, use
$.each($('.MyClass'),function() {
if ($(this).val().length == 0) {
alert('empty');
}
});

You can check it like this:
var isEmpty = !$('.MyClass').filter(function() {
return this.value.trim();
}).length;
Also remove all </input> tags. input elements are self-closable.

try this
var hasNoValue;
$('.MyClass').each(function(i) {
if ($(this).val() == '') {
hasNoValue = true;
}
});
if (hasNoValue) {
alert('All have no value');
}

try is(':checked')
$('.MyClass').each(function(){
alert($(this).is(':checked');)
});
this will alert only the checked elements.

$('input').each(function(index,value){
if($(this).val()!=''){
$(this).addClass('success');
}else{
$(this).removeClass('someClass');
$(this).addClass('warning');
$(this).css('border', '1px solid red');
//do something else...
}
});

Try this . 100% working..
var emptyLength = $(".MyClass").filter(function() {
return this.value == "";
}).length;
if (emptyLength > 0)
{
alert("Please enter all peramerter's value");
return;
}
Thanks.

Try this. It works for me
var flag = 1;
$(".MyClass").each(function(i){
if ($(this).val() == "")
flag++;
});
if (flag == 1)
alert('all have values');
else
alert('some or all doesn\'t have value');

Jquery can't check checkbox

Refer to this fiddle:
http://jsfiddle.net/FwSF3/
HTML:
<input type="password" id="Password" tabindex="2">
<input id="PasswordChk" type="checkbox" disabled="disabled"/>
JS:
$('#Password').on("keyup", function () {
var password = $.trim($(this).val());
if(password.length == 0){
$('#PasswordChk').removeAttr("checked");
}else{
$('#PasswordChk').attr("checked", "checked");
}
});
When I first type into the textbox, the checkbox is set. When I remove the text (length = 0) it's unchecked.
However after unchecking, it can't re-check the checbox.
Anyone know how to get around this?

Use .prop() instead of .attr() - read prop vs attr
$('#Password').on("keyup", function () {
var password = $.trim($(this).val());
$('#PasswordChk').prop("checked", password.length > 0);
});
Demo: Fiddle