In my code I wish to be able to press enter and it to press my input button.
At the moment I am having no luck, any suggestions for my code? Thanks,
<form>
<input type="text" id="input" placeholder="Enter your name">
<input type="button" id="button" value="enter">
</form>
<h1 id="output">Please Complete Form</h1>
<script>
var button = document.getElementById("button");
var input;
var output;
button.addEventListener("click", clickHandler, false);
input.addEventListener("keypress", handle, false);
function clickHandler () {
input = document.getElementById("input");
output = document.getElementById("output");
output.innerHTML = input.value;
}
function handle(e){
if(e.keyCode==13){
document.getElementById('button').click();
}
}
</script>
You do not need to attach keypress event over input as it is a nature of input type text to submit the form when enter key is pressed.
Note: variable input is undefined when addEventListener is attched to it hence it produces error.
Try this:
var button = document.getElementById("button");
var input = document.getElementById("input");
button.addEventListener("click", clickHandler, false);
function clickHandler() {
var output = document.getElementById("output");
output.innerHTML = input.value;
}
<form>
<input type="text" id="input" placeholder="Enter your name">
<input type="button" id="button" value="enter">
</form>
<h1 id="output">Please Complete Form</h1>
Try this...
<input type="text" id="input" placeholder="Enter your name" onkeydown="if (event.keyCode == 13) { this.form.submit(); return false; }">
It may helpful.
Related
I need the user to type a word and if its the right keyword, I need it to change pages.
my code
<form action="/yay.html">
<label>what's 1+1</label><br>
<input type="text"><br>
<input type="submit" value="Submit">
</form>
for example I want something a bit like this.
<script>
function checkstuff() {
if text = "hello world"
}
</script>
//so a function checks if the text is equal to "hello world"
<form action="/yay.html">
<input type="text">
<input type="submit" value="Submit" onclick="checkstuff()">
//submit input runs function
</form>
In the solution below, the user input is evaluated to enable/disable the disabled attribute of the submit button.
const submit = document.getElementById('submit');
let answer = document.getElementById('answer');
const target = 2;
function log(value, mode) {
console.clear();
if(mode)
console.log(`Information: ${value}`);
else
console.log(`Input: ${value}`);
}
answer.addEventListener('input', function(event) {
log(this.value, true);
if(parseInt(this.value) == target) {
submit.disabled = false;
}
else {
submit.disabled = true;
}
});
submit.addEventListener('click', function(event) {
log("Button fired.", false);
});
<form action="/yay.html">
<label>what's 1+1</label><br>
<input id="answer" type="text"><br>
<input id="submit" type="submit" value="Submit" disabled>
</form>
I made a text input to enter some text and search it on google.
<input type="text" placeholder="type search word and press Enter to google" id="text" />
<input type="button" id="btn" value="search" onClick="javascript:
window.open('https://www.google.com/search?q=' + document.getElementById('text').value);" />
<script>
var input = document.getElementById("text");
input.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
document.getElementById("btn").click();
}
});
</script>
I want to get rid of the search button and integrate the googling function only through pressing Enter. How can I do this?
Fiddle
Using a form and ES6 syntax is the easiest and most efficient method:
const $form = document.getElementById('form')
const $input = document.getElementById('input')
$form.addEventListener('submit', (evt) => {
evt.preventDefault()
window.open(`https://google.com/search?q=${$input.value}`)
})
<form id="form">
<input type="text" placeholder="Search Google" id="input" />
</form>
Here is working demo: https://jsfiddle.net/usmanmunir/t1djucrx/2/
var input = document.getElementById("text");
input.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
window.open('https://www.google.com/search?q=' + document.getElementById('text').value);
}
});
if you want to completely remove the button, then instead just put the code from the button in a javascript function, and call that when enter is pressed, so
<input type="text" placeholder="press Enter to google" id="text" />
<script>
var input = document.getElementById("text");
input.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
window.open('https://www.google.com/search?q=' + document.getElementById('text').value);
}
});
</script>
I have tried to create a html form where I want to be redirected to a url if the input you insert is the same as the value of a variable. I have tried to make it work in many different ways, but I have not succeeded. : - /
Someone who can help?
Here is my code:
My HTML-form:
<form autocomplete="off" onsubmit="script.js">
<div class="autocomplete" style="width:300px;">
<input id="myInput" type="text" name="myCountry" placeholder="Country">
</div>
<input id="submit" type="submit">
</form>
My JS:
var country = 'Brazil';
var input = $("input[id='myInput']").val();
$("#submit").on("submit", function(event){
if (country == input) {
window.location.href = "https://www.google.com/";
}
});
Few things. Since you are targeting the submit button and not the form, your event listener should be "click" not "submit." Next, call event.preventDefault() inside the click function. Finally, you want to get the input value after you click the button, so that assignment has to go inside your click function:
var country = "Brazil";
$("#submit").on("click", function(event) {
event.preventDefault();
var input = $("input#myInput").val();
if (country == input) {
console.log("redirect");
window.location.href = "https://www.google.com/";
} else {
console.log("don't redirect");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form autocomplete="off" onsubmit="script.js">
<div class="autocomplete" style="width:300px;">
<input id="myInput" type="text" name="myCountry" placeholder="Country">
</div>
<input id="submit" type="submit">
</form>
You need to init the value after the form is submitted otherwise it will be undefined.
var country = 'Brazil';
$("#submit").on("submit", function(event){
let input = $("input[id='myInput']").val();
if (country == input) {
window.location.href = "https://www.google.com/";
}
});
This should work:
$("#submit").on("click", function(e){
e && e.preventDefault();
var country = 'Brazil';
var input = $('#myInput').val();
if (country === input) {
window.location.href = "https://www.google.com/";
}
});
You need to get the value of the input after the click (or submit) event is fired
Place input = $("input[id='myInput']").val(); as first line inside the function which handles the submit.
So your code actually almost work. Minor adjustments:
var country = 'Brazil';
$("#submit").on("click", function(event){ // this event change to click since we change the type=submit on the input
var input = $("input[id='myInput']").val(); // this line moves inside the event
if (country == input) {
window.location.href = "https://www.google.com/";
}
else { alert('B R A Z I L type Brazil to redirect');}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form autocomplete="off" onsubmit="script.js">
<div class="autocomplete" style="width:300px;">
<input id="myInput" type="text" name="myCountry" placeholder="Country">
</div>
<input id="submit" type="button" value="GO?" /> <!-- Changed from submit to button -->
</form>
try like this
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function(){
$('#submit').on('submit', function(event){
event.preventDefault();
event.stopPropagation();
var country = 'Brazil';
var input = $("input[id='myInput']").val();
if (country == input) {
window.location.href = "https://www.google.com/";
}
});
});
</script>
</head>
<body>
<form autocomplete="off" id="submit">
<div class="autocomplete" style="width:300px;">
<input id="myInput" type="text" name="myCountry" placeholder="Country">
</div>
<input id="submit" type="submit">
</form>
</body>
</html>
I want to make form with vanilla javascript. when id="text" value is nothing I meant space I want alert to pop, I'm makin' it with if statement but doesn't seem to work here's code
var input = document.getElementById('text');
function check(){
if(input.value == " "){
alert('hello');
}
}
Username: <input name="fname" type="text" onsubmit="check()" id="text" placeholder="Enter your username"> <br>
<button type="submit">asd</button>
You need to get the field value every time the user clicks - if your initial code is not after the element, your code would fail, because document.getElementById('text'); will be undefined
An input field does not have an onsubmit event
I recommend to have a value attribute too and trim it before testing
You likely mean this
document.getElementById("form1").addEventListener("submit", function(e) {
var input = document.getElementById('text');
if (input.value.trim() === "") {
alert('Please fill in user name');
input.focus();
e.preventDefault(); // stop form submission
}
});
<form action="yourserverprocess" id="form1">
Username: <input name="fname" type="text"
id="text" placeholder="Enter your username" value="" /><br />
<button type="submit">Send</button>
</form>
Without a form
document.getElementById("subbut").addEventListener("click", function(e) {
var input = document.getElementById('text'), val = input.value.trim();
if (val === "") {
alert('Please fill in user name');
input.focus();
}
else {
console.log("You typed",val);
}
});
Username: <input name="fname" type="text"
id="text" placeholder="Enter your username" value="" /><br />
<button id="subbut" type="button">Send</button>
Here's the solution of your problem.
I've made some changes in your code.
1. you have to put onsubmit event in form tag. Because doesn't support onsubmit event.
2. Change the function name from check() to checkAlert(). May be check is a library keyword which causes your code to fail.
var input = document.getElementById('text');
function checkAlert() {
if(input.value == ""){
alert('hello');
}
}
<form onsubmit = "checkAlert(this)">
Username: <input name="fname" type="text" id="text" placeholder="Enter your username"> <br>
<button type="submit">asd</button>
</form>
In script below
<html>
<body>
<form>
First Name: <input type="text" id="myText" maxlength="30" >
</form>
<button onclick="procesText()">get name</button>
<script>
function procesText()
{
var y = document.getElementById("myText");
alert(y.value);
y.value="";
}
</script>
</body>
</html>
i want to call function procesText Not by clicking get name button, but by clicking enter when i fill input with text. How to achieve that?
HTML:
<form id="myform">
First Name: <input type="text" id="myText" maxlength="30" >
</form>
JS: (If you want to send the form to te server) (Demo)
document.getElementById('myform').onsubmit = procesText;
JS: (If you don't want to send the form to te server) (Demo)
document.getElementById('myform').onsubmit = function(e) {
procesText();
e && e.preventDefault && e.preventDefault();
return false;
}
Just remove the button, call the function onsubmit, and prevent it from submitting:
<form onsubmit="return procesText()">
First Name: <input type="text" id="myText" maxlength="30" />
</form>
<script>
function procesText() {
var y = document.getElementById("myText");
alert(y.value);
y.value = "";
return false;
}
</script>
Fiddle: Fiddle