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.
Related
I have search input. When I write a number to find something (this is an HTTP request) I have some results but my number from input disappeared. How can I leave it?
div class="control is-expanded">
<input
name="request_id"
class="input"
placeholder="Request ID"
/>
</div>
<div class="control">
<input type="submit" name="submit" class="button is-link" />
</div>
The HTTP request in on the beckent, which I didnt write. I do only frontend. Can I change this or not?
HTML:
<form method="post" action="" onSubmit="return saveComment();">
<input type="text" name="request_id" class="input" placeholder="Request ID from Furia" />
<input type="submit" name="submit" class="button is-link" />
</form>
JavaScript:
document.getElementById("request_id").value = localStorage.getItem("comment");
function saveComment() {
var comment = document.getElementById("request_id").value;
if (comment == "") {
alert("Please enter a comment in first!");
return false;
}
localStorage.setItem("comment", comment);
alert("Your comment has been saved!");
location.reload();
return false;
}
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've some form like this:
<form action="#" method="post">
<input type="text" name="website" />
</form>
How I can find if user enter website with http:// or without? I want to show it in:
<a href="value from input">
Any suggestions how to validate this form and send it to database as right link like: http://website...?
You may use javascript to validate input.
function validate()
{
var input = document.getElementsByName("website")[0].value;
if(input.startsWith("http://")) {
alert("valid input");
return true;
}
alert("invalid input");
return false;
}
<form action="#" method="post" onsubmit="return validate()">
<input type="text" name="website" />
<input type="submit" />
</form>
<b>Gebruikersnaam:</b><br>
<input id="textbox" type="text" value="" size="25" required>
<a id="googleLink" href="##klik nu om member te kopen##"
onclick="this.href='https://websitelink.com?naam=' + encodeURIComponent(document.getElementById('textbox').value);">
<button>Koop: MEMBER</button>
</a>
I want: <input id="textbox" type="text" value="" size="25" required>
to be required when i click: <button>Koop: MEMBER</button>
like: if <input id="textbox" type="text" value="" size="25" required> value=""
its shows an alert like: "No username entered"
Fixed, Thx Lepanto
You need to cleanup your code first. not sure why you're using <a>. Anyway It would be pretty good to validate using onblur()
HTML code:
<input id="textbox" type="text" value="" size="25" required onblur="validateTextBox()">
JavaScript:
function validateTextBox() {
if (document.getElementById("textbox").value != "") {} else {
alert("Please enter a value");
}
}
Check this out in JSFiddle.
Of course, there is no such thing as required attribute in HTML tag textarea.
You have to create your own validation methods using Javascript. One of them is Validation plugin (which requires jQuery).
You have to write a JavaScript function to validation the textbox. Something like below
<script>
function doclick(){
if(document.getElementById('textbox').value != ''){
this.href='https://websitelink.com?naam=' + encodeURIComponent(document.getElementById('textbox').value);
}
else{
alert('No username entered');
}
}
</script>
And call this function in your HTML tag onclick
<b>Gebruikersnaam:</b><br>
<input id="textbox" type="text" value="" size="25" required>
<a id="googleLink" href="##klik nu om member te kopen##" onclick="doclick()">
<button>Koop: MEMBER</button>
</a>
<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 !!!!