I am trying to create a simple log in webpage. But my page is not being rendered as I expect it to be.
Here is my code:
function logIn(username, password){
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if(username == "a" && password == "a"){
window.location.href="awesomePage.html";
}else{
alert("Incorrect username or password!");
}
}
#user {
position: absolute;
top: 10px;
left: 5px;
}
#pass {
position: absolute;
top: 40px;
left: 7.5px;
}
#username {
position: absolute;
top: 5px;
left: 40px;
}
#password {
position: absolute;
top: 20px;
left: 40px;
}
#logIn {
position: absolute;
top: 75px;
left: 80px;
}
<form action="javascript:logIn(username, password);" method="post">
<div id="user"> Username: </div>
<div id="username">
<input type="text" id="username" placeholder="Enter username here." />
</div>
<div id="pass"> Password: </div>
<div id="password">
<input type="password" id="password" placeholder="Enter password here." />
</div>
<div id="logIn">
<input type="button" value="Log In" onClick="javascript:logIn(username, password);"/>
</div>
</form>
Before, when I typed a for username and a for password and I clicked log in I got the alert message: Incorrect username or password.
I tried changing the HTML to (other code remains the same):
<div id="un"> <input type="text" id="username" placeholder="Enter username here." /> </div>
<div id="pw"> <input type="password" id="password" placeholder="Enter password here." /> </div>
And therefore changing the CSS to (other code remains the same):
#un {
position: absolute;
top: 5px;
left: 40px;
}
#pw {
position: absolute;
top: 20px;
left: 40px;
}
When I type a for username and a for password it takes me to awesomePage.html, but the input fields are positioned where I don't want them to be.
My question is: How do I fix this?
Also, another small question: Should I name other pages I have: awesomePage.html or awesome_page.html, or is Awesome Page.html just fine?
Just to solve your problem with minimum changes in code:
I have just did a small change in the css and another small change in the html IDs, which keep everything looks the same and functional.
For sure you can improve this a lot by not depending on positions as previous answers listed.
function logIn(){
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
debugger;
if(username == "a" && password == "a"){
window.location.href="awesomePage.html";
}else{
alert("Incorrect username or password!");
}
}
#user {
position: absolute;
top: 10px;
left: 5px;
}
#pass {
position: absolute;
top: 40px;
left: 7.5px;
}
#username-ctr, #username {
position: absolute;
top: 5px;
left: 40px;
}
#password-ctr, #password {
position: absolute;
top: 20px;
left: 40px;
}
#logIn {
position: absolute;
top: 75px;
left: 80px;
}
<form action="javascript:logIn(username, password);" method="post">
<div id="user"> Username: </div>
<div id="username-ctr">
<input type="text" id="username" placeholder="Enter username here." />
</div>
<div id="pass"> Password: </div>
<div id="password-ctr">
<input type="password" id="password" placeholder="Enter password here." />
</div>
<div id="logIn">
<input type="button" value="Log In" onClick="logIn()"/>
</div>
</form>
Answer to your second question:
It depends on many factors, but you can find many SEO recommendations and best practices if you google "website page naming convention", my recommendations:
- Don't use spaces in page names.
- Don't use _ , as I know some search engines count this as a normal character not a separator, use - instead.
- Be consistent with all other website pages naming convention for better user experience.
As the comments say, this is not a real login, but if you want to use it your problem is that you are using repeated ids on "div" and "input". After changing them to #un and #pw you need to also update your css:
#username, #un {
position: absolute;
top: 5px;
left: 40px;
}
#password, #pw {
position: absolute;
top: 20px;
left: 40px;
}
Just Change your JavaScript code like this:
<script type="text/javascript">
function logIn(){
var username = document.querySelector("input[id='username']").value;
var password = document.querySelector("input[id='password']").value;
if(username == "a" && password == "a"){
window.location.href="awesomePage.html";
}else{
alert("Incorrect username or password!");
}
}
</script>
I would like to iterate again, please don't ever write production code like this, as this is not a real login and nothing is preventing anyone from inspecting your page source and they will then be able to see what your username and password is.
To fix your layout issue you will need to add both the child and parent elements to your CSS styling since you are using absolute positioning
#un, #username {
position: absolute;
top: 5px;
left: 40px;
}
#pw, #password {
position: absolute;
top: 20px;
left: 40px;
}
I also want to explain what went wrong with your initial code as it might help someone else understand why you changed the element ids.
Firstly in your JavaScript function you are expecting parameters for username and password, but neither are used in your code example which makes passing them in completely redundant, and you can remove them as from the function definition, you are using document.getElementById to obtain both the username and the password anyway.
When you run your code and log the output of the username and password values you will notice that they both return as undefined. The reason for this is that you have duplicate id values in your HTML source, so it is actually trying to obtain the value from another element (in this case it is identifying the parent div elements instead of the input elements).
<div id="username">
<input type="text" id="username" placeholder="Enter username here." />
</div>
The fix for this would be to just make sure your id values are unique by changing the input id to "username_input" or the parent id to "username_container" and then alter your function to account for the modified id values.
Next issue, in your HTML code you are calling your function twice in the form, and although this won't really cause issues here, once you start doing asynchronous requests there might be issues with duplicate requests, etc.
<form action="javascript:logIn(username, password);" method="post">
(this is actually not called because you don't have a submit button elsewhere in your form)
and
<input type="button" value="Log In" onClick="javascript:logIn(username, password);"/>
You don't need an action or method in your form element, so you can really choose one or the other.
So here is a CodePen link with the amended code in which I made the modifications:
http://codepen.io/anon/pen/LbxOOP
And to answer your additional question. When naming HTML pages that will be called directly from the browser, always prefer to use snake case (ie. awesome_page.html) or a hyphen (awesome-page.html). Reason for this is that in some setups the OS might not be case sensitive when looking for the file, so if you have awesomePage.html and awesomepage.html, it will be unpredictable which file it will actually return. Never use spaces in the file names.
Related
!!!Solved!!!
So I'm pretty new to HTML, CSS and Javascript is near unknown to me.
I used the help of people from a previous question, to do it.
The code of login was working before, but it doesn't work anymore and I can't really figure out what's the problem as everything for me seems alright.
The way it should work, that in (labavakara.neocities.org) you enter 'admin' and 'labadiena' in the form and it sends you to another website of my own.
Anyone know what I did wrong?
function check(form) should see what was entered in the form boxes and then see if it matches the correct user and pass.
When I go to the site and inspect element, then check console - 0 errors.
Code
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 200px;
width: 400px;
position: fixed;
top: 50%;
left: 55%;
margin-top: -100px;
margin-left: -200px;
}
body {
background-image: url("backg.png");
background-color: #cccccc;
}
function {
color: red;
}
</style>
<body>
<script>
function check(form)
{
if(form.loginInput.value == "admin" && form.passwordInput.value == "labadiena")
{
window.location.href = "https://labavakara.neocities.org/trysketuri.html";
}
else
{
alert("Error Password or Username")
}
}
</script>
<div>
<title>Login</title>
<form>
<p><input style="background-color:red;color:black;border:1px solid #ff0000" type="text" id="loginInput" name="login" value="" placeholder="Username"></p>
<p><input style="background-color:red;color:black;border:1px solid #ff0000" type="password" id="passwordInput" name="password" value="" placeholder="********"></p>
<a class="submit"><input style="color:blue" type="submit" id="loginbutton" onclick="check(this.form)" name="commit" value="Login"><br>
<label id="userMessage" style="visibility:hidden;"></label>
</a>
</form>
</div>
</body>
</html>
Use type="button" in the input button used for submit form like this
<a class="submit"><input style="color:blue" type="button" id="loginbutton" onclick="check(this.form)" name="commit" value="Login"><br>
<label id="userMessage" style="visibility:hidden;"></label>
Ref : How to prevent page from reloading after form submit - JQuery
your page is reloaded since you are using type=submit i guess.
I am building an "autofill" function. When the user types something in an input field and the system finds this string in the database it should display the string into the input field in grey, similar to what google used to/still have/has.
Therefore I built two input fields, one that's clearly visible:
html:
<input id="email_input" type="text">
<input id="autofill" type="text">
css:
#email_input{
background-color: transparent;
z-index: 100;
}
Then I position the autofill input via JS exactly where email_input is.
function positionAutocompleteInput(){
var top = $('#email_input').position().top;
var left = $('#email_input').position().left;
$('#autofill').css({'top':top});
$('#autofill').css({'left':left});
}
positionAutoFillInput();
The actual autfill I do like this:
function autofill(context){
var input = $('#email_input').val();
var replacement = context[0].email;
replacement = replacement.slice(input.length);
var display = input + replacement;
$('#autofill').val(display)
}
I tried calling positionAutoFillInput(); onInput, so that it gets repositioned with each input. If I look at the positions of both input fields in the console, they both have the same positions.
Both input fields have the same font-size and font-family.
For some reason it still looks off:
Anyone know an answer?
Can you just position them with CSS like this? This way it requires no JavaScript to position it.
#autofill, #email_input {
font-size: 20px;
}
#autofill {
position: absolute;
color: #CCCCCC;
}
#email_input {
position: relative;
z-index: 1;
background: transparent;
}
<h1>Test</h1>
<div>
<input id="autofill" type="text" value="1234567890">
<input id="email_input" type="text">
</div>
Good morning everyone,
Sorry not sure how to word the question.
I have came across this problem, I can't seem to make the 'your email' box and 'your password' box align together. When you preview it in full screen, it will be how I want it but when I shrink the screen they start to go weird. Like this:
I want it like this but on a big screen
This is what happens on a big screen
I would like it so they are both under each other and both in the same place. Please could you help me?
Please visit http://jsfiddle.net/xiiJaMiiE/8S5VG/ to see my code so far.
#top_box
{
background: grey;
height: 50px;
left: 80.8%;
width:20%;
position: relative;
top: 0;
z-index: 5;
}
There were some errors in your HTML like unnecessary spacing and invalid tag names. I made it good. Replace your html with the following HTML code:
<body>
<div id="wrapper">
<div id="top_box">
<div class="homeform">
<input type="email" placeholder="Your E-Mail">
<input type="password" placeholder="Your Password">
<input type="Submit" value="Login">
</div>
</div>
<div class="background"></div>
<div id="menu_box"></div>
<div id="main_box"></div>
<div id="Bottom_box"></div>
</div>
</body>
And also remove height from #top_box.
Working Fiddle
add line break between the two input boxes
<input ... />
<br />
<input .../>
http://jsfiddle.net/8S5VG/1/
or make the inputs to display:block
[you had a slight mistake in the css]
http://jsfiddle.net/8S5VG/2/#update
you calling homeform as an ID is you css but in your html it is a class replace the # with a . before homeform
you also have extra spacings that are moving the boxes, clean your html get rid of all unnecessary spaces
.homeform
{
position:relative;
height:20px;
width:auto;
}
Tyr This
#top_box {
background: grey;
min-height: 50px;
min-width: 164px;
left: 80.8%;
width: 20%;
position: relative;
top: 0;
z-index: 5;
}
Give in enough space for the inputs to be in place.
Hope this helps. if you need further assistance just let me know.
I am using rails to make a search request.
The search form's action is a certain path "/results/foo" .. which hits a controller that does some validation of input and then redirects to "results/foobar" if search-text was clean.
<h1 class="center"><progress style="font-size: 160%;">Loading...</progress></h1>
I'd like to show the above html.. and only the above html (either in a view or via jquery) until "results/foobar" has fully loaded.
Is there a way to show such a progress bar animation (html) until final page has completed loading?
More Details (The search bar page has code like this):
<form class="form-search" action="/s_results/iscan" method="POST">
<div class="input-append">
<input name="searchtext" type="text" class="span4 search-query" placeholder="Type number here...">
<button type="submit" class="btn">
<i class="icon-search"></i>
Search
</button>
</div>
</form>
What you do in such cases is keep a full window occupying div over your content while your data loads in the background http://jsfiddle.net/basarat/qfrJE/:
.busyPanel {
/* absolute position all over */
position: absolute;
top: 1px;
bottom: 1px;
left: 1px;
right: 1px;
/* Remove any defaults */
border: none;
margin: 0;
padding: 0;
/* Make sure it stays on top */
z-index: 2500;
/* any image */
background: grey;
/* initial visibility */
display: visible;
}
And then remove it when you are done loading:
$(".busyPanel").fadeOut('slow');
Your best bet is to use some JS on click of the link that of entry of the form that shows your div then it'll be on the screen while your request processes, once the search is complete and your new page is rendered it'll be gone.
-- html
<div class="progress">Loading...</div>
-- css
.progress { display: none; }
-- js
$('#search').click(function() {
$('.progress').show();
window.location.href = 'foo';
});
See the JSFiddle, Simple and easy.
this one may be a little bit of a long one.
I have a form that takes a picture upload that I have customized with CSS to appear as a box. I would like it so that when the user clicks the box and are prompted to upload a picture, they can choose one and have it appear in the box (where the box will lengthen to fit the picture...the picture itself will be resized to fit the width, i have this part handled).
I am trying to make this happen with javascript, ajax, etc...:
I am including these scripts:
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>
<script type="text/javascript" src="/js/script.js"></script>
as well as the code found here:
http://homesconnect.me/js/jquery.form.js
script.js contains:
function validate_picture(form_data, form) {
var form = form[0];
if ( ! form.picture.value)
return false;
}
function show_picture_loader() {
$('.add_picture_label').hide().before('<img src="/images/loader.gif" class="loader"/>');
}
function hide_picture_loader() {
$('.loader').remove();
$('.add_picture_label').show();
}
function show_error_message(form_obj, message) {
$('.error').remove();
if(message != '')
{
form_obj.before('<div class="notification_msg error">' + message + '</div>');
$('html,body').animate({scrollTop: form_obj.parent().offset().top});
}
}
I also have the live script in the page itself written as so:
<script>
$(document).ready(function(){
$('.upload_picture_form').ajaxForm({
dataType: 'json', beforeSubmit: show_picture_loader, success: function(data) {
$('.pictures').prepend('<div class="profile_picture"><div class="delete_picture"><span></span></div><img src="' + data.image + '" /></div>');
$('form.account_form').prepend('<input type="hidden" name="image[]" value="' + data.image + '" />');
hide_picture_loader();
}
});
$('input.upload_picture_file_input').change(function(e) {
$('.upload_picture_form').submit();
});
$('.delete_picture span').live('click', function(e) {
$(this).closest('.profile_picture').fadeOut();
$.get('delete_picture', {image: $(this).closest('.profile_picture').find('img').prop('src')});
});
});
</script>
The form code is as so:
<div class="pictures add_pictures">
<div class="add_picture">
<div class="upload_picture">
<form action="upload.php" method="POST" enctype="multipart/form-data" name="upload_picture_form" class="upload_picture_form">
<span class="add_picture_label">+ Add a Profile Picture</span>
<input type="file" name="upload_picture_fileinput" class="upload_picture_file_input"/>
<input type="hidden" name="MAX_FILE_SIZE" value="100000"/>
<br><br><br><br><br><br><br>
<input type="submit" id="submit" value="Upload" />
</form>
</div>
</div>
</div>
Upload.php takes the image uploaded and saves it in a directory on my server, as well as saving its filename in a mysql directory. This works fine. However, the javascript I have included are not making the image appear in the box, and hence I am not able to delete it or anything either.
Here's the relevant CSS if it matters:
.content .pictures {
padding: 5px;
background: #fff;
width: 350px;
float: right;
box-shadow: 0 1px 10px rgba(0,0,0,.2);
}
.content .pictures .profile_picture img {
margin: 0;
padding: 0;
width: 350px;
}
.content .pictures .profile_picture {
position: relative;
}
.content .pictures .profile_picture .delete_picture {
position: absolute;
right: 0;
top: 0;
display: none;
}
.content .pictures .profile_picture .delete_picture span {
padding: 0;
font: bold 12px/normal 'Helvetica', 'Arial', sans-serif;
color: #444;
cursor: pointer;
background: url(/images/close.png) no-repeat;
width: 30px;
height: 29px;
display: block;
}
.content .pictures .profile_picture:hover > .delete_picture {
display: block;
}
If you feel like you see a problem or can help I would be very appreciative. I know this one is a doozy ha. Thanks.
p.s. also is there a way that I can remove the "update" button, and have it so that the image is uploaded automatically when the it is chosen by the user (as opposed to having them hit a button to do so)?
EDIT: I may have misunderstood the question. What I interpreted was an effect like that of Newgrounds.com's text boxes, which have a picture inside the text boxes, a neat aesthetic. If I have misinterpreted the question, I apologize
in css, you can put
try this:
textarea#image { background-image:url('image.jpg'); width:600; height:400 }
in this simple css example, assuming you named your input "<textarea id="image"></textarea>", the document puts a background image inside the element.
Because of jQuery's CSS affinity, you might be able to achieve the same result using just jQuery.