here i have number input bar with a tag assigned as button , i have an onclick function . how can i make the oncklick to be executed when the user press enter ? ( at this point the user will input a number in the box and press the button with the mouse - how can i make it so the user will input the number and press Enter and the same onclick function will be executed ? )
many thanks in advance.
i tried some codes but they wont work
enter code here
<div id="foot1">
<form action="" method="" name="vform">
<input type ="number" min="0" max="10000000"
placeholder="PEEM it!" value="" id="footbar" />
<div id="foot2">
<li class="foot" alt="foot" title="FOOT (ft)" onclick="runfoot()"></li>
</div>
</div>
You can use the keydown event or similar (keyup, keypress):
document.addEventListener('keydown', function(event) {
const ENTERKEY = 13;
if (event.keyCode === ENTERKEY) {
runfoot()
}
});
https://developer.mozilla.org/en-US/docs/Web/Events/keydown
Just use jQuery's click:
$(document).on("keydown", e => {
if (e.key == "Enter") {
$(".foot").click();
}
});
You can try this:
<div id="foot1">
<form action="" method="" name="vform" onsubmit="return false">
<input
type="number"
min="0"
max="10000000"
placeholder="PEEM it!"
value=""
id="footbar"
/>
<div id="foot2">
<li class="foot" alt="foot" title="FOOT (ft)" onclick="runfoot()">
</li>
</div>
</form>
</div>
<script>
document
.getElementById('footbar')
.addEventListener('keyup', function(event) {
const key = 13;
if (event.keyCode == key) {
runfoot();
}
});
</script>
Related
I am having trouble adding code to be able to submit form by clicking Enter. I have tried a few things, but I simply cannot make it work.
I'm quite new, so that might be why.
Thank you guys in advance.
<div class="box">
<h1>Foretag et opkald via Remote Control</h1>
<input type="number" id="dial">
<a id="call" href="" target-"null">Start opkald til <span id="tel"></span>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8=" crossorigin="anonymous"></script>
<script>
$('#dial').on('input', function() {
$('#tel').html($(this).val())
$('#call').attr("href", "http://192.168.6.91/servlet?key=number=" + $(this).val() + "&outgoing_uri=9081#213.128.137.88")
console.log($(this).val()) // get the current value of the input field.
});
</script>
If you want to perform any activity like form submittion based on enter pressed on textbox, you can track it by keycode in keyup event.
<div class="box">
<h1>Foretag et opkald via Remote Control</h1>
<input type="number" id="dial">
<a id="call" href="" target-"null">Start opkald til <span id="tel"></span>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8=" crossorigin="anonymous"></script>
<script>
$('#dial').on('keyup', function() {
var keycode = (event.keyCode ? event.keyCode : event.which);
$('#tel').html($(this).val())
$('#call').attr("href", "http://192.168.6.91/servlet?key=number=" + $(this).val() + "&outgoing_uri=9081#213.128.137.88")
console.log($(this).val()) // get the current value of the input field.
if(keycode == '13'){
//form submit
$('#call')[0].click();
}
});
</script>
In pure HTML:
<form>
<input id="myinput"/>
<button onclick="alert(document.getElementById('myinput').value)">Send</button>
</form>
A button inside a form will automatically be triggered whenever enter is pressed.
Instead of this:
<div class="box">
<h1>Foretag et opkald via Remote Control</h1>
<input type="number" id="dial">
<a id="call" href="" target-"null">Start opkald til <span id="tel"></span>
</div>
Try this:
<from id="#formId">
<h1>Foretag et opkald via Remote Control</h1>
<input type="number" id="dial">
<input type="submit" value="Enter">
</from>
To submit the form:
$("#myform").submit(function(e) {
// prevent Default functionality
e.preventDefault();
// get the input values from the from
});
If you wrap your input in a form, it will submit on enter key by default.
Here's an example of how to use this:
const form = document.getElementById("form");
form.addEventListener("submit", e => {
e.preventDefault();
const children = e.target.children;
for (child of children) {
if (child.type !== "submit") {
console.log(child.value); // do something here
}
}
})
<form id="form">
<input type="text"/>
<textarea></textarea>
<input type="submit" value="Submit">
</form>
It iterates over elements in a form and does something with each non-submit element. Note that pressing enter in a textarea will just create a new line.
I've this code below:
<div class="search-container">
<input id="search-value" type="text" autocomplete="off" ng-model="vm.searchQuery" ng-focus="vm.searchBoxHasFocus = true" ng-blur="vm.searchBoxHasFocus = false" class="search-box-input ng-pristine ng-untouched ng-valid ng-empty" placeholder="Pesquisar" ng-enter="vm.goSearch()" ng-change="vm.getSuggestions()">
<div class="label-search" ng-click="vm.goSearch()"></div>
<button type="button" class="reset-search" ng-click="vm.clearQuery()"></button>
</div>
How can I call a JS function when I press "enter" in the input?
If you're looking to do it in raw javascript you can use the below binding to bind the enter key for the whole document to the function you wish to call.
// Load in the enter keybindings
document.onkeydown = function (e) {
switch (e.which || e.keyCode) {
case 13 : //Your Code Here (13 is ascii code for 'ENTER')
vm.clearQuery()
}
}
you can always wrap it in a form and call onsubmit and just change vm.goSearch() to your actual function.
<form onsubmit="return function(){vm.goSearch();return false;};">
<div class="search-container">
<input id="search-value" type="text" autocomplete="off" ng-model="vm.searchQuery" ng-focus="vm.searchBoxHasFocus = true" ng-blur="vm.searchBoxHasFocus = false" class="search-box-input ng-pristine ng-untouched ng-valid ng-empty" placeholder="Pesquisar" ng-enter="vm.goSearch()" ng-change="vm.getSuggestions()">
<div class="label-search" ng-click="vm.goSearch()"></div>
<button type="button" class="reset-search" ng-click="vm.clearQuery()"></button>
</div>
</form>
You can try with something like this:
// Get the input field you want
var input = document.getElementById("search-value");
// Execute a function when the user releases a key on the keyboard
input.addEventListener("keyup", function(event) {
// Cancel the default action, if needed
event.preventDefault();
// Number 13 is the "Enter" key on the keyboard
if (event.keyCode === 13) {
// Trigger the button element with a click
document.getElementById("ElementId").click();
//or function call here
}
});
Here is a useful tips
handle events with HTML/DOM
try ng-keypress event and read keyCode = 13 for enter.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js" >
</script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName" ng-keypress="keypress($event)">
<br>
<br>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.keypress=function(e) {
if(e.keyCode == 13) {
console.log('Enter');
}
}
});
</script>
How can I prompt for confirmation before submitting a form after they press the Insert key, and submit the form without confirmation when the user pushes the Enter/Return key ?
Summary of actions intended
INSERT : Prompt for confirmation. Submit form if confirmed.
ENTER : Submit form.
I have the following html form :
<form action="hhhhhhh.php" method="post" >
<input type="text" name="DatInvNew"/>
<input type="text" name="SumInvNew"/>
<input type="text" name="KolInvNew"/>
<input type="submit" value="next"/>
</form>
Here is the answer..
Try it once, Just copy and past it..
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$('#inputform').on('keydown', 'input', function (event) {
switch(event.which) {
case 13: // enter
event.preventDefault();
var $this = $(event.target);
var index = parseFloat($this.attr('data-index'));
$('[data-index="' + (index + 1).toString() + '"]').focus();
break;
case 45: // insert
$('#click-to-submit').trigger('click');
break;
}
});
});
</script>
<form id='inputform' action="hhhhhhh.php" method="post">
<input type="text" name="DatInvNew" data-index="1" />
<input type="text" name="SumInvNew" data-index="2" />
<input type="text" name="KolInvNew" data-index="3" />
<input type="submit" value="next" class="click-to-submit" id="click-to-submit" />
</form>
The following example does these things (as per the original question) :
INSERT : Prompt for confirmation. Submit form if confirmed.
ENTER : Submit form.
document.onkeypress = function (e) {
e = e || window.event;
if(e.keyCode == 45) {
if(confirm("Would you like to submit this form?")) {
document.getElementById("myForm").submit();
}
} else if (e.keyCode == 13) {
document.getElementById("myForm").submit();
}
};
And change your html slightly :
<form action="hhhhhhh.php" method="post" id="myForm">
<input type="text" name="DatInvNew"/>
<input type="text" name="SumInvNew"/>
<input type="text" name="KolInvNew"/>
<input type="submit" value="next"/>
</form>
My users want this form to advance focus to the next field when enter is press instead of submitting the form. I've added an onkeypress handler to the test input to change the focus when enter is press.
In the code below, when keydown function changes focus, I see the cursor jump to the new textbox but then the form gets submitted as if I pressed the enter key again. I thought that by returning false in my event handler the event would not be passed on but that does not seem to be the case. I've seen this behavior in both Chrome and Firefox.
Could someone tell me what I am missing?
<form action="" name="confirmation" method="post">
<fieldset>
<div class="clearfix">
<label for="id_event_fuel_amount">Quantity:</label>
<div class="input">
<input type="text" id="event_fuel_amount_id" name="event_fuel_amount" onkeypress="keydown(event, 'event_purchase_amount_id')" />
</div>
</div>
<div class="clearfix">
<label for="id_event_purchase_amount">Sale:</label>
<div class="input">
<input type="text" id="event_purchase_amount_id" name="event_purchase_amount" />
</div>
</div>
<input type="hidden" name="state" value="3" id="id_state" />
<input type="hidden" name="time_stamp" value="2011-09-24 14:34:06" id="id_time_stamp" />
<input type="hidden" name="purchase" value="66" id="id_purchase" />
<input type="submit" value="Save"/>
</fieldset>
</form>
<script>
function keydown(e,s){
if (!e) var e = window.event;
if (e.keyCode) code = e.keyCode;
else if (e.which) code = e.which;
if (code==13){
document.getElementById(s).focus();
return false;
}
}
</script>
Try
e.preventDefault();
That should prevent the event from firing the form submit.
I think this might help:
<script type="text/javascript">
document.getElementById('hello').onkeydown=function(e){
var e=window.event || e;
if (e.keyCode == 13) return false;
}
</script>
<input type="text" id="hello" />
Here is a demo: jsFiddle demo
My Form looks like this:
<body>
<form id="myForm" method="post">
<label>id:</label>
<input type="text" name="id" id="id" size="50"/>
<div id="hidden" style="display: none;">
<label>Name:</label>
<input type="text" name="name" size="50"/><br/>
<input type="button" id="button2" value="Update" size="25" /> <br/>
</div>
<input type="button" id="button1" value ="Get Info" onclick="document.getElementById('hidden').style.display = ''; this.style.display = 'none'" size="25"/>
I have JS that looks like this
$(document).ready(function(){
$("#button1").click(function(){
$.post(
'xxx.php',
{ id: $('input[name="id"]', '#myForm').val() },
function(json) {
if (json.abc === 'no'){
alert('does not exist');
}
else{
$("input[name='name']").val(json.name);
}},
"json"
);
});
$("#button2").click(function(){
$('form#myForm').attr({action: "xxx1.php"});
$('form#myForm').submit();
});
});
The problem is that the user can only submit this form by clicking on the submit button. Any ideas on how i can adjust the js so that the enter button(on keyboard) also submits the form?
Note: there are two submit buttons both are interlinked.
You could give your input element an id, for easier retrieval:
<input id="txtName" type="text" name="name" size="50"/><br/>
Then you may bind your function to the keypress event:
$('#txtName').keypress(function (e) {
if (e.which == 13) {
$("#button1").click()
}
});
Or, for a general case, you may want to just bind the function to every text box of the form:
$('#myForm input:text').keypress(function (e) {
if (e.which == 13) {
$("#button1").click()
}
});
This code works for me.
$('#yourform').bind('submit', function() {