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.
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 am trying to use framework 7 to create a mobile phone application. In the application I have a form that I would like the user to submit multiple times however the submit button seems to stop working after the first time. Any suggestions?
<form method="GET" class="form-ajax-submit" id="my-form">
<div class="userInput">
<input class="title" name="title" placeholder="Title your memory">
<textarea class="newmemory" name="newmemory" id="newmemory" rows="40" cols="30"></textarea>
<div class="tags">
<h4>Add some tags to this memory:</h4>
<textarea class="tags" name="tags" id="tags" rows="2" cols="30" placeholder="Seperate tags with a comma For example: mom, dad, grandma"></textarea>
</div>
<div class="convert-form-to-data"><input type="submit" id="rememberbtn" value="Remember this for me!"></div>
</div>
</form>
$$('.convert-form-to-data').on('click', function() {
mainView.router.navigate('/memories/');
var formData = app.form.convertToData('#my-form');
cards.push(app.form.convertToData('#my-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>
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;
}
I have two forms, one is shown and the other is hidden. On click of submit button of form A, form A should disappear, and in its place, form B should appear.
In my code, On click of submit button(id="signup-btn1") of form "signup", form "signup" should hide and form "signup2" should show. They are both in exactly the same position according to the styles. It's just a matter of switching the first form content for the second.
The HTML is as follows:
<div class="signup-form">
<form class="signup" name="sign-up" method="post" action="">
<input type="email" name="signup-email" value="" placeholder="E-mail" class="signup-email" />
<input type="password" name="signup-password" value="" placeholder="Password" />
<input type="password" name="signup-confirmpassword" value="" class="c-password" placeholder="Confirm Password" />
<input type="submit" id="signup-btn1" name="signup-btn" value="Sign up" class="signup-btn" />
</form>
<form class="signup2" name="sign-up2" method="post" action="">
<h2>Step 2</h2>
<p>Please enter your school name to complete the sign up.</p>
<input type="text" name="school-name" value="" class="school-input" placeholder="School Name" />
<input type="submit" name="complete-signup" value="Complete Sign up" class="signup-btn" />
</form>
</div>
Using jQuery is preferred and should result in far less code. Thanks
Place each form in a div, then:
$("button").click(function(){
$("#div1").toggle();
$("#div2").toggle();
})
Work if your page have only 2 above forms :)