Hide div with the trigger of the function inside the div - javascript

Maybe is not easy to understand from the title but im trying to make a login/register form with only javascript.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="prueba.css">
</head>
<body>
<div id="Div1">
<form class="login-form">
<input type="text" placeholder="username" />
<input type="password" placeholder="password" />
<button>login</button>
<p class="message">Not registered?
<button onclick="switchVisible()">Register</button>
</p>
</form>
</div>
<div id="Div2">
<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?
<button onclick="switchVisible()">Login</button>
</p>
</form>
</div>
<button onclick="switchVisible()">Swap</button>
<script src="prueba.js"></script>
</body>
</html>
Swap button works fine but the ones inside form dont. I want to leave just the ones inside the form.
Edit: prueba.js
function switchVisible() {
if (document.getElementById('Div1')) {
if (document.getElementById('Div1').style.display == 'none') {
document.getElementById('Div1').style.display = 'block';
document.getElementById('Div2').style.display = 'none';
}
else {
document.getElementById('Div1').style.display = 'none';
document.getElementById('Div2').style.display = 'block';
}
}
}
Basically, what i want to show is only one form, if you are on the login form, you can press the "Register" from "Not registered yet?" and it will show the register form, and viceversa.
If you check https://www.instagram.com/ login page you will get it. The thing is i want the swap button to be personalized, but the button only works if its outside the div i want to hide/show.

I just created a basic demo of this issue: https://jsfiddle.net/bv5m42od .
It appears that the issue is that the buttons inside the divs are submitting the form before the JavaScript can be executed.
Adding the attribute type="button" to the <button> tags will prevent this, and allow the Javascript to execute before the page is posted back, e.g:
<button type="button" onclick="switchVisible()">Register</button>
See working example: https://jsfiddle.net/bv5m42od/1
As another alternative, you could simply place these buttons outside the <form> tags, without needing to add the attribute.

Related

how to make login w/ html, css and javascript

So, I have the HTML & CSS code already, but I need to make it so when you click button, it checks the contents of the input boxes and if equal to
Username = damon
Password = password
it lets you redirects to chat.html and if its wrong it does alert("wrong").
(I dont know JavaScript so I'm asking here.)
<html>
<head>
<title>Login</title>
<link rel="stylesheet" href="style/main.css">
</head>
<body>
<div id="content">
<div class="login">
<h1>Login</h1>
<input placeholder="username" type="text" >
<input placeholder="password" type="password" id="password">
<button type="button" onclick="" id="enter">ENTER</button>
</div>
</div>
</body>
<script src="script/db.js"></script>
<script src="script/main.js"></script>
</html>
db.js is empty and main.js has
function clickHandler() {
if (username === 'damon' && password === 'poop'){
window.location.replace("chat.html");
} else {
alert('Wrong!')
}
}
Hardcoding or doing user login checks on client side is not recommended as anyone can read the source and find out your login credentials.
But just assume that you just wanted to learn and try it out. You may do it like this.
Inline Onclick Function Call:
//this is main.js
function clickHandler() {
if (document.getElementById("username").value === "damon" && document.getElementById("password").value === 'poop'){
console.log("redirect to chat.html");
//window.location.replace("chat.html");
} else {
alert('Wrong!');
}
}
<html>
<head>
<title>Login</title>
<link rel="stylesheet" href="style/main.css">
</head>
<body>
<div id="content">
<div class="login">
<h1>Login</h1>
<!--Added id="username" to below input-->
<input placeholder="username" id="username" type="text" >
<input placeholder="password" id="password" type="password">
<!--You may use inline onclick to call clickHandler function-->
<button type="button" onclick="clickHandler()" id="enter">ENTER</button>
</div>
</div>
</body>
<script src="script/db.js"></script>
<script src="script/main.js"></script>
</html>
Or you may do it by attaching onclick listener to the button to call function.

Auto-fill specific login forms of a external webpage

I'm trying to pass credentials to fill automatically the inputs login of this website: https://www.pinterest.pt/login/ .
I don't know what are the variables. So I used the inspect of the browser to know what is the id of each input.
I'm using this code but it is not working:
function Test() {
var name = document.getElementById("id").value;
var password= document.getElementById("password").value;
document.forms["registerForm"].submit(); //form submission
}
<!DOCTYPE html>
<html>
<body>
<form id="registerForm" name="registerForm" method="post" target="_top" action="https://www.pinterest.pt/login/">
<input id="email" name="id" type="email" value="examplelogin" />
<input id="password" name="password" type="password" value="examplepassword" />
<input type="button" name="submit" id="btn" value="Submit" onclick="Test()" />
</form>
</body>
</html>
Do you know what I'm doing wrong?
Thank you for your help.
Not so much an answer to your question, but more of a future reference, you don't need to get all elements within a form via a selector. You can simply use the following technique:
function Test() {
let form = document.getElementById('registerForm');
var password = form.elements.password.value;
var email = form.elements.email.value;
form.submit();
}
Notice how accessing form.elements grants direct access to the element you're trying to read out.
I may just be nit-picking, but since this is a form submit, you probably need to use onsubmit and not just have the button click do something. Try this maybe?
<!DOCTYPE html>
<html>
<body>
<form id="formulario" name="formulario" method="post" target="_top" action="https://www.allianz.pt/area-privada" onsubmit="submitFunction()">
<input id="usuario" name="_58_login" type="text" value="examplelogin" />
<input id="password" name="_58_password" type="password" value="examplepassword" />
<button type="submit">Submit</button>
</form>
<script>
function Test() {
// your submit code
}
</script>
</body>
</html>
Forms can be very picky sometimes. Always best to use a working example for exactly what you're doing as a reference.

Show div on page after clicking on Mailchimp submit button

I have a MailChimp form embedded on a static HTML page and I want the section that has the form to show a "Thank you" message after they enter their email and submit.
Mind you, on clicking the submit form, a Mailchimp confirmation page opens in a new tab. But on the page, I would like to have a hidden div show like below...
preview
Some of the examples I see require adding an id to the button but MailChimp already requires an id on the element.
Here is a fiddle: https://jsfiddle.net/Seizedev/j3vofubr/7/
<!DOCTYPE html>
<html lang="en">
<body>
<div id="join">
<form action="" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Enter your email">
<button type="submit" value="subscribe" name="subscribe" id="mc-embedded-subscribe">Subscribe</button>
</form>
</div>
<div id="success-msg" style="display: none;">
<p>Thanks for joining! We’ll stay in touch.</p>
<a class="share-btn" href="">Share</a>
</div>
</body>
</html>
I was trying to do this with jquery using an example
<script>
$('#btnClick').on('click', function() {
if ($('#join-tour').css('display') != 'none') {
$('#success-msg').html($('#success-msg').html()).show().siblings('div').hide();
} else if ($('#2').css('display') != 'none') {
$('#join-tour').show().siblings('div').hide();
}
});
</script>

HTML button not hiding with Javascript

I have 2 buttons on my page:
<button name="showLoginDiv" onclick="toggleLoginButton('button1','button2')" id="button1">Login</button><br>
<button name="showCreateDiv" onclick="toggleCreateButton('button1','button2')" id="button2">Create Account</button><br>
And these Javascript functions at the top of the page:
function toggleLoginButton(id1, id2) {
document.getElementById(id1).style.display = 'none';
document.getElementById(id2).style.display = 'none';
// show login form
var LoginForm = document.getElementById('loginForm');
LoginForm.style.display = 'block';
}
function toggleCreateButton(id1, id2) {
document.getElementById(id1).style.display = 'none';
document.getElementById(id2).style.display = 'none';
// show create account form
var CreateForm = document.getElementById('createForm');
CreateForm.style.display = 'block';
}
When I click either of the buttons, I want them both to disappear, and a form to show. The first button disappears correctly, but the second button doesn't, the form appears afterwards so it is not getting stuck on that line. Both buttons should disappear and a form then appears. Something is wrong with one of the style.display = 'none' lines.
edit: before and after clicking button screenshots:
Ditto to #Gilad Artzi's comment, your code seems to work (https://jsfiddle.net). I combined both of your functions and hard-coded the button ID's. Does this altered HTML work for you?
<!-- Buttons -->
<button name="showLoginDiv" onclick="showForm('loginForm')" id="button1">Login</button>
<br>
<button name="showCreateDiv" onclick="showForm('createForm')" id="button2">Create Account</button>
<br>
<!-- Forms -->
<form id="loginForm">
<div>
<label for="name">Name:</label>
<input type="text" id="name" name="user_name" />
</div>
<div>
<label for="mail">Email:</label>
<input type="email" id="mail" name="user_mail" />
</div>
<button name="login">Login</button>
</form>
<form id="createForm">
<div>
<label for="name">Name:</label>
<input type="text" id="name" name="user_name" />
</div>
<div>
<label for="mail">Email:</label>
<input type="email" id="mail" name="user_mail" />
</div>
<button name="create">Create Account</button>
</form>
<script>
function showForm(formID) {
document.getElementById("button1").style.display = 'none';
document.getElementById("button2").style.display = 'none';
var form = document.getElementById(formID);
form.style.display = 'block';
}
</script>
Fixed it, the problem was (for some reason) the box shadow of the buttons was being left behind. I've changed that on button click as well and it works fine now

Buttons that hide/show PHP generated forms

I've got two forms in PHP that have different purposes to them. Right now they are only made visible if the admin is logged in. This code works fine for it
<?php
if (isset($_SESSION['username']))
{
echo '</nav>
<br><br> <div class="blogscript">
<form id="form1" action="sent.php" method="post"> New page<br>
<input type="text" placeholder="Title" method="POST" name="pagetitle" /><br><br>
<textarea id="message" name="message</textarea><br>
<input type="submit" value="Confirm" />
</form></div>';
}
if (isset($_SESSION['username']))
{
echo '</nav>
<br><br> <div class="collagescript">
<form id="form2" action="sent.php" method="post"> New collage<br>
<textarea id="collage" name="message"></textarea><br>
<input type="submit" value="Confirm" />
</form></div>';
}
?>
I don't want the default of the forms to be visible even for the admin, I only want to show them when buttons are clicked that say "Show form 1" and "Show form 2".
How would I need to approach that? I don't know whether to use Javascript or pure PHP for it, in the case of PHP, I don't how how to toggle the visibility. I'm more comfortable with javascript, but I don't even know to the extent you can combine php with javascript.
PS: By toggling visibility, I don't mean toggling the opacity.
The earlier answer links to how this can be accomplished with jQuery. To do the same thing without loading the jQuery library, this should get you started:
//On document ready
document.addEventListener('DOMContentLoaded', docReady, false);
function docReady(){
document.getElementById('f1').addEventListener('click', fnF1, false )
document.getElementById('f2').addEventListener('click', fnF2, false )
}
function fnF1(){
document.getElementsByClassName('blogscript')[0].style.display = 'block';
this.style.display = 'none';
}
function fnF2(){
document.getElementsByClassName('collagescript')[0].style.display = 'block';
this.style.display = 'none';
}
.blogscript{display:none;}
.collagescript{display:none;}
<div class="blogscript">
<form id="form1" action="sent.php" method="post">New page
<div>
<input type="text" placeholder="Title" method="POST" name="pagetitle" />
</div>
<div>
<textarea id="message" name="message"></textarea>
</div>
<input type="submit" value="Confirm" />
</form>
</div>
<div class="collagescript">
<form id="form2 " action="sent.php " method="post ">New collage
<div>
<textarea id="collage " name="message "></textarea>
</div>
<input type="submit " value="Confirm " />
</form>
</div>
<button id="f1">Show Form 1</button>
<button id="f2">Show Form 2</button>
Notes:
(1) To create a pure js slideUp/slideDown effect, see:
https://gist.github.com/ludder/4226288
(2) jQuery is much simpler and significantly less typing, but requires the jQuery library to be loaded. To load the jQuery library, just include a link to its CDN location either in the <head> tags or just before the </body> tag:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
This question has been asked hundreds of times. But in case you couldn't find the link:
Jquery Toggle Show/Hide Div
You will want to use javascript for this. The linked method is pretty easy. You could also go pure CSS, but Javascript is more compatible.

Categories