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()
}
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;
}
How to make a form that submit to a text field below
<form action="">
Text: <input type="text" name="firstname">
<input type="submit" value="Submit"><br><br>
Post text: <input type="text" name="firstname">
</form>
You will need to use JavaScript for that:
<script>
function submitted() {
formValue = document.getElementsByName("firstname")[0].value;
document.getElementsByName("firstname")[1].setAttribute("value", formValue); // Copy the value
return false;
}
</script>
<form onsubmit="return submitted()"> <!-- Call submitted when the form is submitted -->
Text: <input type="text" name="firstname">
<input type="submit" value="Submit"><br><br> Post text: <input type="text" name="firstname">
</form>
However, there is no need for a form for that. The onsubmit attribute is mostly used for when you want to alert the user that the form was submitted; the actual submission is done on the server through PHP or something else, and not through JavaScript (since the user has access to the JavaScript code and could change the input checking process as he wishes). Here you could simply have something like this:
<script>
function submitted() {
formValue = document.getElementById("firstname").value;
document.getElementById("postFirstname").setAttribute("value", formValue); // Copy the value
}
</script>
Text: <input type="text" id="firstname">
<button onclick="submitted()">Submit</button>
<br><br> Post text: <input type="text" id="postFirstname">
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>
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.
<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 !!!!