How do I target an input when 5 characters have been entered? - javascript

What I want to do is take an input for a zipcode and in jQuery if input#zip has 5 characters then function. Also same for a list box when the user chooses one of the choices, might be simpler?

$('#zip-input').keyup(function(){
if($(this).val().length == 5) {
//do your stuff here
}
})

For your zip scenario:
$("#zip").keypress(function() {
if ($(this).val() && $(this).val().length == 5) {
someFunction($(this).val());
}
});
For your listbox scenario:
$("#listbox").change(function() {
if ($(this).val()) {
someFunction($(this).val());
}
});

You might want to use a keyup event handler for instance.
$('input').bind('keyup', function(){
if($(this).val().length >= 5){
alert('5 characters');
return false;
}
});

Perhaps use the .change(). Each time change is fired get the length of the input and, if its 5 or more, run your code.

Related

how to disable a button if dialog box is empty

how can i make a button with the id #createEditListCloseBtn get disabled if a dialog box with the id #acronyms is empty?
I've tried the following:
if($("#acronyms").children("option:selected").length < 1)
{
$("#createEditListSaveBtn").addClass("state-btn-disabled")
.attr("disabled", "disabled");
}
You can use this:
$("#submit").prop("disabled", true);
setInterval(function () {
if ($("#username").val().length >= 1 && $("#password").val().length >= 1) {
$("#submit").prop("disabled", false);
} else {
$("#submit").prop("disabled", true);
}
}, 100);
It checks the values of two fields if they are equal or more than "1" and if so, it enables the submit button.
FIDDLE HERE: http://jsfiddle.net/nn8s2e8h/
If the problem is that your function only runs once when the page loads, then what you need is an event handler:
function updateDisabledStatus() {
if($("#acronyms").children("option:selected").length < 1)
{
$("#createEditListSaveBtn").addClass("state-btn-disabled")
.attr("disabled", "disabled");
} else {
$("#createEditListSaveBtn").removeClass("state-btn-disabled")
.removeAttr("disabled");
}
}
updateDisabledStatus();
$("#acronyms").on('change', updateDisabledStatus);
Unlike captain theo's answer, this doesn't waste the user's processing power checking the status 10 times a second.
Incidentally, do you really need to have a CSS class and a disabled attribute?

jQuery submit() - form is still sent

I have this
$("#formNewsletter").submit(function(){
return false;
})
It works as expected - the form is not submited.
When i write this, it seems like it is returning true (the form is being send)
$("#formNewsletter").submit(function(){
if($("#newsletterSelSpec div").length() > 0)
{
alert("Good");
}
else
{
alert("Please add at least one speciality!");
}
return false;
})
I would like to understand why is this happening and how can I make it work.
Thank you!
the property length isn't a method.
Use $("#newsletterSelSpec div").length > 0.
You can prevent the default behavior of an event using preventDefault() witch is a method in the first argument. (event).
$("#formNewsletter").submit(function(event) {
event.preventDefault();
if($("#newsletterSelSpec div").length() > 0)
{
alert("Good");
}
else
{
alert("Please add at least one speciality!");
}
});
Not sure, but the problem can be that the alert stops the process of the script and not the submit event.
$("#formNewsletter").submit(function(e) {
if ($("#newsletterSelSpec div").length > 0) {
alert("Good");
} else {
e.preventDefault(); // prevent the form submission
alert("Please add at least one speciality!");
}
});
NOTE
you're using .length(), but it should be .length only, that means
$("#newsletterSelSpec div").length

Jquery logics confusion

I want to make a bit of code that will check the value of an input box, count how many letters there are in the input box and if the value is divisable by 4 then to insert a -
Its so when the user is entering a code, in automatically inserts - after every 4 letters :)
Thanks
$("input").keyup(function () {
if(this.value.replace(/-/g, "").length % 4 == 0) {
this.value += "-";
}
});
This seems to work in the way you want
$(document).ready(function() {
$("#search").keyup(function(){
var stringFull = $(this).val();
if(stringFull.replace(/-/g, "").length % 4 == 0 ){
$(this).val(stringFull+"-");
}
});
});

function that adds <SPAN>

Good morning, I have a doubt.
I have a function that adds a click the User, the side of my input
Plus this gives an error. I wanted just once even if adicionace a person clicks the button several times the action. Do you have a scan after input if not add another
My code.
//th = Name of the input that will add, at the low <SPAN>
if(d.length == 0){
$(th).after('<SPAN class="erro">'+txt+'</SPAN>');
this.focus();
return false;
}
I would be very grateful for the help. :)
You should search for span.error first with $.find, and add it only if it isn't there already:
if(d.length == 0){
var errorSpan = $(th).find("span.error").length;
if(!errorSpan) {
$(th).after('<SPAN class="erro">'+txt+'</SPAN>');
this.focus();
}
return false;
}
use jQuery One. Attach a handler to an event for the elements. The handler is executed at most once per element.
$('#yourbuttonid').one('click', function() {
if(d.length == 0){
$(th).after('<SPAN class="erro">'+txt+'</SPAN>');
this.focus();
return false;
}
});
Register the event using $('selector').one('click', function(e) { /* your code */ }); to make it fire only once.
If th is the input name (a string), your selector should be like $('input[name='+th+']') instead of $(th)

how to include multiple if statement conditions in jQuery

I have an if statement that needs to look like this:
UPDATE
$("input#textbox").keypress(function(e){
key==e.which;
if($("input#textbox").length <=7 && (key===13 || $("div#search-button").click())){
/////SOME FUNCTION////
};
});
I'm trying to execute the "SOME FUNCTION" area only if the input length is <=7 and either the enter button is pressed or the "search" button is clicked.
Furthermore, I want to combine these 2 different function initiators so that they execute the same function but don't know how to do it:
$("input#textbox").keypress(function(e){
FUNCTION A
};
AND
$("div#search-button").click(function(){
FUNCTION A
};
EDIT:
This is what you have to do:
I am assuming that you want the text length and not number of textboxes.
You want to execute FunctionA when enter is pressed on textbox or search button is clicked:
$("input#textbox").keypress(function(e){
key==e.which;
if (key === 13) // if enter is pressed
{
if ("#textbox").val().length >= 7) //if textbox has more than 7 characters
{
functionA();
}
}
});
$("div#search-button").click(function(){ functionA();});
HTH
This is how I would do it:
$("#search-button").click(function(){
$("#textbox").keypress(function(e,clicked){
(clicked || e.which===13) && $(this).val().length < 8 && functionA();
}).trigger("keypress",[true]);
});
function functionA(){
alert("hey!");
}

Categories

Resources