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);
}
Related
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>
How make input RESET Button?
INFO:
Hi I'm trying to do that if I click on my input which has the ID search-input so that if I write something in the input then class cancel which is the cross that resets the value it's like <button type =" reset "> so if I write something so that it appears to me sodisplay: block;and if I delete or input it won't have a value to dodisplay: none;and I would like to do all this to make it work even if the user doesn't have Javascript so I would like to do it in PHP version but I don't know what I have so far I only have this code which shows the icon when something is in the input but unfortunately the code has stopped working and especially when I delete the input via the button so the icon doesn't disappear for more information be sure not to be afraid to ask.
const input = document.getElementById("search-input")
const button = document.getElementById("cancel")
const icon = document.getElementById("icon")
input.addEventListener('keyup', test);
button.addEventListener("button", test)
function test() {
let isShown = false
if (input.value.trim() == "" || isShown == false) {
icon.style.display = "none"
isShown = true
} else {
icon.style.display = "flex"
}
}
PS: Everything was translated by Google translator if there was a mistake or you did not understand something write and I will definitely tell you how it should be thought in advance thank you very much for your help.
I think Uttam Nath's answer was close to what you wanted but not exactly. This may work better:
EDIT: Alright I changed the code a bit and I added the HTML with it so there is no confusion.
<body>
<input type="text" id="search-input">
<button type="button" id="cancel">Cancel</button>
<div id="icon" style="background-color: green; width: 50px; height: 50px; display: none;"></div>
</body>
<script>
const input = document.getElementById("search-input");
const button = document.getElementById("cancel")
const icon = document.getElementById("icon");
input.addEventListener('keyup', changeIconDisplay);
button.addEventListener('click', () => {
input.value = '';
changeIconDisplay();
});
function changeIconDisplay() {
if (input.value.trim() == "" ) {
icon.style.display = "none";
} else {
icon.style.display = "flex";
}
}
</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 have a React form with just a text area and a submit button. I set the submit button's state to disabled to begin with, and then after the user enters 100 chars or more I want to enable the Submit button.
The issue I'm having right now is that after I input more than 100 chars, the submit button remains disabled and doesn't change to enabled state.
This is the updateFieldLength function I am calling upon the textarea field's onChange.
const updateFieldLength = e => (
setText(e.target.value), () => (
validateFieldLength()
)
)
and this is the validateFieldLength function:
function validateFieldLength() {
if (submitDisabled && text.length > 100) {
setSubmitDisabled(false);
} else if (!submitDisabled && text.length <= 100) {
setSubmitDisabled(true);
}
}
Your problem seems to be that the onchange event is triggered only when textarea loses focus. I guess it would work with the oninput event, shown below
const setBackground = (element, background) => {
element.style.background = background;
}
<textarea id="test-on-change" onchange="setBackground(this, 'green')" rows="10" cols="30">Example with onchange, start typing...</textarea>
<textarea id="test-on-input" oninput="setBackground(this, 'yellow')" rows="10" cols="30">Example with oninput, start typing...</textarea>
This should do the job
import React from 'react'
const MyComponent = () => {
const [text, setText] = useState('')
const handleTextChange = e => {
setText(e.target.value)
}
return(
<>
<textarea onChange={handleTextChange}>
{text}
</textarea>
<button disabled={text.length < 100}>
Submit
</button>
</>
)
}
it's my first time using the submit event on a form. Rather than submitting, I have used preventDefault() and then added some code to execute a search. When I press the search button, it works properly, creating a div where it loads the search results. When I press enter, it works properly up to the point where it has to append the new div to the html.
This is the function that creates the div
const crearDivResultados = function() {
const divResultados = document.createElement('div');
divResultados.setAttribute("id", "resultados");
contenedorResultados.append(divResultados);
}
This is the rest of the code.
const formulario = document.forms.buscador
formulario.addEventListener('submit', (event) => {
event.preventDefault();
let inputValor = inputBusqueda.value;
contenedorResultados.innerHTML = '';
crearTitulo(inputValor, contenedorResultados);
crearDivResultados();
let resultados = document.querySelector('#resultados');
console.log(resultados);
buscarGifs(inputValor).then (resp => {
mostrarResultados(resp.data);
})
botonBusquedaDesplegado.style.display = 'none';
contenedorResultados.style.display = 'block';
resultados.style.display = 'flex';
})
The error (Uncaught (in promise) ReferenceError: resultados is not defined) appears in this line of code:
let resultados = document.querySelector('#resultados');
ONLY when submitting with enter key. When clicking the button it works just fine.
Thank you!!!
Event type Submit means the submit button is clicked. If you want to listen to another event type, use keypress