I have created simple login page using html. i want create link with another page after click login page.here attach my code i set its not working .how to link another page after login ..here My code
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Login Form</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<IMG class="displayed" src="images/wel..png" alt="...">
<div id="login">
<div id="triangle"></div>
<h1>Log in</h1>
<form>
<input type="Username" placeholder="Username" />
<input type="password" placeholder="Password" />
<input type="submit" value="Log in" />
</form>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
Are you looking for action attribute of form?
Try this:
<form action="http://www.example.com" method="post">
<input type="Username" placeholder="Username" />
<input type="password" placeholder="Password" />
<input type="submit" value="Log in" />
</form>
you have to change
<form action="youpagename">
Try to following:
<form method="GET" action="foo.html">
<input type="submit" value="Login"/>
</form>
This is the same, but valid, and is equivalent to:
<a href="foo.html">
Related
I have a html page that looks like the image provided and here is the source code. How can I display a blank page once a user logs in with 'admin' as both the username and password?
<html>
<head>
<title>Login Form Design</title>
<link rel="stylesheet" type="text/css" href="style.css">
<body>
<div class="loginbox">
<img src="avatar.png" class="avatar">
<h1>Login Here</h1>
<form>
<p>Username</p>
<input type="text" name="" placeholder="Enter Username">
<p>Password</p>
<input type="password" name="" placeholder="Enter Password">
<input type="submit" name="" value="Login">
Lost your password?<br>
Don't have an account?
</form>
</div>
</body>
</head>
</html>
As I hide an <input> tag with the hide() function in JQuery Mobile, also, it hides the <input> it does not hide the <div> surrounding the <input> that has been implemented by JQuery Mobile.
I could work on the DOM afterwards to make it disapear of course, but I am looking for a better solution.
Here is the case, you'll notice that the div surrounding <input type="text" name="lastname" id="lastname"> is still on the screen (you can run it a W3C editor like here):
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Text Inputs</h1>
</div>
<div data-role="main" class="ui-content">
<form method="post" action="/action_page_post.php">
<div class="ui-field-contain">
<label for="firstname">First name:</label>
<input type="text" name="firstname" id="firstname">
<label for="lastname">Last name:</label>
<input type="text" name="lastname" id="lastname">
<script type="text/javascript">
$(document).ready(
$('body').find('[id="lastname"]').hide()
);
</script>
</div>
<input type="submit" data-inline="true" value="Submit">
</form>
</div>
</div>
</body>
</html>
I've tried to apply the hide() function on the parent() but it does take the parent as if, the <div> that I want to hide is not yet on the screen, and hide the whole form instead of a specific field:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Text Inputs</h1>
</div>
<div data-role="main" class="ui-content">
<form method="post" action="/action_page_post.php">
<div class="ui-field-contain">
<label for="firstname">First name:</label>
<input type="text" name="firstname" id="firstname">
<label for="lastname">Last name:</label>
<input type="text" name="lastname" id="lastname">
<script type="text/javascript">
$(document).ready(
$('body').find('[id="lastname"]').parent().hide()
);
</script>
</div>
<input type="submit" data-inline="true" value="Submit">
</form>
</div>
</div>
</body>
</html>
At the moment you try to access to the parent div it is not painted.. One way is to use JavaScript setTimeout() method to hide that div element:
setTimeout(function() {
$('#lastname').parent().hide();
}, 1);
<link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<div data-role="page">
<div data-role="header">
<h1>Text Inputs</h1>
</div>
<div data-role="main" class="ui-content">
<form method="post" action="/action_page_post.php">
<div class="ui-field-contain">
<label for="firstname">First name:</label>
<input type="text" name="firstname" id="firstname">
<label for="lastname">Last name:</label>
<input type="text" name="lastname" id="lastname">
</div>
<input type="submit" data-inline="true" value="Submit">
</form>
</div>
</div>
On clicking of the Log in button, I get the alert message, however, on closing of the alert, the next focus is going back to the 1st textbox Username. I want the focus back on the button, so that I can tab to the next field.
<html>
<head>
<title> Test </title>
<script>
function handleClick(){
alert("welcome");
}
</script>
</head>
<body>
<form name="aye" onSubmit="handleClick();">
<label for="username">Username:</label>
<input type="text" id="username" tabindex="0">
<br>
<input type="submit" value="Log in" tabindex="0">
<br>
<label for="password">Password:</label>
<input type="password" id="password" tabindex="0">
<br>
</form>
</body>
</html>
If I understand you correctly, you can do a .focus() on an element using:
document.querySelector('yourselector').focus();
Like this:
<html>
<head>
<title> Test </title>
<script>
function handleClick(){
alert("welcome");
document.querySelector('input[type="submit"]').focus();
}
</script>
</head>
<body>
<form name="aye" onSubmit="handleClick();">
<label for="username">Username:</label>
<input type="text" id="username" tabindex="0">
<br>
<input type="submit" value="Log in" tabindex="0">
<br>
<label for="password">Password:</label>
<input type="password" id="password" tabindex="0">
<br>
</form>
</body>
</html>
Using code
$(document).ready(function () {
$('input[type=submit]').focus();
});
set focus on submit button.
I have two div's, and inside this two div's i have <a href> that invoce javascript function.
My problem is, when i click somewhere outside my form should hide that hide, for the second div..this is working, but for the first isnt.
HTML that have javascript to invoce:
<div id="joinUs">
<a href="javascript:hideshow(document.getElementById('joinusLogin'))">
Join us!
</div>
<div id="invite">
<a href="javascript:hideshow(document.getElementById('inviteNowSignup'))">
<img src="/www/assets/newImages/header/Invite.png"></img>
</div>
HTML that have div's that is going to be invoced:
<div id="inviteNowSignup">
<div id="backgroundSignup"></div>
</a>
<form id="signupForm">
<input id="signupFormFields" type="email" name="email" placeholder=" E-mail"><br />
<input id="signupFormFields" type="text" name="name" placeholder=" Password"><br />
<input id="signupFormFields" type="text" name="subject" placeholder=" User Name"><br />
<input id="submitSignup" type="submit" value="SIGN UP">
</form>
<div id="alreadyMember">
Already a member? Log in here.
</div>
</div>
<div id="joinusLogin">
<div id="backgroundJoinus"></div>
</a>
<form id="loginForm">
<input id="loginFormFields" type="email" name="email" placeholder=" E-mail"><br />
<input id="loginFormFields" type="text" name="name" placeholder=" Password"><br />
<input id="submitLogin" type="submit" value="LOG IN">
</form>
<div id="signupNow">
Don't have an account yet? Sign up here.
</div>
</div>
Here's my Javascript function:
function hideshow(which){
if (!document.getElementById)
return
if (which.style.display=="block")
which.style.display="none"
else
which.style.display="block"
}
Can anyone help me solve this problem?
the simplest way to do that
add event to the body on click hide all pop-ups
$('body').click(function(){
$('your-pop-up').hide();
});
then add stopPropagation() to this pop-ups to prevent hide when click inside it.
$('your-pop-up').click(function(e){
e.stopPropagation();
});
Now if you press any where outside your pop-ups thy will hide
Try to Use Color Box Plugin from Link
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title>Pop Up</title>
<style>
#joinUs{cursor:pointer; color:#0066CC}
#invite{cursor:pointer; color:#0066CC}
</style>
<link rel="stylesheet" href="colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="../colorbox/jquery.colorbox.js"></script>
<script>
$(document).ready(function(){
$("#joinUs").colorbox({inline:true, width:"50%", href:"#joinusLogin"});
$("#invite").colorbox({inline:true, width:"50%", href:"#inviteNowSignup"});
});
</script>
</head>
<body>
<div id="joinUs">Join us!</div>
<div id="invite">Invite Now</div>
<div style='display:none'>
<div id="inviteNowSignup">
<div id="backgroundSignup"></div>
</a>
<form id="signupForm">
<input id="signupFormFields" type="email" name="email" placeholder=" E-mail"><br />
<input id="signupFormFields" type="text" name="name" placeholder=" Password"><br />
<input id="signupFormFields" type="text" name="subject" placeholder=" User Name"><br />
<input id="submitSignup" type="submit" value="SIGN UP">
</form>
<div id="alreadyMember">
Already a member? Log in here.
</div>
</div>
</div>
<div style='display:none'>
<div id="joinusLogin">
<div id="backgroundJoinus"></div>
</a>
<form id="loginForm">
<input id="loginFormFields" type="email" name="email" placeholder=" E-mail"><br />
<input id="loginFormFields" type="text" name="name" placeholder=" Password"><br />
<input id="submitLogin" type="submit" value="LOG IN">
</form>
<div id="signupNow">
Don't have an account yet? Sign up here.
</div>
</div>
</div>
</body>
</html>
This is my html
<!DOCTYPE HTML>
<html lang="en-GB">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<title</title>
<link rel="stylesheet" href="demo.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.creditCardValidator.js"></script>
<script type="text/javascript" src="demo1.js"></script>
<script type="text/javascript">
$('.tabHeader').click(function () {
$('.demo form').hide().filter($(this).attr('href')).show()
return false;
}).eq(0).click();
</script>
</head>
<div class="demo">
Form A
Form B
<form id="formA">
<h2>Card Payment</h2>
<input type='hidden' id='ccType' name='ccType' />
<ul class="cards">
<li class="visa">Visa</li>
<li class="visa_electron">Visa Electron</li>
<li class="mastercard">MasterCard</li>
<li class="maestro">Maestro</li>
</ul>
<label for="card_number">Card number</label>
<input type="text" name="card_number" id="card_number">
<div class="vertical">
<label for="expiry_date">Expiry date <small>mm/yy</small>
</label>
<input type="text" name="expiry_date" id="expiry_date" maxlength="5">
<label for="cvv">CVV</label>
<input type="text" name="cvv" id="cvv" maxlength="3">
</div>
<div class="vertical maestro">
<label for="issue_date">Issue date <small>mm/yy</small>
</label>
<input type="text" name="issue_date" id="issue_date" maxlength="5"> <span class="or">or</span>
<label for="issue_number">Issue number</label>
<input type="text" name="issue_number" id="issue_number" maxlength="2">
</div>
<label for="name_on_card">Name On card</label>
<input type="text" name="name_on_card" id="name_on_card">
<input type="submit" value="Pay Now !">
</form>
<form id="formB">Name:
<input type="text" name="name" id="name" value="" />Email:
<input type="text" name="email" id="email" value="" />Comments:
<textarea name="comments" id="comments" cols="25" rows="3"></textarea>
<input type="submit" value="submit" />
</form>
basically has two forms which can be selected using tabs.I have the java script
$('.tabHeader').click(function () {
$('.demo form').hide().filter($(this).attr('href')).show()
return false;
}).eq(0).click();
in the header which does the swapping.but when I implement this html file,both the forms are displayed in the page.
But this is the demo #http://jsfiddle.net/25WDr here its working fine,but this html is not working.The js fiddle demo is done by a user here.but I cant implement it.It showing both form.The mistake is in the html i made..can anyone figure it out
Try to put your javascript code inside a document ready
$(function() {
$('.tabHeader').click(function () {
$('.demo form').hide().filter($(this).attr('href')).show()
return false;
}).eq(0).click();
});
Because in head part all your html is not built yet, So $('.tabHeader') is empty.
You should wait the end of load of your html part in order to manipulate it.
Another solution could be put your script before the </body>
in the demo they are actually hiding the other form while clicking the first
$(function() {
$('<a>FormB</a>').prependTo('.demo').click(function () {
$('.demo form').hide().filter('#formB').show()
}).click();
$('<a>FormA</a>').prependTo('.demo').click(function () {
$('.demo form').hide().filter('#formA').show()
}).click();
});