this is test I created, how can I apply the button disable or enable to both inputs? As you can see the below code only works '.link_address'. I set keyup since once dom is loaded, we still need to check for weather inputs are empty or not. what am I doing wrong here? I tried foreach that checks all inputs under 'input_fields_wrap' , maybe I set it up wrong, but wasn't working either
$(document).ready(function() {
$('.confirm-btn').attr('disabled', true);
var valid_check = $('.link_address') || $('.link_name');
valid_check.keyup(function() {
if ($(this).val().length != 0) {
$('.confirm-btn').attr('disabled', false);
} else {
$('.confirm-btn').attr('disabled', true);
}
})
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="input_fields_wrap">
<input type="text" class="link_address">
<input type="text" class="link_name">
</div>
<button class="confirm-btn">Add More Fields</button>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="./js/test.js"></script>
</body>
</html>
Your current statement is var valid_check = $('.link_address') || $('.link_name');.
Remember, || is a Javascript construct, not some kind jQuery magic. It has no special combination abilities when used with jQuery, it only means what it has always meant: a logical OR comparison.
So what you're saying is "If $('.link_address') is a truthy value, set valid_check to that. If not, then set valid_check to $('.link_name')". However, jQuery objects are always truthy, so it will never touch $('.link_name') with that expression.
jQuery has it's own way of combining multiple selectors in to one object, which I have demonstrated below. (Also, you want to use prop instead of attr, trust me).
$(document).ready(function() {
$('.confirm-btn').attr('disabled', true);
var valid_check = $('.link_address,.link_name');
valid_check.keyup(function () {
if ($('.link_address').val().length != 0 && $('.link_name').val().length != 0) {
$('.confirm-btn').prop('disabled', false);
}
else {
$('.confirm-btn').prop('disabled', true);
}
})
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="input_fields_wrap">
<input type="text" class="link_address">
<input type="text" class="link_name">
</div>
<button class="confirm-btn">Add More Fields</button>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="./js/test.js"></script>
</body>
</html>
Here's what you can do:
Note: .input_fields_wrap :input is probably not the best selector here, you should make sure it only captures the inputs that are relevant.
// Upon page load
$(() => {
// When user releases a key on any relevant input field
$('.input_fields_wrap :input').on('keyup', () => {
// Disable confirm button if at least one of them has an empty value
$('.confirm-btn')
.prop('disabled', $('.input_fields_wrap :input')
.toArray()
.some(input => $(input).val().length === 0)
);
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="input_fields_wrap">
<input type="text" class="link_address">
<input type="text" class="link_name">
</div>
<button class="confirm-btn" disabled>Add More Fields</button>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="./js/test.js"></script>
</body>
</html>
Currently you have var valid_check = $('.link_address') || $('.link_name');
which means your variable (valid_check) will contain a handle to one, or the other. Since the first one is always found, the OR part of it is not executed (by-passed).
The event listener is, thus, only applied to the first element (input) and never the second.
You may want to change your selector so that it applies to all the fields you want to take into account for validation. I used $("input") but you can be more specific if you want.
Something like:
$(document).ready(function() {
// start with the button disabled
$('.confirm-btn').attr('disabled', true);
$(".input_fields_wrap > input").on('keyup', function() {
// all the inputs into an array
var inputList = $(".input_fields_wrap > input");
// check to see if one has a value length of 0 (i.e. no input)
var isDisabled = inputList.toArray().some(f => $(f).val().length === 0);
// enable/disable button now
$('.confirm-btn').attr('disabled', isDisabled);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input_fields_wrap">
<input type="text" class="link_address">
<input type="text" class="link_name">
</div>
<button class="confirm-btn">Add More Fields</button>
Related
I'm curious about how to clear an input on space click while typing in that input. I completely have no idea how to do this. For now I'm at point as I can clear input while NOT typing, but don't know how to do that on the other way.
That's my code for now:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="textbox" class="abc">
</section>
<script>
document.addEventListener("keyup", event => {
if(event.code === "Space")
document.querySelector(".abc").setAttribute("value", "");
});
</script>
</body>
</html>```
You should use 'value' to reset your input element like:
document.addEventListener('keyup', (event) => {
if (event.code === 'Space') {
document.querySelector('.abc').value = ''
}
})
In your code your are adding the attribute 'value' into your Input Html element, that is not the current value in your input html element.
I'm working on an app that makes fetch calls to a dictionary API based on the user's input. The problem is, I can't seem to get the input value from the search bar. Currently, all that's being logged to the console is an empty string. I currently have my code inside of a DOMContentLoaded event listener. When I take my code out of the DOMContentLoaded function, I am getting a null value returned. This is incredibly straightforward but I can't seem to figure out what is getting muddled here. Here is the code;
window.addEventListener('DOMContentLoaded', () => {
const searchBar = document.getElementById('search-bar');
const userInput = searchBar.value;
const searchButton = document.getElementById('search-button');
const test = () => console.log(userInput);
searchButton.addEventListener('click', test);
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="app.js"></script>
<title>Dictionary</title>
</head>
<body>
<h1>Dictionary</h1>
<input type="text" id="search-bar" placeholder="Find a definition"/>
<button id="search-button">Search</button>
<div id="results-area">
</div>
</body>
</html>
Thanks for the help.
The issue was you're getting always the first value of input which is empty, to get the new value call searchBar.value on the click of button.
window.addEventListener('DOMContentLoaded', () => {
const searchBar = document.getElementById('search-bar');
const searchButton = document.getElementById('search-button');
const getInputValue = () => {
let userInput = searchBar.value;
console.log(userInput);
}
searchButton.addEventListener('click', getInputValue);
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="app.js"></script>
<title>Dictionary</title>
</head>
<body>
<h1>Dictionary</h1>
<input type="text" id="search-bar" placeholder="Find a definition" />
<button id="search-button">Search</button>
<div id="results-area">
</div>
</body>
</html>
Here I'm trying to set index to my button id, for example if I have button id like unique , second button should have unique0, and third button should have unique1 like this. actually button in each loop so that i am same id with all buttons anyone pls let me know how to achieve it
note: i need button id's like unique0, unique1, unique2
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery#3.6.0/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<button id="unique" type="button" class="btn btn-primary">Primary</button>
</div>
<script>
$(function() {
var index = $("#unique").index(this);
$("#unique").append(index);
)};
</script>
</body>
</html>
Use a loop to change all the IDs.
$(".btn").each(function(i) {
this.id = 'unique' + i;
this.innerText += i;
});
I am attempting to check if an input contains anything in it upon the press of a button. It only seems to be checking the value upon the first load of the website. It is not detecting any values typed into the input even if the button is pressed again and again. I have tested this by setting the input value to something at default, which gave me a success. I am stumped as to why this is happening.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>test</title>
</head>
<body>
<label>Goals:</label>
<input type="text" class="input-box" id="goals" />
<input
type="button"
name="submit"
value="Submit"
class="button"
id="submit"
/>
</body>
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"
></script>
<script src="./app.js"></script>
</html>
JavaScript:
// Gather Inputs
let goals = document.getElementById("goals").value;
console.log("goals");
$("#submit").click(function() {
// Check Goals Input
if (goals === "") {
console.log("fail");
} else {
window.print();
}
});
You need to gather the inputs within the click() function.
$("#submit").click(function() {
// Gather Inputs
let goals = document.getElementById("goals").value;
console.log("goals");
// Check Goals Input
if (goals === "") {
console.log("fail");
} else {
window.print();
}
});
Using the javascript i am trying to disable users input after rich 80 charecters and if they press "Backspace" and remove some charecters then they can enter text again until rich again to 80. I have written code bellow but dont know why its not working. Any idea?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js" type="text/javascript"></script>
</head>
<body>
<input type="text" class="form-control" id="editText" aria-describedby="basic-addon2" value="Something">
<span class="input-group-addon" id="basic-addon2">/80</span>
<script type='text/javascript'>
$('#editText').keyup(updateCount);
$('#editText').keydown(updateCount);
function updateCount() {
var limitText = "/80";
var lengthNumber = $(this).val().length;
if (lengthNumber>80) {
$("#editText").keydown(false);
}else{
$("#editText").keydown(true);
}
$('#basic-addon2').text(lengthNumber+limitText);
}
</script>
</body>
</html>
<input type="text" name="usrname" maxlength="80">
You can use maxlength tag.
You can directly use input property maxlength="80":
<input maxlength="80">
https://jsfiddle.net/ramseyfeng/wph565xu/
If you cant use maxlength property, and you MUST use javascript / JQuery, you could use bellow code
var limitText = 10;
$('#editText').keydown(function(e){
if ($(this).val().length > limitText)
{
if (e.keyCode != 8)
{
e.preventDefault();
return false;
}
}
});
Demo : https://jsfiddle.net/5dctLbxq/