I would like to set complicated conditions.
My desired result is when I input some value and click the button, a confirmation Have you input ? will be alerted, and then clicked with input will be alerted, and if I don't input some value, clicked without input will be alerted.
But now, when I input some value, and click on the button, all three alerts appear together in this order-
clicked without input → Have you input ?→clicked with input.
How can I achieve the desired result when some value is inputted?
const myFunc = () => {
console.log("exec");
document.getElementById('button').addEventListener('click',confirmation);
}
const confirmation = () => {
const ret = confirm('Have you input ?');
if(ret){
alert("clicked with input")
} else {
return false
}
}
const clicked = () => {
alert("clicked without input");
}
<input oninput="myFunc()">
<button id="button" onclick="clicked()">open another window</button>
Check the value of the input before triggering the alert()
const clicked = () => {
const inputValue = document.getElementById('input').value;
if (inputValue) {
if (confirm('Have you input ?')){
alert(`clicked with input: ${inputValue}`)
}
} else {
alert("clicked without input");
}
}
<input id='input'>
<button id="button" onclick="clicked()">open another window</button>
Related
So i am trying to get the value of an input tag with javascript and show it on the console but it doesnot work at all. this is my code, what am i missing here?
const userTextValue = document.getElementById('user-text').value;
const show = () => {
console.log(userTextValue);
}
const submit = document.getElementById('submit');
submit.addEventListener('click', show);
Access the input value when you click on show button, so that you get the updated value entered by user.
const show = () => {
const userTextValue = document.getElementById('user-text').value;
console.log(userTextValue);
}
const submit = document.getElementById('submit');
submit.addEventListener('click', show);
<div>
<input id="user-text" />
<button id="submit">Show</button>
</div>
when you submit the page refresh by default to prevent that you can do it like this
const show = (e) =>{
e.preventDefault();
console.log(userTextValue);
}
i'm newbie in JS.
as in the title, I want to create a disable button when the condition is met based on the following code:
<input class="input" type="text">
<button class="button">Click Me</button>
<script>
let input = document.querySelector(".input");
let button = document.querySelector(".button");
button.disabled = true;
input.addEventListener("change", stateHandle);
function stateHandle() {
if(document.querySelector(".input").value === "") {
button.disabled = true;
} else {
button.disabled = false;
}
}
</script>
value on input is auto generated after 500ms. the code above works if after the input value appears and then I enter any number. what I want is when the input value appears then the button will automatically be in the enable position.
Based on #David's answer, I added new Events and dispatch them later.
This is the updated code :
<script >
let input = document.querySelector("#input");
let button = document.querySelector("#button");
button.disabled = true; //setting button state to disabled
const event = new Event("change"); //adding new event
input.addEventListener("change", stateHandle);
function stateHandle() {
var t = document.getElementById("jarak").value,
check = "luar";
if (new RegExp('\\b' + check + '\\b').test(t)) {
button.disabled = true; //button remains disabled
} else {
button.disabled = false; //button is enabled
}
}
setTimeout(function() {
input.dispatchEvent(event); //dispatching event after 700ms
}, 700);
</script>
I need to enable the submit button as soon as all input fields has value enterred. I have two input fields type text and type password and a button which is disabled (I set its class as "disabled" than use CSS to change color etc..), I would like to remove that class whenever the above condition is met. I added 'change' and 'input' event listeners to all field like below:
const inputs = [...document.querySelectorAll('input[type="text"], input[type="password"]')];
const continueBtn = document.querySelector('continuebtn');
const signinForm = document.querySelector('#sign-in-form');
inputs.forEach((input) => {
input.addEventListener('input', function(e){
if (input.value !== '') {
continueBtn.classList.remove('disabled');
}else{
continueBtn.classList.add('disabled');
}
}
});
Tried with e.target.value.trim() === '' as well
I guess the above would be applied to all inputs and check if they're empty when the user is typing, but I'm not able to make it work: the button is being activated no matter what I do.
I would need some help in plain Javascript as this is what I'm currently learning. no jQuery. Thanks
Use the every() method to check all the inputs, not just the one that the user is currently editing.
const inputs = [...document.querySelectorAll('input[type="text"], input[type="password"]')];
const continueBtn = document.querySelector('#continuebtn');
const signinForm = document.querySelector('#sign-in-form');
inputs.forEach((input) => {
input.addEventListener('input', function(e) {
if (inputs.every(input => input.value.trim())) {
continueBtn.classList.remove('disabled');
} else {
continueBtn.classList.add('disabled');
}
});
});
#continuebtn.disabled {
background-color: grey;
}
<input type="text">
<input type="password">
<button id="continuebtn" class="disabled">Continue</button>
I've looked through numerous topics regarding this, but none of the solutions are fitting my need. I need to enable the submit button only if there is data going to be submitted, and disable it again if there is no data.
$("input").each(function() {
$(this).keyup(function() {
console.log("keyup event fired");
$("input").each(function() {
if ( $(this).val() !== "" ) {
empty = false;
} else {
empty = true;
}
});
if ( empty ) {
$("#download-project").addClass("isDisabled");
$("#download-project").click(function(e) {
e.preventDefault();
});
} else {
$("#download-project").removeClass("isDisabled");
$("#download-project").click(function(e) {
e.preventDefault();
$(".editor-form").submit();
});
}
});
});
My current code only enables the button, and than the if the user deletes the data, it doesn't disable the button. Looking at the console it also seems keyup is only firing once.
JSFiddle
You can add an input event listener to each of the input tags, which will fire when the value has been changed, and check if any of the input tags has a value that is only spaces.
const inputs = $('input'), downloadBtn = $('#download-project');
inputs.on('input', function(e){
var invalid = inputs.is(function(index, element){
return !$(element).val().trim();
});
if(invalid){
downloadBtn.addClass("isDisabled").prop("disabled", true);
} else {
downloadBtn.removeClass("isDisabled").prop("disabled", false);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
First Name: <input type="text"/><br/>
Last Name: <input type="text"/><br/>
Age: <input type="number"/><br/>
<button id="download-project" type="submit" disabled>
Submit
</button>
</form>
Try to put change event listener instead of keyup.
$("input#submit").prop("disabled", true);
let isOk = true;
$("input").change(function (){
$("input").each(()=>{
console.log(this);
if($(this).val() === "") {
isOk = false;
}
});
if(isOk) $("input#submit").prop("disabled", false);
})
Test: https://codepen.io/Opalecky/pen/xxwWmyJ
I'm trying to find a way that I can require two inputs to have text inside of them so I can toggle the disabled attribute on and off a button.
This would mean that when one input has text, the button is disabled. When both inputs have text, the button is enabled.
Here is my current code that I'm working with:
HTML:
<input name="e" placeholder="email">
<input name="p" placeholder="password">
<button id="submit_button" disabled>Submit</button>
JavaScript (no jQuery):
// Check if there is content in our form inputs and remove `disabled`
// from the button element.
var inputs = document.querySelectorAll('input[name="e"], input[name="p"]');
var button = document.querySelector('#submit_button');
[].forEach.call(inputs, function (e) {
e.addEventListener('input', function () {
// Set states for email and password inputs
if (this.value != "") {
button.removeAttribute('disabled');
} else {
button.setAttribute('disabled', '');
}
});
});
JSFiddle here
My thoughts with this code is that I would query the page for the two inputs, query for the button, and add an event listener that would check the input of each field, and when the value isn't empty, it would enable the button. Right now though, when you type something into either of the fields, regardless if both are filled in or not, the button becomes enabled.
How could I change this JavaScript so that both inputs must have text in order to enable the button?
How about this? :
var inputs = document.querySelectorAll('input[name="e"], input[name="p"]');
var button = document.querySelector('#submit_button');
[].forEach.call(inputs, function (e) {
e.addEventListener('input', function () {
var disabled = false;
[].forEach.call(inputs, function (inputElem) {
if(inputElem.value==''){
disabled = true;
}
});
// Set states for email and password inputs
if (disabled) {
button.setAttribute('disabled', '');
} else {
button.removeAttribute('disabled');
}
});
});
JSFiddle : http://jsfiddle.net/aecaaa9e/14/