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;
}
Related
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()
}
This is my html code
<form method="get" action="https://example.com/i">
Username : <input type="text" name="uname"></input>
<br/>
<input type="submit" value="search"></input>
</form>
When I search something in it, it redirects to example.com/i/username/? but I want it to be redirect to example.com/i/username. There should be no / and ? at the end of the url
Here's the way to go...
var search = document.getElementById('search');
search.addEventListener('click', function() {
var name = document.getElementById('name');
//Redirect the client to the desired URL, if the name is valid.
location.href = 'https://example.com/i/' + encodeURIComponent(name.value);
});
<form method="get" action="https://example.com/i" id="myForm">
Username : <input type="text" id="name"></input><br/>
<input type="button" value="search" id="search"></input>
</form>
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.
With a html type=file, how can I validate to determine if a file was uploaded, (for client side validation using javascript or jquery)
<form action="program" enctype="multipart/form-data" method="post">
<input type="text" name="textline" size="30">
<input type="file" name="datafile">
<input type="submit" value="Send">
</form>
<script>
if (something )
message = "You did not upload a file...";
</script>
Same way as any other input, look at the value. For example
<form id="programform" action="program" enctype=...
<script type="text/javascript">
document.getElementById('programform').onsubmit= function() {
if (this.elements.textline.value==='')
alert('Please enter a description.');
if (this.elements.datafile.value==='')
alert('Please choose a file to upload.');
else
return true;
return false;
}
</script>
Thanks for the push in the right direction... Here is what I was looking for.
<form name="registration_2" id="registration_b" action="registration_b.php" method="post" nctype="multipart/form-data" accept-charset="UTF-8" onsubmit="return check_checkboxes();">
<input type="text" name="textline" id="textline" size="30">
<input type="file" name="datafile" id="school_logo_id">
<input name="no_school_logo_id" id="no_school_logo_id" type="checkbox" onclick="no_school_logo(this);"/>Our school does not have a logo
<input type="submit" value="Send">
</form>
<script type="text/javascript">
function check_checkboxes()
{
var logo = document.getElementById('school_logo_id');
var nologo = document.getElementById('no_school_logo_id');
if (logo.value==='' && nologo.checked===false)
alert('Must enter logo file or check no file available.');
}
</script>