I am trying to submit my form while in a textarea when they hit enter. If they hit Enter + Shift then I want to make a new line in the textarea.
I also want to prevent a postback when enter is hit and this is what I am having a problem with.
<form ref={el => this.myFormRef = el} onSubmit={this.searchClick} autoComplete="off">
<textarea
ref={input => input && input.focus()}
className="textarea"
name="search-area"
rows={this.rowCount}
value={this.searchValue}
onChange={this.onChange}
onKeyDown={this.onKeyDown}
/>
</form>
#action
searchClick = (event) => {
event.preventDefault();
event.stopPropagation();
}
#action
onKeyDown = event => {
if (event.key == 'Enter' && event.shiftKey == false) {
this.myFormRef.submit();
event.preventDefault();
event.stopPropagation();
}
this.searchValue = event.target.value;
};
Related
I have the following html code:
<form>
<input autofocus type="text" name="rnum" id="rnum" class="input-field" placeholder="Number of rows in a page">
</form>
<script type="text/javascript">
document.getElementById('rnum')
.addEventListener('keyup', function(event) {
if (event.code === 'Enter') {
.append(window.location.search)
.toString();
event.preventDefault();
document.querySelector('form').submit();
}
});</script>
I have a search data in window.location that I want to add to the submitted value of the form. For instance, the url is:
http://127.0.0.1:5000/result?searchbox=cor
and the value of the form is rnum=10 that I want to combine and make:
http://127.0.0.1:5000/result?searchbox=cor&rnum=10
update 1:
As #Yasir suggested, I replaced the code,
<form style="float: right;">
<input autofocus type="text" name="rnum" id="rnum" class="input-field" placeholder="Number of rows in a page">
</form>
<script type="text/javascript">
document.getElementById('rnum')
.addEventListener('keyup', function(event) {
if (event.code === 'Enter') {
let child = document.createElement('input');
child.name = "searchBox";
child.value = window.location.search.toString();
event.preventDefault();
var form = document.querySelector('form');
form.appendChild(child);
form.submit()
}
});</script>
But still the result is like: http://127.0.0.1:5000/result?rnum=10 for 10 in form.
well, you can create an input node with the desired value within the form and then submit it.
<form>
<input autofocus type="text" name="rnum" id="rnum" class="input-field" placeholder="Number of rows in a page">
</form>
<script type="text/javascript">
document.getElementById('rnum')
.addEventListener('keyup', function(event) {
if (event.code === 'Enter') {
let child = document.createElement('input');
child.name = "searchBox";
child.value = window.location.search.toString();
event.preventDefault();
var form = document.querySelector('form');
form.appendChild(child);
form.submit()
}
});</script>
and if you are looking for updating the page url appending some value from form input
<script type="text/javascript">
document.getElementById('rnum')
.addEventListener('keyup', function(event) {
event.preventDefault();
if (event.code === 'Enter') {
let input = document.getElementById("rnum");
window.location.search += "&rnum=" +input.value;
}
});</script>
I think you have a syntax error in this part
if (event.code === 'Enter') {
.append(window.location.search)
.toString();// this is an error since we are not appending the string anywhere
event.preventDefault();
document.querySelector('form').submit();
}
I have this form:
<form>
<label for="locationsearch">Location:</label>
<input type="search" id="locationsearch" name="locationsearch" />
</form>
I want to add an eventListener when I hit enter on the input(i.e. #locationsearch).
I tried doing this:
const locationSearch = document.getElementById("locationsearch");
locationSearch.addEventListener("search", () => {
console.log("search entered");
});
and this:
const locationSearch = document.getElementById("locationsearch");
locationSearch.onsubmit = function () {
console.log("search entered");
};
Both are not console-logging.
What is the correct/better way to perform this action?
The onsubmit event would happen on the form itself, not the input. So you could use an id on the form instead to target it directly.
const locationSearch = document.getElementById("locationsearch");
locationSearch.onsubmit = function () {
console.log("search entered");
};
<form id="locationsearch">
<label for="locationsearch">Location:</label>
<input type="search" name="locationsearch" />
</form>
You could handle it keydown event handler of input element. And check the key code if Enter key pressed.
const locationSearch = document.getElementById("locationsearch");
locationSearch.addEventListener("keydown", (e) => {
if (e.code === 'Enter') {
// Do Something ? Search
}
});
You can use keypress event for this.
const locationSearch = document.getElementById("locationsearch");
locationSearch.addEventListener("keypress", () => {
if (event.key === "Enter") {
event.preventDefault();
let inputVal = document.getElementById("locationsearch").value;
console.log("search entered "+inputVal);
document.getElementById("locationsearch").value = "";
}
});
<form>
<label for="locationsearch">Location:</label>
<input type="search" id="locationsearch" name="locationsearch" />
</form>
I have an application created using Reactjs and in the application,i have a form when a user presses done or return button on iOs device i want to submit that function.As i tried but it's only working when user presses return button.
function Counter() {
const [otp,setOTp]=useState('')
const handleSubmit = (e) => {
e.preventDefault();
// conform alert
var r = window.confirm("Are you sure you want to submit?");
if (r === true) {
alert("Submitted");
} else {
alert("Cancelled");
}
}
return (
<div>
<form onSubmit={handleSubmit}>
<input type="text" placeholder="Enter OTP" value={otp} onChange={(e)=>setOTp(e.target.value)} />
<button type="submit">Submit</button>
</form>
</div>
Image
I am making a weather application with a textarea, if you click "submit" you will see the weather results. Now, I want to make it so you can click enter to see the data. this is some code:
<section class="inputs">
<input type="text" placeholder="Enter any city..." id="cityinput">
<input type="submit" value="Submit" id="add">
<button placeholder="submit" id="add"></button>
</section>
This is some javascript code:
btn.addEventListener('click', function(){
//This is the api link from where all the information will be collected
fetch('https://api.openweathermap.org/data/2.5/weather?q='+inputval.value+'&appid='+apik)
.then(res => res.json())
//.then(data => console.log(data))
.then(data => {
//Now you need to collect the necessary information with the API link. Now I will collect that information and store it in different constants.
var nameval = data['name']
var tempature = data['hourly']['pop']
//Now with the help of innerHTML you have to make arrangements to display all the information in the webpage.
city.innerHTML=`Weather of <span>${nameval}<span>`
temp.innerHTML = ` <span>${ tempature} </span>`
})
You need to attach a listener to your textarea, if the user press enter then you execute your call (here simulated by an alert) and you prevent the default in order to don't go in a new line. In any other case, just don't take any action
const textArea = document.querySelector('textarea');
textArea.addEventListener('keydown', e => {
if (e.key === 'Enter') {
window.alert('Sending data...');
e.preventDefault();
}
});
<textarea placeholder="Type and press enter"></textarea>
You can just put the submit code in a function, and call the function in both the cases:
function submitAction() {
fetch('https://api.openweathermap.org/data/2.5/weather?q='+inputval.value+'&appid='+apik)
.then(res => res.json())
.then(data => {
const nameval = data['name']
const tempature = data['hourly']['pop']
city.innerHTML=`Weather of <span>${nameval}<span>`
temp.innerHTML = ` <span>${ tempature} </span>`
});
}
Then:
if (e.key === 'Enter') {
submitAction();
e.preventDefault();
}
And:
btn.addEventListener('click', () => submitAction());
You could use a HTML form and use the form submit event:
<form id="form">
<input type="text" placeholder="Enter any city..." id="cityinput" />
<button type="submit">Submit</button>
</form>
Inside the event listener you can then read the value from the input once the submit event is triggered. Alternatively you could go looking for the input value inside the event object.
var form = document.getElementById('form');
form.addEventListener('submit', function(event) {
const inputValue = document.querySelector('input').value;
event.preventDefault();
fetch('https://api.openweathermap.org/data/2.5/weather?q='+inputValue+'&appid='+apik)
.then(res => res.json())
.then(data => {
var nameval = data['name']
var tempature = data['hourly']['pop']
city.innerHTML=`Weather of <span>${nameval}<span>`
temp.innerHTML = ` <span>${ tempature} </span>`
})
});
You need to create listener for keydown event and check if clicked key is enter:
const textarea = document.querySelector(".some-class");
textarea.addEventListener("keydown", function(e) {
if(e.key === "Enter") {
// your code
}
});
<textarea class="some-class"></textarea>
I have used below code for tabindex navigation using "enter key" in html form.It works fine as per my requirement,but this code is not working in dropdown.Please check below code and advise how to do this..
document.addEventListener('keydown', function (event) {
if (event.keyCode === 13 && event.target.nodeName === 'INPUT') {
var form = event.target.form;
var index = Array.prototype.indexOf.call(form, event.target);
form.elements[index + 1].focus();
event.preventDefault();
}
});
You just need to change your if statement to include the select node as example below.
document.addEventListener('keydown', function (event) {
if (event.keyCode === 13 && (event.target.nodeName === 'INPUT' || event.target.nodeName === 'SELECT')) {
var form = event.target.form;
var index = Array.prototype.indexOf.call(form, event.target);
event.preventDefault();
}
});
<form>
<input type="text">
<input type="checkbox">
<select>
<option>123</option>
</select>
<input type="radio">
</form>