Im making a website which requires uers to login or register if they dont have an account.
I have the following code so far for the login page
<span href="#" class="button" id="toggle-login">Log in</span>
<div id="login">
<h1>Log in</h1>
<form>
<input type="userID" placeholder="UserID" />
<input type="password" placeholder="Password" />
<input type="submit" value="Log in" />
</form>
</div>
and i have Javascript (below) that should hide the login form when clicking on the log in button at the top
however it doesnt seem to hide the login form.
$('#toggle-login').click(function(){
$('#login').toggle();
});
I was wondering if anyone could help me to toggle-hide and unhide the form and if theres a way to have two forms on one page where the user can either hide the login form and display the register form and vice versa
My whole page looks like this:
<!DOCTYPE html>
<head>
<title>Login Form</title>
</head>
<body>
<span href="#" class="btn btn-default" id="toggle-login">Log in</span>
<div id="login">
<h1>Log in</h1>
<form>
<input type="userID" placeholder="UserID" />
<input type="password" placeholder="Password" />
<input type="submit" value="Log in" />
</form>
</div>
<script>
$('#toggle-login').click(function(){
$('#login').toggle();
});
</script>
</body>
</html>
Thanks
You have to include the jQuery library if you are going to use it. Add this to your head section and you should be fine.
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<div id="toggle-login">
<form>
<!-- FORM ELEMTNS -->
<input typre="text">
</form>
</div>
<input type="button" id="btn" value="toggle login" >
Jquery:
$("#btn").click(function(){
$("#toggle-login").toggle();
});
Also include the jquery library at head session.
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.min.js"></script>
Related
I am having trouble toggling between my signup and login forms on a page. I'm not too familiar with JavaScript and jQuery but that is what I am using. BTW, is there another way to do this with PHP?
Here's what I've got. My login form is shown when the page is loaded, and the signup form is hidden. When I click the toggle button to show the signup form, nothing happens.
$("#toggle-login").click(function() {
$("#signup").hide().attr("formnovalidate");
$("#login").show();
});
$("#toggle-signup").click(function() {
$("#login").hide().attr("formnovalidate");
$("#signup").show();
});
$("document").ready(function() {
$("#signup").hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-data text-center">
<h1 class="form-header">Header</h1>
<div id="login" class="main-login">
<form class="login-form" action="includes/login.inc.php" method="post">
<input name="mailuid" type="text" placeholder="Page Name"></input>
<br>
<input name="pwd" type="password" placeholder="Password"></input>
<br>
<button name="login-submit" type="submit">Login</button>
</form>
<p>Need to Create an account?</p>
<span class="btn btn-default" href="#" id="toggle-signup">Sign Up/span>
</div>
<div id="signup" class="main-signup text-center">
<form class="signup-form" action="includes/signup.inc.php" method="post">
<input name="pagename" type="text" placeholder="Page Name"></input>
<br>
<input name="pwd" type="password" placeholder="Password"></input>
<br>
<input name="pwd-repeat" type="password" placeholder="Repeat Password"></input>
<br>
<button name="login-submit" type="submit">Login</button>
</form>
<p>Already have an account?</p>
<span class="btn btn-default" href="#" id="toggle-login">Log In</span>
</div>
</div>
Try moving the <script> block to the bottom of your page. Currently you are trying to attach event click handlers for DOM-Elements that are not present at the moment when the script block is executed.
Alternatively you can move the jQuery click handlers into the jQuery('document').ready() function to make sure the DOM is ready when attaching the click handlers.
Have your script defer so that it loads after the html has loaded
<script src="name_of_your_js_file" defer>
I've made a login screen. There's 2 forms inside one div. One containing login box, the other is for registration which is hidden in css by using display:none;. Below the login button there's a paragraph with a tag to click to register. How can I make it so when you click the a tag it just switches from login form to register form?
Im at the very begining stage if it comes to javascript.
<div class="login-page">
<div class="form">
<form class="register-form">
<input type="text" placeholder="login"/>
<input type="password" placeholder="password"/>
<input type="text" placeholder="e-mail"/>
<button>create</button>
<p class="message">Already have an account? Sign in!</p>
</form>
<form class="login-form">
<input type="text" placeholder="login"/>
<input type="password" placeholder="password"/>
<button>Sign in</button>
<p class="message">Need an account? Register!</p>
</form>
</div>
</div>
So here's what I've found on codepen but I can't get it to work on my website:
<script> $('.message a').click(function(){$('form').animate({height: "toggle", opacity: "toggle"}, "slow");}); </script>
One reason that your script may not work is if you included it within the <head>...</head> of the document instead of just before the closing </body> tag.
The reason the script would have failed in this case is due to the <body>...</body> not being loaded when your script runs. Check for any errors in your browser's console.
Another reason is perhaps you loaded jQuery after your custom script. For example:
<script>...</script>
<script src="code.jquery.com/jquery-3.3.1.min.js"></script>
instead of:
<script src="code.jquery.com/jquery-3.3.1.min.js"></script>
<script>...</script>
Add some css to hide the login form.
$('.message a').click(
function() {
$('form').animate({height: "toggle", opacity: "toggle"}, "slow");
}
);
.login-form {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="login-page">
<div class="form">
<form class="register-form">
<input type="text" placeholder="login"/>
<input type="password" placeholder="password"/>
<input type="text" placeholder="e-mail"/>
<button>create</button>
<p class="message">Already have an account? Sign in!</p>
</form>
<form class="login-form">
<input type="text" placeholder="login"/>
<input type="password" placeholder="password"/>
<button>Sign in</button>
<p class="message">Need an account? Register!</p>
</form>
</div>
</div>
I currently have a code, that is loaded dynamicly, so I can not tweak it much.
But now I want to trigger the submit when clicking the entire <form>.
How can I achive that?
My current code:
<form action="http://example.com" method="post" target="_blank">
<input type="hidden" name="token" value="1234567890">
<input type="hidden" name="SESSID" value="1234567890">
<input type="hidden" name="PHPID" value="1234567890">
<input type="submit" value="Open Panel">
<p class="pakb-box-icon"><i class="icon-webadres"></i></p>
<h2>Manage</h2>
<p class="pakb-box-desc">TEXT</p>
<p class="pakb-view-all">TEXT</p>
</form>
Okay man, i will answer this, but on the next time you need to post your javascript code.
This is your markup:
<!-- add a id here -->
<form id="form" action="http://example.com" method="post" target="_blank">
<input type="hidden" name="token" value="1234567890">
<input type="hidden" name="SESSID" value="1234567890">
<input type="hidden" name="PHPID" value="1234567890">
<!-- add a id here -->
<input id="submit" type="submit" value="Open Panel">
<p class="pakb-box-icon"><i class="icon-webadres"></i></p>
<h2>Manage</h2>
<p class="pakb-box-desc">TEXT</p>
<p class="pakb-view-all">TEXT</p>
</form>
With your markup set now is time for the JS:
<script type="text/javascript">
//call a anonymous function
$(document).ready(function(){
//Event On click of the form
$('#form').click(function(){
$('#submit').trigger('click');
})
})
</script>
Obs: submit the form on click in his body dont makes sense to me, please explain this.
Edit:
You can learn basic JS and JQuery on www.codecademy.com
i hava this code
<!-- signup work start here -->
<div class="signup">
<div class="signfree">
<div class="signfree1">
<h6>Sign up for our FREE <br /><span>bark bulletin!</span></h6>
<h5>monthly newsletter</h5>
</div>
<img src="<?php echo get_template_directory_uri(); ?>/images/dog_news.png" alt="" />
<form id="footer">
<input type="text" value="name" class="name" />
<input type="text" value="email" class="email" />
<input type="submit" value="submit" class="submit" />
</form>
</div>
</div>
<!-- signup work end here -->
i have this form to popup when some user come to my site !!
Try to hide your div by css and show using jquery the way suggested below.
in css:
.signup{
display:none; /* this hides your div when page loads*/
}
and jQuery:
jQuery(function(){ // dom ready function
jQuery('.signup').show(); // when dom is ready show the element
});
I'm doing login form which looks like:
<head>
<script src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script src="../sp/jqm/jquery.mobile.js"></script>
<script type="text/javascript">
$(document).bind("mobileinit", function(){
$.extend( $.mobile , {
ajaxFormsEnabled: false,
ajaxEnabled: true
});
});
</script>
<link rel="stylesheet" href="../sp/jqm/jquery.mobile.min.css" />
</head>
<body>
<div data-role="page" data-theme="b">
<div data-role="header">
<h1>Login</h1>
</div>
<div data-role="content">
<form action="login_act.asp" method="POST" id="frm_prijava" name="frm_prijava">
<div data-role="fieldcontain">
<label for="username"> User name:</label>
<input type="text" name="username" id="username" value="" />
<label for="pass">Password:</label>
<input type="password" name="pass" id="pass" value="" />
<input type="submit" name="sbm" id="sbm" data-role="button" value="Enter" />
</div>
</form>
</div>
</div>
</body>
When i try to submit form, dialog pops up and nothing happens... it just loads the page...
how can I submit this form without ajax?
Try executing your mobileinit event before jQuery Mobile is loaded
The mobileinit event is triggered immediately upon execution, you'll need to bind your event handler before jQuery Mobile is loaded.
Cheers