I have a form for logging into my website. I need to make it so that when the user hits enter, the form submits. How can I do this? Please provide code.
<form id="login" action="myHome.php" method="POST">
<input type="text" name="email" id="email"/>
<br/>
<br/>
<input type="text" name="password" id="password"/>
</form>
You need to add an <input type="submit"> and hide it with CSS so that the browser knows what to trigger when enter is pressed, yet still not show a button. For the sake of accessibility and ease of use, I'd show the button even if not that many people use it (enter is much nicer).
add a handler to on keydown and check for keycode == 13. Make this submit the form like below
function addInputSubmitEvent(form, input) {
input.onkeydown = function(e) {
e = e || window.event;
if (e.keyCode == 13) {
form.submit();
return false;
}
};
}
This should happen by default. In my experience some browsers require an <input type=submit> field, but generally this is not a requirement.
Related
For a webapp i'm currently developping, i need to hide the standard IOS keyboard when focusing on a textbox.
This can be done simply by adding the 'readonly' tag, and opening my custom input using a onClick function.
<form method="post" action="" enctype="multipart/form-data">
<input type="text" id="test123" onClick="doSomething();" readonly required />
<button type="submit" value="submit">
Save
</button>
</form>
(JSFiddle)
This works. Partially. By enabling the readonly i'm able to keep the keyboard hidden. But, another problem rises. When using the readonly, 'required' is not called. You can submit the form with an empty field, because its assumed a readonly field contains what it has to contain.
How can we possibly keep the readonly, and the required? We can't. We need a workaround.
Edit:
In regards to the possible duplicate.
The answer in THIS post is to add JQuery readonly with preventDefault. The problem with this is, that on ios devices the keyboard will stil open, which is ultimately our goal. The keyboard must not open, and still it should be a required field. In theorie, i think this can be achieved using Javascript validation. But that means, my submit button will be calling a js function, while it has to be calling our php function to submit our data.
Here's how i solved this problem. I tried to make a JS validator, as simple as possible.
$('#dataInput').submit(function (e) { //Form is submitted, it calls this function automatically
var empty = 0;
$('input[type=text]').each(function(){ //Check each input (had to be done like this, because i dont know the amount of input beforehand)
if (this.value == "") { //The textbox is empty
empty++;
}
})
if(empty === 0){ //No empty textboxes
}else{
alert(empty + ' empty input(s)'); //There are empty textboxes
e.preventDefault(); //Prevent the submit from happening
}
});
You can check out the fiddle here
You can set and remove READONLY before enter or leave the field.
$(".datepicker").on("touchstart", function(e) {
$(".datepicker").attr("readonly", "readyonly")
})
$(".datepicker").on("blur", function(e) {
$(".datepicker").removeAttr("readonly")
})
First Approach: You can assign a dummy value and then check in the backend whether the value is changed or not, if it is not changed, you can show an error message. Other wise save into database.
<form method="post" action="" enctype="multipart/form-data">
<input type="text" value="dummy" id="test123" onClick="doSomething();"
readonly required />
<button type="submit" value="submit">
Save
</button>
</form>
Second approach: when you fire the onclick event of the input field, you can remove the readonly attribute using the following code.
function doSomething()
{
$("#test123"). removeAttr("readonly");
}
This question already has answers here:
Multiple submit buttons in an HTML form
(27 answers)
Closed 9 years ago.
I have two submit buttons, a back submit button and a next submit button, when the user is in a text input and press enter, it takes them backwards... I think this is because enter evokes the back submit button instead of the next submit button.
<form action="" method="post">
<input type="submit" name="GOTO1" value="back" />
<input type="text" name="value1" />
<input type="submit" name="GOTO3" value="next" />
</form>
So when you are instead of the text field, and press enter it executes the first submit button, how can I change that...
Go the jQuery route...(untested).
// Prevent default on form on page load
// or on "enter"
$('form').disable();
// OR....
// Disable the ENTER key altogether on the form inputs
$('form').find('.input').keypress(function(e){
if (e.which == 13) // Enter key is keycode 13
{
return false;
}
});
$('input[type="submit"]').on('click', function() {
var btn = $(this).val();
if(btn == 'back')
{
// do this to go back, code here
}
else
{
// do this to go to next, code here
}
return false;
});
very simple workaround
<script>
function myFunction()
{
}
function myFunction2()
{
}
</script>
</head>
<body>
<form action="" method="post">
<input type="submit" name="GOTO1" value="back" onclick="myFunction2()"/>
<input type="text" name="value1" />
<input type="submit" name="GOTO3" value="next" onclick="myFunction()" />
</form>
Not neat but it works on the onclick number reference.
Hope this helps...
Use
<input type="button" ... >
You should not have more than one submit per form, since ENTER should trigger it.
To know more about it, you can take a look at this: https://stackoverflow.com/a/469084/955143
I have Some text boxes and one submit button. I have Used HTML5 'required' validation. Its working fine. Now I want to call a function in button click when HTML5 validation does not find any Error. When The required field is not provided the button click will not call the function.
You can use the form.onsubmit handler. Assuming the form's ID is form:
var form = document.getElementById("form");
form.onsubmit = function() {
//Pre-submission validation.
//Return true or false based on whether the validation passed.
//return false will prevent the submission the form.
};
You're going to need some extra help to do this, it could be in the form of plain javascript. Personally, I'd use jQuery to help out as it will make things easier for you and account for any cross-browser consistencies. Whether or not you want to use jQuery your is choice, whether it's appropriate only for this is another conversation, the following example is just a demonstration.
Here's a hypothetical example using jQuery that achieves your validation listening functionality:
HTML
<form>
<input type="text" class="input-text" required>
<input type="text" class="input-text" required>
<input type="submit" id="submit" class="input-button" disabled>
</form>
JS
$textInputs = $('input.input-text');
$textInputs.on('keyup', function() {
var $validTextInputs = $('input.input-text:valid'),
$submit = $('#submit');
console.log($textInputs.length, $validTextInputs.length);
if($textInputs.length === $validTextInputs.length){
//all text fields are valid
$submit.attr('disabled', null);
} else {
//not all text fields are valid
$submit.attr('disabled', '');
}
});
CSS (only let's us know, visually, when the input is valid)
.input-text:valid {
background: green;
}
See the example in action here: http://jsfiddle.net/m6QXc/
Use jquery to trigger function after HTML5 form validation
<form id="myForm">
<input type="text" class="input-text" required>
<input type="submit" id="submit" class="input-button" disabled>
</form>
$("myForm").submit(function(){
// Your code
})
Well, you could try this: fiddle example extend it as you need, used jQuery though. You can add whatever you want inside:
$('#exampleForm').submit(function(e){
e.preventDefault();
// here you can call your own js methods, send form with ajax?
// or what ever you want
});
How do I change a form's action attribute right after clicking the submit button?
<input type='submit' value='Submit' onclick='this.form.action="somethingelse";' />
Or you can modify it from outside the form, with javascript the normal way:
document.getElementById('form_id').action = 'somethingelse';
There's a simple way to do this if you only need to support modern browsers: on your submit button, add a formaction="/alternate/submit/url" attribute like so:
<form>
[fields]
<input type="submit" value="Submit to a" formaction="/submit/a">
<input type="submit" value="submit to b" formaction="/submit/b">
</form>
It also works on <button> tags.
The gotcha is that old versions of IE (<10) and the Android Browser (<4.0) do not support it. So, if you need to support older browsers, then the existing JS answers will probably work better for you.
More info: http://www.wufoo.com/html5/attributes/13-formaction.html
You can also set onSubmit attribute's value in form tag. You can set its value using Javascript.
Something like this:
<form id="whatever" name="whatever" onSubmit="return xyz();">
Here is your entire form
<input type="submit">
</form>;
<script type=text/javascript>
function xyz() {
document.getElementById('whatever').action = 'whatever you want'
}
</script>
Remember that onSubmit has higher priority than action attribute. So whenever you specify onSubmit value, that operation will be performed first and then the form will move to action.
Attach to the submit button click event and change the action attribute in the event handler.
You can do that on javascript side .
<input type="submit" value="Send It!" onClick="return ActionDeterminator();">
When clicked, the JavaScript function ActionDeterminator() determines the alternate action URL. Example code.
function ActionDeterminator() {
if(document.myform.reason[0].checked == true) {
document.myform.action = 'http://google.com';
}
if(document.myform.reason[1].checked == true) {
document.myform.action = 'http://microsoft.com';
document.myform.method = 'get';
}
if(document.myform.reason[2].checked == true) {
document.myform.action = 'http://yahoo.com';
}
return true;
}
HTML5's formaction does not work on old IE browsers. An easy fix, based on some of the responses above, is:
<button onclick="this.form.action='/PropertiesList';"
Account Details </button>
You can try this:
<form action="/home">
<input type="submit" value="cancel">
<input type="submit" value="login" formaction="/login">
<input type="submit" value="signup" formaction="/signup">
</form>
When filling out a form's textarea, the default behavior when the enter key is hit is to move to the next line. How can I change the behavior of the form so it will submit upon user hitting enter even when the user is in a textarea?
I used Firebug to checkout Stack Overflow's comment textarea (which has this behaviour), but couldn't see any JavaScript that achieved this affect. Is there a way to change the behavior of the textarea without using JavaScript?
You can't do this without JavaScript. Stackoverflow is using the jQuery JavaScript library which attachs functions to HTML elements on page load.
Here's how you could do it with vanilla JavaScript:
<textarea onkeydown="if (event.keyCode == 13) { this.form.submit(); return false; }"></textarea>
Keycode 13 is the enter key.
Here's how you could do it with jQuery like as Stackoverflow does:
<textarea class="commentarea"></textarea>
with
$(document).ready(function() {
$('.commentarea').keydown(function(event) {
if (event.which == 13) {
this.form.submit();
event.preventDefault();
}
});
});
<form id="myform">
<input type="textbox" id="field"/>
<input type="button" value="submit">
</form>
<script>
$(function () {
$("#field").keyup(function (event) {
if (event.which === 13) {
document.myform.submit();
}
}
});
</script>
Why do you want a textarea to submit when you hit enter?
A "text" input will submit by default when you press enter. It is a single line input.
<input type="text" value="...">
A "textarea" will not, as it benefits from multi-line capabilities. Submitting on enter takes away some of this benefit.
<textarea name="area"></textarea>
You can add JavaScript code to detect the enter keypress and auto-submit, but you may be better off using a text input.