I'm trying to get the div containing the login form to disappear when clicking the "Create an account" anchor then I would like to be able to reverse the process by clicking the "sign in" anchor on the registration form using Jquery.
I think I properly linked Jquery and the Js file in the head.
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="script/jquery-3.1.1.js"></script>
<script src="script/javascript.js"></script>
</head>
Here's the new html
<div class="form">
<form class="register-form">
<input type="text" placeholder="name"/>
<input type="password" placeholder="password"/>
<input type="text" placeholder="email address"/>
<button>create</button>
<p class="message">Already registered? Sign In</p>
</form>
<form class="login-form">
<input type="text" placeholder="username"/>
<input type="password" placeholder="password"/>
<button>login</button>
<p class="message">Not registered? Create an account</p>
</form>
</div>
And here's the new javascript.js
$(document).ready(function(){
$('a.signin').on("click", function(e) {
e.preventDefault();
$('.register-form').fadeOut();
$('.login-form').fadeIn();
});
$('a.create').on("click", function(e) {
e.preventDefault();
$('.login-form').fadeOut();
$('.register-form').fadeIn();
});
)};
Clicking on the anchors does nothing by the way.
Any help would be greatly appreciated, thanks in advance !
Change your HTML to this (I've added a class to each anchor).
<div class="form">
<form class="register-form">
<input type="text" placeholder="name"/>
<input type="password" placeholder="password"/>
<input type="text" placeholder="email address"/>
<button>create</button>
<p class="message">Already registered? Sign In</p>
</form>
<form class="login-form">
<input type="text" placeholder="username"/>
<input type="password" placeholder="password"/>
<button>login</button>
<p class="message">Not registered? Create an account</p>
</form>
</div>
Then replace your jQuery to this...
$('a.signin').on("click", function(e) {
e.preventDefault();
$('.register-form').fadeOut();
$('.login-form').fadeIn();
});
$('a.create').on("click", function(e) {
e.preventDefault();
$('.login-form').fadeOut();
$('.register-form').fadeIn();
});
Use the .on() function in jQuery. It's much better for events like on-click etc.
Okay, guess I forgot to use the $(document).ready(function), then made a syntax error at the very end of my javascript.js because I wrote )}; instead of });
Thanks a lot !
Once you link you html to jquery and javascript correctly, the above code toggles as expected.
Add the code below to you css file to hide the Registration form on initial launch of the web page.
.register-form {
display: none;
}
Related
I'm doing a project and I don't understand the front end well.
I have this html page:
<form class="form-group" action="/create" method="post" enctype="multipart/form-data">
<div class="title">
<h1>Cadastre seu produto</h1>
</div>
<div class="single-input">
<input class="form-control" placeholder="nome do produto" type="text" id="nome_produto" name="nome_produto">
</div>
<div class="single-input">
<input class="form-control" placeholder="quantidade em estoque" type="number" id="quantidade" name="quantidade">
</div>
<div class="single-input">
<input class="form-control" placeholder="preco do produto" type="number" id="preco_produto" name="preco_produto">
</div>
<button onclick="loadPage()" id="button" type="submit" class="btn btn btn-danger">ENVIAR</button>
</form>
I want that when I click on the SUBMIT button, I am redirected to another page, I want to do this using Javascript.
I tried to do this:
<script type="text/javascript">
function loadPage(){
window.location("http://localhost:8080/list")
}
but it's not working, every time I click on the button I'm redirected to a blank page
Any solution ?
Window.location is a property not a function. So it should be
window.location = "http://localhost:8080/list";
More details here: https://developer.mozilla.org/en-US/docs/Web/API/Window/location
I'm using Jquery .submit() function to submit my form using JQuery. But I've some fields marked as required in HTML.
How should I use the .submit() function to check required field before submitting the form?
here is the code
<script>
function submit() {
$("form").submit();
}
function signup() {
alert("You're going to sign up");
}
</script>
<form action="JavaScript:void(0);" onsubmit="signup()" method="post">
<div class="input">
<label for="email">Email:</label>
<input required="" id="email"/>
</div>
<div class="input">
<label for="password">Password:</label>
<input required="" type="password" id="password"/>
</div>
<a class="submit" href="JavaScript:submit();">Sign Up</a>
<button type="submit" class="none_display"></button>
</form>
I need to submit my form using a tag because of style changing in some browsers for button and input tags.
First off, it's slightly strange that you have a submit() method that you inline call, that turns around and submits the form, that then executes its inline signup() method that then actually does work. Just call the signup instead of the submit().
But for your actual question.
$(':input[required]').filter(function(){ return !this.value.trim() })
This command will find all inputs that have a required property that do not have a value. If you find any, don't do your ajax.
The below example has refactored the logic a bit, so that the submit button is actually showing, but is styled to look like a link.
$('form').on('submit', function(e){
e.preventDefault();
var blankRequiredFieldsExist = $(e.target).find(':input[required]').filter(function(){
return !this.value.trim();
}).length;
if (!blankRequiredFieldsExist) {
alert("You're going to sign up");
}
});
.buttonAsLink {
border: 0;
background-color: inherit;
padding: 0;
font-family: inherit;
font-size: inherit;
color: blue;
text-decoration: underline;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post">
<div class="input">
<label for="email">Email:</label>
<input required id="email"/>
</div>
<div class="input">
<label for="password">Password:</label>
<input required type="password" id="password"/>
</div>
<button type="submit" class="buttonAsLink">Sign Up</button>
</form>
You have a few unnecessary things going on.
You don't need action="JavaScript:void(0);" on the form.
Remove <a class="submit" href="JavaScript:submit();">Sign Up</a>
function signup() {
alert("You're going to sign up");
}
<form onsubmit="signup()">
<div class="input">
<label for="email">Email:</label>
<input required="" id="email"/>
</div>
<div class="input">
<label for="password">Password:</label>
<input required="" type="password" id="password"/>
</div>
<button type="submit" class="none_display">Sign up</button>
</form>
you can make submit button and set display: none; for that.
then write some function in jquery to click on your submit button when user click on your anchor link
<form action="JavaScript:void(0);" onsubmit="signup()" method="post">
<input type="text" required="yes" />
<input type="submit" style="display: none;" id="mysubmit" />
<a href="JavaScript:void(0);" onclick='$("#mysubmit").click();'>Submit</a>
</form>
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>
Please help me, I have a html that contain a link
Sign Up
When I was click it I want to move it right into other html
<div class="containerlogin">
<div class="avatarcontainer avatar">
<img src="avatar.jpg">
</div>
<div class="Loginbox">
<div class="form">
<form class="login-form" name="login">
<p>User Name</p>
<input type="text" placeholder="Enter Your Name"/><br>
<p>Password</p>
<input type="text" placeholder="Enter Your Password"/><br>
<input type="submit" value="Login"><br>
<p class="message">Create an account? Register</p>
</form>
<form class="register-form" name="signup">
<p>User Name</p>
<input type="text" placeholder="Enter Your Name"/><br>
<p>Password</p>
<input type="text" placeholder="Enter Your Password"/><br>
<p>Email</p>
<input type="email" placeholder="Enter Your Email"/><br>
<p>Phone number</p>
<input type="tel" placeholder="Enter Yo Telephone Number"/><br>
<p>Address</p>
<input type="text" placeholder="Enter Your Address"/><br>
<button>Create Account</button>
<p class="message">Alreday Have an account? Login</p>
</form>
</div>
</div>
</div>
Javascript
<script src='https://code.jquery.com/jquery-3.3.1.js'></script>
<script>
$('.message a').click(function(){
$('form').animate({height:"toggle",opacity: "toggle"},"slow");
} )
</script>
Here is the form
https://i.imgur.com/vg27sQo.jpg
https://i.imgur.com/ogEdgSY.jpg
I use the javascript to change to login form to the sign up form but when I put a link like LoginandRegistration/Login_register.html#signup to the link on first html that can't link directly to sign up form, it still link to login form
Please help me, thanks.
The url hash is a link to an id related anchor in the page - You need to add the id to the form - such as:
<form class="register-form" name="signup" id="signup">
That said - I would do it differently - I would display only the form identified by the url hash - rather than showing both and scrolling to the indicated one.
So i have a log in page, there is a form and what i wanna do is when the user enters their username and password, it checks it in an object (ik i should do it in backend but stay with me here) but the jquery function is not working. here is the code.
<div class="login">
<h1>Login</h1>
<form>
<input type="text" name="u" placeholder="ID" required="required" />
<input type="password" name="p" placeholder="Password" required="required" />
<button id="but" type="submit" class="btn btn-primary btn-block btn-large">Enter Workspace</button>
</form>
</div>
<script>
$('#but').click(function() {
alert("lol");
});
</script>
what do i neeed to fix in order for the jquery function to work?
What do you mean 'it checks it in an object'? Do you want to grab the username & password when a user clicks the button? If so then you'd do something like this:
$('#but').click(function() {
var username=$('input[name=u]').val();
var password = $('input[name=p]').val();
// Do checks with the values here e.g send to server for validation
});
Adding jquery in the script. Also you may write the jquery functions in $(document).ready() or $(function(){}) but it as optional as long as your write your script after the element it is trying to access.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="login">
<h1>Login</h1>
<form>
<input type="text" name="u" placeholder="ID" required="required" />
<input type="password" name="p" placeholder="Password" required="required" />
<button id="but" type="submit" class="btn btn-primary btn-block btn-large">Enter Workspace</button>
</form>
</div>
<script>
$(function(){
$('#but').click(function() {
alert("lol");
});
})
</script>