Execute function by pressing "return" using jQuery? - javascript

i have two text inputs like the following, i don't want to use <form> , so i want when people press "return" BUTTON after filling the inputs, a function called "doit()" should be executed.
<script>
function doit(){
alert("you submitted the info");
..........ajax code........
}
</script>
<input type="text" id="email" />
<input type="text" id="skills" />
Thanks

The following will do what you are looking for.
$('#emails, #skills').keypress(function(e){
if( e.keyCode == $.keyCode.ENTER || e.keyCode == $.keyCode.NUMPAD_ENTER ){
yourSubroutine();
}
});

$('#name, #last').bind('keydown', function(e) {
if (e.keyCode == 13 || e.keyCode == 108) {
doit();
}
});
KeyCode can be found here

Check out this question. Essentially, you'll want to bind a keypress listener, and then check for the return key.

Related

Insert text after "this" input-element with javascript?

Code:
<input type="text" onkeydown="
if (event.keyCode == 13) { HERE, ECHO "OK" RIGHT AFTER THIS INPUT ELEMENT }
">
Is this possible to do without putting an ID or name on this element?
Or without encasing it in an identifiable div?
To clarify, this should be the result html after the event keycode is pressed:
<input type="text" onkeydown="
if (event.keyCode == 13) { HERE, ECHO "OK" RIGHT AFTER THIS INPUT ELEMENT }
">OK
If you want to use jQuery you can do the following:
HTML
<input name="ok" type="text" id="showOK" />
JAVASCRIPT
$("#showOK").keypress(function() {
if (event.keyCode == 13){
$("<p>OK</p>").insertAfter("#showOK");
}
});
Without the Use of ID
<input type="text" onkeydown="if (event.keyCode == 13) { $('<p>OK</p>').insertAfter(this);}">
Following your requirements and trying to keep your style, you can use the insertAdjacentHTML DOM Element method to add a text just after the input element.
<input type="text" onkeydown="
if (event.keyCode == 13) { this.insertAdjacentHTML('afterend', 'OK');}
">
See demo
I used a mixture of answers here.
First off i had to create a new var:
var that = this;
Or else javascript could not find "this" somehow.
Then used the jQUery method:
$('<span>OK</span>').insertAfter(that);
Resulting in:
<input type="text" onkeydown="
if (event.keyCode == 13) { var that = this; $('<span>OK</span>').insertAfter(that); }
">
Ok, first off, don't use inline-js. But to answer your question,
<input type="text" onkeydown="
if (window.event.keyCode == 13) { this.outerHTML = this.outerHTML + 'Ok'; } "/>
DEMO
Try this:
<input type="text" onkeydown="(function(event){
var input = event.target;
if(event.keyCode == 13){
input.outerHTML += 'OK';
}
})(window.event);" />
Demo.
<input type="text" onkeydown="ok(this, event)"/>
function ok(el, event) {
var _ok = document.createElement('span');
_ok.textContent = 'ok';
if (event.which == 13) {
el.parentNode.insertBefore(_ok, el.nextSibling)
}
}
Try this:
<input type="text" onkeydown="
if (event.keyCode == 13) { this.parentNode.insertBefore(document.createTextNode('OK'), this.nextElementSibling); }
">
It will add a text node (without creating any span or div) directly after the input.

Click to behave like a Return

I'm building a form and i'd like to make my radio button behave like i've pressed Enter
something like onclick="keycode=13"
any idea how to do ?
If you wanna submit the form, you can just attach the click handler to submit the form.
<input type="radio" onclick="this.form.submit();" />
Or you an even trigger the enter key!
<input type="radio" onclick='e = jQuery.Event("keypress"); e.which = 13; e.keyCode = 13; this.trigger(e);' />
In your event handler you can submit a form using the following code:
document.getElementById("myForm").submit();
Add onkeypress on your form:
<form .. onkeypress="return myEvent(event)">
<input type="radio" id="myRadio">
Than add Javascript
<script type="text/javascript">
function myEvent(e) {
e = e || window.event;
var key = e.keyCode || e.charCode;
if (key === 13) {
// enter down
document.getElementById('myRadio').checked = true;
return false; // prevent form post on enter
}
return true;
}
</script>
I think the code above should work, because I have very similar code to prevent form post on Enter press.
Bit late, however...
<form name="myform">
<input type=radio onclick="this.parentNode.submit()">click</input>
</form>
i managed to achieve this by adding the followind code to the script
document.addEventListener( 'click', function( ev ) {
ev.preventDefault();
self._nextQuestion();
} );

Why isn't the value being printed?

Here's the short code:
<!DOCTYPE html>
<script type="text/javascript">
function myKeyPress(e)
{
var keynum;
var list;
if(window.event)
{
keynum = e.keyCode;
list = keynum;
if(list == 115)
{
alert("You pressed the 'S' key.");
}
}
}
</script>
<form>
<input type="text" onkeypress="myKeyPress(event);"/>
</form>
When I hit a key, myKeyPress should be called and the event should be passed to the function. In the function body, e (the event parameter) should fetch the Keynum and obtain the input value. That value should be 115 if I were to press 'S' on the keyboard. List should then have the value of Keynum, and list is checked to see if its value is equal to 115 (it should be). If so, it should alert the corresponding text in a message box on the screen. It doesn't do it though. Why?
Here is a shortened version of your code:
function myKeyPress(e) {
var keynum = e.which ? e.which : e.keyCode;
alert(keynum); // Just to see all key presses, remove when done :)
if (keynum == 115) {
alert("You pressed the 'S' key.");
}
}
I am binding it using JavaScript not using an HTML attribute:
document.getElementById('example').onkeypress = myKeyPress;
So I added an ID:
<input type="text" id="example" />
I find that this works. I'm not sure why you were testing window.event in your code?
s key is nr 83 and not 115.
you could find out like this with jQuery.
<script type="text/javascript">
$('#myinput').on('keyup',function(e){
console.log(e.keyCode);
});
</script>
<input type="text" id="myinput" />

Press enter to submit form if checkbox is checked

I have a form that submits with a button, but I want to also allow to submit by typing the ENTER key if a checkmark has been checked.
I've got the enter part working:
<form action="index.php">
<textarea onkeydown="pressed(event)"></textarea>
</form>
<input type="checkbox" id="enterCheckbox" />
<script>
function pressed(e) {
if ( (window.event ? event.keyCode : e.which) == 13) { document.forms[0].submit() }
}
</script>
Now I want to only run that function if #enterCheckbox has been checked, but I'm having trouble doing it correctly. Any help?
Does what you have work as expected other than just adding the extra condition? If so, you should be able to just add in the extra check with && in your current if(...) check.
Something along the lines of $('#enterCheckbox').attr('checked') should tell you if the checkbox is checked or not.
You should be able to do something like this:
if(document.getElementById(enterCheckbox).checked)) {
// do all the good stuff
}
Your function should include an extra condition.. something like:
<script>
function pressed(e) {
if ( ( (window.event ? event.keyCode : e.which) == 13) AND (document.getElementById('enterCheckbox').checked) ){ document.forms[0].submit() }
}
</script>
If using jQuery, I suggest using selectors to make life easier. But what you want for checking if #enterCheckbox is checked is .is(':checked').
Updated HTML
<form id="myForm" action="index.php">
<textarea id="myTextarea"></textarea>
</form>
<input type="checkbox" id="enterCheckbox" />
jQuery Implementation
$('#myTextarea').on('keydown', function(e) {
var key = window.event.keyCode || e.which;
if($('#enterCheckbox').is(':checked') && key == 13) {
$('#myForm').submit();
}
});
To check if the box is checked, using jQuery:
$("#enterCheckbox").is(":checked")
So your <script> will be:
function pressed(e) {
if (($("#enterCheckbox").is(":checked")) && ((window.event ? event.keyCode : e.which) == 13)) {
document.forms[0].submit()
}
}

Javascript: Enter for submit

Hello this is what i have in the head of my file:
function entsub(event)
{
if (event && event.which == 13)
write1();
else
return true;
}
and in the body, my form is:
<form id="writeform" name="writeform">
Message: <br />
<textarea name="message" rows="3" id="message" style="width:90%;" onkeypress="return entsub(event)"></textarea>
<br />
<input name="send" type="button" id="send" value="Send" onclick="write1()" />
<span id="sent"></span>
<input type="reset" value="Reset" />
</form>
I need to make it work that when i press enter when i am in the textarea, it does not make a new line but send it [see my <input type="button">]
But it won't work! It keeps making a new line... Using IE8 now.
Well i'm not sure what write1() does, but it would be prudent to return false when the condition is met..
function entsub(event)
{
if (event && event.keyCode == 13) {
write1();
return false; //Return false to prevent default execution
//Some browsers use event.preventDefault() etc.
}else{
return true;
}
}
Usually the cross browser test is the following:
function entsub(e) {
if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
write1();
}
return true;
}
If you want to use jquery, you can do this:
$(document).ready(function() {
$("#txtTest").keypress(function(e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 13) {
doSomething();
return false;
}
});
});
function doSomething() {
alert("I did it!");
}
where txtTest is the id of your textarea.
Use keyCode instead of which.
Depending on the browser, you need to prevent the default action. Check out event.cancelBubble and event.returnValue for IE and event.stopPropagation() and event.preventDefault() for Firefox.
For a non-js related way, I'm pretty sure you can just use an input of type="submit" and it will use enter to submit the form. At that point, you would just move your event to onsubmit.
A cleaner way is to change to <input type="button"> to <input type="submit"> and move the onclick="..." to a onsubmit="..." on the form. This would not require so much error-prone JavaScript and would work in more cases.

Categories