I have this code:
HTML
<input type="text"
data-placement="bottom"
data-trigger="manual"
data-content=""
name="momlastname" id="momlastname"
ng-model="momlastname"
maxlength="70" />
JavaScript
$('#momlastname').keyup(function (f) {
console.log($(this).val().length);
if ($(this).val().length == 2) {
$('#momlastname').popover({
trigger:'manual',
content:function(){
return 'Start.';
}
});
$('#momlastname').popover('show');
$('#momlastname').addClass('error');
}
else {
$('#momlastname').popover('hide');
}
});
When I take out the else part, it works but I need the else part too so that the popover is hidden when the field length is less than 2 or greater than 2.
JSFIDDLE https://jsfiddle.net/seadonk/xksfj23e/
To hide the popup when field length != 2 and show it otherwise, the following code works. See JSFIDDLE above.
$('#momlastname').keyup(function (f) {
console.log($(this).val().length);
if ($(this).val().length == 2) {
$('#momlastname').popover({
trigger:'manual',
content:function(){
return 'Start.';
}
});
$('#momlastname').popover('show');
$('#momlastname').addClass('error');
}
else {
$('#momlastname').popover('hide');
}
});
Related
I am currently running this as I don't want users to press enter on their keyboard to launch an input and it works.
jQuery(window).keydown(function(event){
if(event.keyCode == 13) {
event.preventDefault();
return false;
}
});
However I have one part of the site where this shouldn't be avoided and i tried the following but it didn't work
if(jQuery(".tab-pane").is("#step6")) {
jQuery(window).keydown(function(e){
if(e.keyCode == 13) {
return true;
}
});
}
I guess the first overrides the second
Yes..first function is replace the second one.so use like this .Include the second function inside the first .Events are same, condition only different
jQuery(window).keydown(function(event){
if(event.keyCode == 13) {
if(jQuery(".tab-pane").is("#step6")) {
return true;
}
else{
event.preventDefault();
return false;
}
}
});
You may need to slightly tweek the code & check this condition inside keydown
jQuery(window).keydown(function(event) {
// checking current keycode
if (13 == event.keyCode) {
// the is condition
if (jQuery(".tab-pane").is("#step6")) {
return !0; // will return true
}
event.preventDefault(); // otherwise will prevent default behaviour
return !1 // will return false
}
});
I suggest attaching the event of the click to each input not to the window :
<input type="text" onkeypress="myFunction(event)">
myFunction() should be like this :
function myFunction(e) {
if (e.keyCode == 13) {
//do whatever you want
}
}
Hope this was useful
Try using classes to make it easy.. just add the class prevent-enter on the inputs you want to avoid the keypress.
$(document).ready(function() {
$('.prevent-enter').keydown(function(e) {
if (e.keyCode == 13) {
e.preventDefault();
return false;
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="get" action="javascript:alert('form submitted');">
<input class="prevent-enter" placeholder="This prevents enter keypress" /><br>
<input class="" placeholder="This accepts enter keypress" /><br>
<input type="submit" />
</form>
I want to check whether the required field is empty or not.
I used the code below.
$(":input").each(function() {
if($(this).data('label')=='required')
{
if($(this).val() === "")
alert("Empty Fields!!");
}
});
But it was alert more than one time.
JSFiddle:
http://jsfiddle.net/hbk2a5qo/3/
Why not directly use required attribute in HTML:
<input id="name"type="text" data-label="required" required/>
You need to use a flag
$(document).ready(function () {
$("#submit").click(function (e) {
e.preventDefault()
AlertSave();
});
});
function AlertSave() {
//use the flag to set the valid status in the loop
var valid = true;
//iterate over only the required elements
$(':input[data-label="required"]').each(function () {
if ($(this).val() === "") {
valid = false;
return false;
}
});
if (valid) {
//do your save
} else {
alert("Empty Fields!!");
}
}
Demo: Fiddle
As you have used $(":input").each() so it will go through all fields. But you can use flag to show alert only once.
function AlertSave() {
var alertShown=false;
$(":input").each(function() {
if($(this).data('label')=='required')
{
if($(this).val() === "" && !alertShown)
{
alertShown=true;
alert("Empty Fields!!");
}
}
});
}
You Updated Fiddle
By using required attribute (which is recommended), this will return all the required input fields that has no value:
var inputsWithMissingValues = $('input[required]').filter(function(i, input) {
return !input.value.length;
});
So, if the length of that is more than zero, then you have required fields with missing value.
I'm currently working with a news website and I want to make a search function that disables the search button until the input has three characters.
Here's my current code
<div style="margin-left: 300px; margin-top: 25px; margin-bottom: 20px;">
<form action="searchnews.php?p=0" method="POST">
<input type="text" id="searchterm" name="searchterm" placeholder="Buscar Término...">
<input type="submit" id="search" value="Buscar Noticia" class="search" disabled="disabled" />
</div>
And I added this JS file:
(function() {
$('form > input').keyup(function() {
var empty = false;
$('form > input').each(function() {
if ($(this).val() == '') {
empty = true;
}
});
if (empty) {
$('#search').attr('disabled', 'disabled');
} else {
$('#search').removeAttr('disabled');
}
});
})()
I want to make it stop disabling the button until the third character is in, not when the first one is, I've tried everything and nothing works. Any ideas? I'd really appreciate it.
Why dont you try the .length?
if ($(this).val().length <= 3) {
empty = true;
}
In the answer by #Dim_Ch, .lenght isn't a function.
You may use this
if ($(this).val().length <= 3) {
empty = true;
}
Try the following. It worked. It'll also reduce the function length.
(function() {
$('input#searchterm').keyup(function() {
var enable = false;
if ($(this).val().length >= 3) {
enable = true;
}
if (enable) {
$('#search').removeAttr('disabled');
} else{
$('#search').attr('disabled','disabled');
}
});
})()
Edit: I'll reduce it further:
(function() {
$('input#searchterm').keyup(function() {
$('#search').attr('disabled', $(this).val().length < 3? true : false);
});
})()
(function() {
$('form > input').keyup(function() {
var empty = false;
$(this).each(function() {
console.log($(this).val().length);
if ($(this).val().length >= 3) {
empty = true;
}
});
if (!empty) {
$('#search').attr('disabled', 'disabled');
} else {
$('#search').removeAttr('disabled');
}
});
})()
I am trying to disable the textbox using keyup functionality. I have a TextArea and a Text Box. Now i use a keyup operation on backspace key, like if the length of content inside textarea is 3 it should disable the textbox. I also have an alert message which pops when the length of content in text area is 3. Code worked for the pop up but it doesnot worked for the textbox. What am i missing? Please help. Here is my code:
$('#comment').keyup(function() {
if (event.which == 8) {
var txt = $('#comment').val().length;
if(txt == 3)
{
alert("backspace");
$("#text1").attr("diasbled", "diasbled");
}
}
});
And here is the JSfiddle for the purpose.
You have some typo here it should be disabled not diasbled
Try this
$('#comment').keyup(function () {
var len = $(this).val().length;
if (len >= 3) {
$("#text1").prop("disabled", true);
}
else{
$("#text1").prop("disabled", false);
}
});
DEMO
You need to do:
1) this.value.length to get the total characters length of your textarea
2) From jQuery version 1.6 , use .prop() instead of .attr() to set the properties of an element
3) Correct the typo: it should be disabled not diasbled
$('#comment').keyup(function () {
if (this.value.length >= 3) {
$("#text1").prop("disabled", true);
} else {
$("#text1").prop("disabled", false);
}
});
Updated Fiddle
Your code is fine.. but you mispelled the "disabled" in your code. Here's the sample..
<html>
<head>
<title>js test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<input type="text" value="" id="comment" />
<input type="text" value="" id="text1" />
<script type="text/javascript">
$(document).ready(function()
{
$('#comment').keyup(function(e) {
if (e.which == 8) {
var txt = $('#comment').val().length;
if(txt == 3)
{
alert("backspace");
$("#text1").attr("disabled", "disabled");
}
}
});
});
</script>
</body>
Use prop instead of attr also pass event to function
$('#comment').keyup(function (event) { //and event here
if (event.which == 8) {
if ($(this).val().length >= 3) {
$("#text1").prop("disabled", true);
}
}
});
i am using jquery to validate textbox value.
I have 2 textbox, txt1 & txt2. now, i wrote a jquery function.
$("#txt1").blur(function () {
if ($("#txt1").val() == "") {
$("#scarriername").show();
$("#txt1").focus();
}
else {
$("#scarriername").hide();
}
});
$("#txt2").blur(function () {
if ($("#txt2").val() == "") {
$("#sscaccode").show();
$("#txt2").focus();
}
else {
$("#sscaccode").hide();
}
});
Now, issue is. when i run the project. my position is on txt1 and when u use Tab to go txt2 with null or blank value. Focus event fire for both one & browser become hang due to infinite loop of FOCUS.
so, how can i handle it?
You should insert a setTimeout in order to set the focus after the blur event.
Second, you should insert a semaphore in order to avoid a loop (see code and comments):
var status = "valid"; // semaphore
$("#txt1").blur(function (e) {
// if we are in programmatically focus, ignore this handler
if(status == "invalid")
return ;
if ($("#txt1").val() == "") {
$("#scarriername").show();
// set semaphore
status = "invalid";
// use setTimeout in order to set focus in the right moment
setTimeout(function() {$("#txt1").focus(); status = "valid"},0);
}
else {
$("#scarriername").hide();
}
});
// same as txt1
$("#txt2").blur(function () {
if(status == "invalid")
return ;
if ($("#txt2").val() == "") {
$("#sscaccode").show();
setTimeout(function() {$("#txt2").focus(); status = "valid"},0);
}
else {
$("#sscaccode").hide();
}
});
DEMO http://jsfiddle.net/SszUf/
try this
<input type="text" id="txt1" />
<input type="text" id="txt2" />
$("#txt2").focus(function () {
if ($("#txt1").val() == "") {
$("#scarriername").show();
$("#txt1").focus();
}
//alert(1);
});
hope this help you
Apparently when you hit the tab button you trigger blur event for both text boxes. With your code when txt1 gets blurred and has no content you get the focus on txt1, but when you do that you also trigger the blur event for txt2 and since it does not have any text in it you get the focus back to txt2. This keeps on going and going, focusing on txt1 and then txt2 and then txt1 and then txt2... You could put a simple if check on the second blur event handler to see if txt1 is still empty, and if so keep the focus on txt1 not allowing the client to pass to txt2:
$("#txt1").blur(function () {
if ($("#txt1").val() == "") {
$("#scarriername").show();
$("#txt1").focus();
}
else {
$("#scarriername").hide();
}
});
$("#txt2").blur(function () {
if ($("#txt2").val() == "" && $("#txt1").val() != "") {
$("#sscaccode").show();
$("#txt2").focus();
}
else {
$("#sscaccode").hide();
}
});
This is also one of the approach to solve your problem on pressing tab key.
$("#txt1").bind('keydown',function(e)
{
if(e.keyCode == 9)
{
if ($("#txt1").val() == "") {
$("#scarriername").show();
return false;
}
else {
$("#scarriername").hide();
}
}
});
$("#txt2").bind('keydown',function(e)
{
if(e.keyCode == 9)
{
if ($("#txt2").val() == "") {
$("#sscaccode").show();
return false;
}
else {
$("#sscaccode").hide();
}
}
});
$("#txt1").blur(function () {
if ($("#txt1").val() == "") {
$("#scarriername").show();
if ($("input:focus").length == 0)
$("#txt1").focus();
}
else {
$("#scarriername").hide();
}
});
Just add a line can solve this problem
By the way, the #scarriername should not be something like popup window, which will trigger other blur events
You can test the file below:
<!doctype html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<input id="txt1"><input id="txt2"><input id="txt3"><input id="txt4">
<hr>
<h1 id="h1"></h1>
</body>
<script type="text/javascript">
$(function(){
$("input").blur(function () {
if ($(this).val() == "") {
document.getElementById("h1").innerHTML += "123";
$(this).focus();
}
});});
</script>
</html>