Trigger submit on pressing enter (as well if submit button is clicked) - javascript

I know this has been asked before, and I have read the replies carefully, but still cannot get it to work in my code.
This is what I would like to achieve:
there is a text input field. The user types in the field. On clicking 'submit' button, the word 'done' appears on the screen. I can do this part without difficulty. However, I also want the user to able to submit by hitting 'enter' when they are in the input field, instead of having to hit 'submit' button (although I still want the submit button to work also - basically user has two options on how to submit, by clicking submit button, or hitting enter).
I followed instructions on W3, and have the following code:
var input = document.getElementById("myInput");
input.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
document.getElementById("submit").click();
}
});
function myFunction() {
document.getElementById("demo1").innerHTML = "done";
}
<div class = 'method'>
<form id="myFunction">
<h3>myFunction():</h3>
<input id="myInput" name="name">
<button id="submit" type="button" onclick="myFunction()">Submit</button>
<div id="demo1">function result on submit goes here</div>
</form>
</div>
What am I missing?
Thanks in advance

By using a <button type="submit"> instead of type="button", you won't need the javascript to detect a keystroke. Both hitting the submit button and pressing enter will cause the onsubmit event to fire on the form. By calling event.preventDefault(), you make sure the browser does not navigate after submitting the form.
function myFunction(event) {
event.preventDefault();
document.getElementById("demo1").innerHTML = "done";
}
<div class='method'>
<form id="myFunction" onsubmit="myFunction(event)">
<h3>myFunction():</h3>
<input id="myInput" name="name">
<button type="submit">Submit</button>
<div id="demo1">function result on submit goes here</div>
</form>
</div>

You dont need to add event listeners to your button or your input.
Instead add the event listener to your form and prevent default event, because forms can be submitted by both 'enter' key as well as submit buttons (button needs to be of type 'submit').
document.getElementById('myFunction').addEventListener('submit', myFunction)
function myFunction(e) {
e.preventDefault();
document.getElementById("demo1").innerHTML = "done";
}
<div class='method'>
<form id="myFunction">
<h3>myFunction():</h3>
<input id="myInput" name="name">
<button id="submit" type="submit">Submit</button>
<div id="demo1">function result on submit goes here</div>
</form>
</div>

You can simplify your code to listen for the submit event, which will trigger when the form is submitted by hitting enter or by clicking the submit button:
var input = document.getElementById("myInput");
var form = document.getElementById( "myFunction" );
form.addEventListener( "submit", function( e ){
e.preventDefault();
document.getElementById( "demo1" ).innerHTML = "done";
});
<div class='method'>
<form id="myFunction">
<h3>myFunction():</h3>
<input id="myInput" name="name">
<button id="submit" type="submit">Submit</button>
<div id="demo1">function result on submit goes here</div>
</form>
</div>

Related

What event is triggered if form is submitted by pressing enter?

I have a simple form like this:
<form>
<div>Name:</div>
<input name="firstname" id="typeTracking" type="text">
<input value="Submit" id="submitTracking" type="submit">
</form>
And some vanilla JS code to detect when the form is submitted:
document.addEventListener('submit', doFancyThings);
But the doFancyThings function is only triggered if I click the submit button, not if I press the enter key on my keyboard. How can I, using only plain javascript, listen for the enter key submit event, to also trigger my doFancyThings function?
I've had a look in the Event reference at MDN and as far as I understand the submit event is only triggered when "The submit button is pressed". However, as the form is undoubtly submitted on enter key press, it ought to be firing some sort of event too, I reckon.
According to submit - Event reference the "event is fired only on the form element, not the button or submit input." Which sounds a bit contrary to the previous quote, and even less understandable why my listener doesn't trigger on the enter key.
not if I press the enter key
Use a form
document.addEventListener('submit', doFancyThings);
function doFancyThings(e) {
console.log('Enter pressed')
e.preventDefault()
}
<form>
<div>Name:</div>
<input name="firstname" id="typeTracking" type="text">
<button value="Submit" id="submitTracking" type="submit">Click</button>
</form>
try this
var form = document.querySelector("form");
form.onsubmit = function(e) {
doFancyThings();
e.preventDefault(); // for preventing redirect
};
form.onkeydown = function(e) {
if (e.keyCode == 13) {
doFancyThings();
e.preventDefault(); // for preventing redirect
}
};
function doFancyThings() {
alert("hmmm");
};
<form>
<div>Name:</div>
<input name="firstname" id="typeTracking" type="text">
<input value="Submit" id="submitTracking" type="submit">
</form>

mvc - submit text input field when enter

I'm trying to use "Enter" in a text input field to submit the message (in SignalR chat). I've tried hundreds of methods, but can't seem to get it working.
I either wanna have it so when I press enter it clicks the btn or presses tab then enter.
here is the input and btn
<input class="form-control" id="message" maxlength="200" />
<input type="button" class="btn btn-default" id="sendmessage" value="Send" />
Change
<input type="button" ...
To
<input type="submit" ...
or
<button type="submit" ...
See also button type documentation.
If you don't want to use form submit, you can define the logic in javascript,
document.getElementById("message") // to get the text box
.addEventListener("keyup", function(evt) { // Keyup -> Any key pressed
if (evt.keyCode == 13) { // 13 for enter
document.getElementById("sendmessage").click();
}
});
For keycodes, you can refer this site

detect the submit event when click enter key

If I have one form with actually different inputs for two submit requests. When I click on any submit button I can know what action to do.
but I need to detect in which input I'm when click Enter keyboard key.
<form class="main-form">
<div class="form_one">
<input class="form_one_input" type="text" id="form_one_input"/>
<button type="submit" class="form_one_button">Submit form one</button>
</div>
<div class="form_two">
<input class="form_two_input" type="text" id="form_two_input"/>
<button type="submit" class="form_two_button">Submit form two</button>
</div>
</form>
https://jsfiddle.net/m6433obp/
To detect which input you are in use the keyup event handler as:
$('.form_one').bind('keyup', function(e) {
if(e.keyCode === 13) {
alert($(this).attr('class'));
}
})
$('.form_two').bind('keyup', function(e) {
if(e.keyCode === 13) {
alert($(this).attr('class'));
}
})
check demo for this here
I am not really sure that I understand your question correctly. But I think that since you are using two submit buttons in the same form, you should give unique names to the buttons, so that on the server side you know that on hitting enter which input got submitted.
<form class="main-form">
<div class="form_one">
<input class="form_one_input" type="text" id="form_one_input"/>
<button type="submit" name="first_button" class="form_one_button">Submit form one</button>
</div>
<div class="form_two">
<input class="form_two_input" type="text" id="form_two_input"/>
<button type="submit" name="second_button" class="form_two_button">Submit form two</button>
</div>
</form>
And the code to check:
if (isset($_POST['first_button'])) {
} else if (isset($_POST['second_button'])) {
} else {
//no button pressed
}
Hope this is what you were looking for.

HTML form run javascript on enter?

I am building a newtab page here:
http://codepen.io/Thisisntme/full/VvgeyV
This page consists of a pretty design thing, and a google search bar. However, when I press enter, rather than searching google it opens the same window with http://codepen.io/Thisisntme/full/VvgeyV?inputbox=TEST_INPUT ("TEST_INPUT" being whatever was typed into the box).
When I press the submit button off to the left, It actually searches.
How can I make this search when the enter key is pressed?
Here is the code important to the form.
HTML:
<form NAME="myform">
<div id = "textbox">
<INPUT type="text" name="inputbox" value="" placeholder="Search with me!">
</div>
<input type="button" name="button" value="Click" onClick="google(this.form)">
</form>
CSS:
#backgroundstuff canvas {
outline: 0px;
position: fixed;
left: 0px;
top: 0px;
/*width: auto;
height: 100%;*/
z-index: -99;
}
Javascript
function google(form) {
var gSearch = form.inputbox.value;
window.location.href = 'https://www.google.com/search?q=' + gSearch;
//window.location.replace('https://www.google.com/search?q=' + gSearch);
}
The enter key automatically submits the form.
If you do not have an action defined on your form, it will default to the same page.
The posted data will use the name parameter of your form fields.
Using proper form markup will solve both issues.
Setting an action:
<form method="GET" action="https://www.google.com/search">
Setting name to the name of the parameter you want to pass:
<input type="text" name="q" placeholder="Search with me!">
With both of these taken care of, you won't need the google function. Your "search" button can be a simple submit:
<input type="submit" value="Click">
change your html to:
<form NAME="myform" onsubmit="event.preventDefault(); google(this)">
<div id = "textbox">
<INPUT type="text" name="inputbox" value="" placeholder="Search with me!">
</div>
<input type="submit" name="button" value="Click">
</form>
So that it works on the submit of the form not on the click of the button.
Also make sure to cancel the event, like Juan Mendes showed below.
You can do something like:
<form onsubmit="return google(this)">
<input type="text">
<input type="submit">
</form>
And change your google function to:
function google(form) {
// YOUR LOGIC HERE
return false;
}
This way you can implement search results based on keyboard click.
$( "#txtBox" ).keypress(function( event,value ) { if ( event.which == 13 ) { var gSearch = form.inputbox.value; window.location.href = 'https://www.google.com/search?q=' + gSearch; } });
When you hit enter, it submits the form and reloads the page. You need to listen to the form submit event instead of the click. Then you can call event.preventDefault() to prevent the form from being submitted.
<form NAME="myform" onsubmit="event.preventDefault(); google(this)">
However, you don't need JavaScript, just the action attribute of the form to be https://www.google.com/search and make the text field's name be "q"
<form NAME="myform" method="GET" action="https://www.google.com/search">
<input type="text" name="q" placeholder="Search with me!">
Since it is a form pressing enter will launch an event.
This event is what submits your request and reloads the page.
To make it go to google instead you should start by capturing the event and making sure it doesn't bubble up or do anything by default.
To do this, simply add an id to your form and capture the event e.g.
<form name="myform" id="to_cancel_submit">
then in your JS, target the element here
form = document.getElementById('to_cancel_submit')
after you have the form in a variable (or directly, doesn't matter) you bind the submit handler for it and prevent the default events like this
form.submit = function(e) {
e.preventDefault(); // pretty obvious
e.cancelBubble(); // prevents bubbling to parents
return false; // both of the above
// call your functions here...
}

Changing div content with Javascript onClick

I'm trying to use a textbox and a submit button to change a div on the page. I want to take the text that has been typed in the textbox and put it in the div when the button is clicked. I have this code:
function myfunction() {
var myText = document.getElementById("textbox").value;
document.getElementById('myDiv').innerHTML = myText;
}
<form>
<input type="text" name="textbox" id="textbox" />
<input type="submit" name="button" id="button" onclick="myfunction()" />
</form>
<br/>
<div id="myDiv"></div>
But nothing happens. When I try it in the browser it just refreshes the page and adds ?textbox=someValueHere to the end of the URL. How can I get the div to display the textbox value?
The problem is that the submit button is posting the form, so you are not seeing the change - If you change your submit button to a normal button it will work
<input type="button"name="button" id="button" onclick="myfunction()" />
The form is submitting. You need to stop that by adding return false; (if you are using Jquery) Or remove the form entirely it is not required.
function myfunction() {
var myText = document.getElementById("textbox").value;
document.getElementById('myDiv').innerHTML = myText;
return false;
}
Nothing happens because the form is being submitted. You need to prevent the default action from happening, which is the form submission. See preventDefault() or return false in the MDN for more details on how to prevent an events default action from occurring.
Call event.preventDefault() to prevent the normal form submission.
function myfunction(e) {
e.preventDefault();
var myText = document.getElementById("textbox").value;
document.getElementById('myDiv').innerHTML = myText;
}
<form>
<input type="text" name="textbox" id="textbox" />
<input type="submit" name="button" id="button" onclick="myfunction(event)" />
</form>
<br/>
<div id="myDiv"></div>

Categories