<form id="form" method="post" action="1.php">
<input name="checkbox" type="checkbox" checked="checked" value="ON" >
<input type="hidden" name="submitted2" value="TRUE" >
<input name="submitted1" type="submit" value="Apply" >
<input type="submit" name="submitted2" value="OK" />
</form>
On selecting the checkbox and pressing the "Enter" hardkey, I want OK to be executed
You can use javascript to detect the enter and submit the form.
http://www.javascript-coder.com/javascript-form/javascript-form-submit.phtml
Please make few updation in your form.
Updated One :
<input name="checkbox" type="checkbox" checked="checked" value="ON" onkeypress="return runScript(event)" id="checkbox">
//Add following code in Javascript
function runScript(e) {
if (e.keyCode == 13) {
var tb = document.getElementById("checkbox");
eval(tb.value);
return false;
}
}
if(characterCode == 13)
{
return false; // returning false will prevent the event from bubbling up.
}
else
{
return true;
}
In order to run some "user defined" script from this text box when the enter key is pressed, and not have it submit the form, above is some sample code. Please note that this function doesn't do any error checking and most likely will only work in IE.
I hope this work for You !!!!
Related
I am trying to implement an (zip code of my country) input field that only accept digits and limit the number of characters to 5.
Which html input type and attributes are more appropriate for this task ?
<input type="text" name="zipcode" pattern="[0-9]{5}" />
pattern="\d{5}" would also work. But make sure to re-check it in your target-script because form-elements can be manipulated.
A complete example (WITH JQUERY) for checking values on change or keyup in the .checkFieldNum values and on submit the form.
JS
function checkNum(value)
{
return value.match(/\d{5}/);
}
$(document).ready(function(){
// trigger if element-value with class="checkFieldNum" changes or key is pressed
$('.checkFieldNum').on('change keyup',function(event){
if(checkNum($(this).val()) === false)
{
$(this).css({background:'tomato'})
}
else
{
$(this).css({background:''})
}
})
// trigger if form should be submitted
$('.formClassForSubmit').on('submit',function(event){
event.preventDefault();
var goOn = true;
$('.checkFieldNum').each(function(){
if(checkNum($(this).val()) === false)
{
goOn = false;
alert($(this).attr('name') + ' has wrong value')
}
})
if(goOn === true)
{
// In this case, everything is OK and go on whatever you will do..
}
})
})
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="?" method="post" class="formClassForSubmit">
<input type="text" class="checkFieldNum" name="zipcode1" pattern="[0-9]{5}" />
<input type="text" class="checkFieldNum" name="zipcode2" pattern="\d{5}" />
<input type="submit" name="send" value="send" />
</form>
see https://jsfiddle.net/7hbj6a3e/3/
<input type="number" minlength="5" maxlength="5" name="zipcode" />
see https://www.w3schools.com/tags/tag_input.asp
I have been going through many solutions to my issues with other older questions, but I can't seem to implement any of the solutions.
I am trying to create a simple login box using a form, which then loads a particular webpage based on the login info. This is what I currently have;
<div class="container">
<form name="login">
<p class="paragraph">Username <input class="login" type="text" placeholder="Enter Username" name="userid"/></p>
<p class="paragraph">Password <input class="login" type="password" placeholder="Enter Password" name="pswrd"/></p>
<p class="paragraph"><input type="button" onclick="check(this.form)" value="Login"/></p>
</form>
function check(form)
{
if(form.userid.value == "pf900" && form.pswrd.value == "password")
{
window.open('/pf900_pid/index.htm','_self')
}
else if(form.userid.value == "pf350a" && form.pswrd.value == "password")
{
window.open('/pf350a_pid/index.htm','_self')
}
else
{
alert("Error: Wrong username or password")
}
}
My issue is, that I can't seem to work the form so that the enter key will activate the login button. If I change the button to a submit, it just puts the login info in the address bar and doesn't perform the correct action.
I'm going to summarize what everyone has said here and put it in a single answer.
On the <form> element, be sure to use the onSubmit
Change the input type to submit
Remove the click handle on the <input>
function check() {
event.preventDefault();
var form = document.forms["login"];
if (form.userid.value == "pf900" && form.pswrd.value == "password") {
window.open('/pf900_pid/index.htm', '_self')
} else if (form.userid.value == "pf350a" && form.pswrd.value == "password") {
window.open('/pf350a_pid/index.htm', '_self')
} else {
alert("Error: Wrong username or password")
}
}
<div class="container">
<form name="login" onSubmit="check()">
<p class="paragraph">Username <input class="login" type="text" placeholder="Enter Username" name="userid" /></p>
<p class="paragraph">Password <input class="login" type="password" placeholder="Enter Password" name="pswrd" /></p>
<p class="paragraph"><input type="submit" value="Login" /></p>
</form>
</div>
Keep the input type as "Submit:
<input type="submit"/>
and on the Check function, use
event.preventDefault();
please switch your code to this one:
form method="post" onsubmit="check(this.form)" action="place your
function here"
input type="submit" value="Login"/>
button won't work on form element, it is rather use in dom events or showing a modal.
Hope this helps!
We can do in two different ways, just change the input type to submit or add onkeypress event check the enter key like below.
<div class="container">
<form name="login" onkeypress="onEnter(event)">
<p class="paragraph">Username <input class="login" type="text" placeholder="Enter Username" name="userid"/></p>
<p class="paragraph">Password <input class="login" type="password" placeholder="Enter Password" name="pswrd"/></p>
<p class="paragraph"><input type="submit" onclick="check(this.form)" value="Login"/></p>
</form>
onkeypress function block
function onEnter(e){
if(e.keyCode == 13)
check()
}
I want to tigger the button name=buttonexecute when ever user press Enter key. Can some one help me in this pls.
<div class="mytext1" style="height: 40px;">
<br>
<form id="myform" method="post" style="font-size: 22px">Text :
<input type="text" id="search_text" name="search_text" size="44" autofocus>Extension :
<input type="text" id="search_extension" name="search_extension" size="4" maxlength="4"> Sub Files
<input type="checkbox" id="subfolder" name="subfolder" value="0"> LTO-No.
<input type="text" id="search_ltono" name="search_ltono" size="4" maxlength="4">
<input name="buttonExecute" id="endereco"
type="button" value="Show "
onclick="ajaxFunction(search_text.value,search_ltono.value,search_extension.value)"
autofocus>
</form>
</div>
I solved it with the following.
function searchKeyPress(e)
{
// look for window.event in case event isn't passed in
if (typeof e == 'undefined' && window.event) { e = window.event; }
if (e.keyCode == 13)
{
document.getElementById('endereco').click();
}
}
Text : <input type="text" onkeypress="searchKeyPress(event);" id="search_text" name="search_text" size="44" autofocus >
<input type="text" id="search_extension" name="search_extension" onkeypress="searchKeyPress(event);" size="4" maxlength="4">
Sub Files <input type="checkbox" id="subfolder" name="subfolder" onkeypress="searchKeyPress(event);" value="0">
LTO-No. <input type="text" id="search_ltono" name="search_ltono" onkeypress="searchKeyPress(event);" size="4" maxlength="4">
This works fine.
In your case, since you are using inline onclick handler on buttonExecute button, you an then do something like this:
document.getElementById('myform').onkeyup = function (e) {
e = e || window.event;
if (e.keyCode === 13) {
document.getElementById('endereco').onclick();
// or: ajaxFunction(search_text.value, search_ltono.value, search_extension.value)
}
}
Proper way. But what you should really do is to use onsubmit event and use button type submit. Then instead of this shenanigans with Enter key events you could use this:
<form id="myform" method="post" onsubmit="ajaxFunction(search_text.value,search_ltono.value,search_extension.value)">
<!-- ... -->
<input name="buttonExecute" id="endereco"
type="submit" value="Show "
autofocus>
</form>
onsubmit event is fired on submit button clicks and Enter keys, exactly what you need.
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 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.