I'm building a login system with only 1 button for "login" and "sign up".
<button type="submit" form="LoginForm" id="login"></button>
When I switch to sign up I change the button attribute and vice versa:
function showSignUp(){
document.getElementById('username').style.display = "block";
document.getElementById('mail').style.display = "block";
document.getElementById('password').style.display = "block";
document.getElementById('password-repeat').style.display = "block";
document.getElementById('token').style.display = "none";
document.getElementById('login').setAttribute("name","signup");
document.getElementById('login').setAttribute("value","signup");
}
<label for="rdo-signup" class="btn-radio">
<input type="radio" id="rdo-signup" name="radio-grp" onclick="showSignUp()">
...
the problem is that $_POST['signup'] is empty when i submit the form.
It does work when I load the PHP with name="login" value="login" in the HTML attribute, but as soon as I change to signup again, it doesn't work anymore.
I'm kinda sure I'm f*ing up something because of serverside code and clientside changes, but I can't figure out how to change/fix this?
[SOLUTION]
the problem was the required fields. even if they're hidden, they still won't let me submit until i fill them.
I've made a similar design and got it working. Please have a look the code below.
Hope that helps
HTML Form:
<script type="text/javascript">
function showSignUp(){
document.getElementById('username').style.display = "block";
document.getElementById('mail').style.display = "block";
document.getElementById('password').style.display = "block";
document.getElementById('password-repeat').style.display = "block";
document.getElementById('token').style.display = "none";
document.getElementById('login').setAttribute("name","signup");
document.getElementById('login').setAttribute("value","signup");
}
</script>
<form action="form.php" method="POST" id="LoginForm">
<input type="text" name="user" id="username" placeholder="username"><br><hr>
<input type="mail" name="mail" id="mail" placeholder="mail"><br><hr>
<input type="password" name="password" id="password" placeholder="password"><br><hr>
<input type="password" name="password-repeat" id="password-repeat" placeholder="confirm password"><br><hr>
<input type="text" name="token" id="token" placeholder="token"><br><hr>
<button type="submit" form="LoginForm" id="login" name="login" value="login">login</button>
<button type="button" id="change">signup</button>
</form>
<script type="text/javascript">
document.getElementById('change').onclick = function(){
document.getElementById('login').setAttribute('name','signup');
document.getElementById('login').innerHTML = 'signup';
document.getElementById('login').setAttribute('value','signup');
}
</script>
PHP Action:
<?php
echo $_POST["signup"];
echo $_POST["login"];
?>
Related
The output text display for a second and then gone forever...is there a way to make it stay?
<head>
<script type="text/javascript">
function input(){
var input_taker = document.getElementById('email').value;
document.getElementById('display').innerHTML = input_taker;
}
</script>
</head>
<form method="post" action="#">
<input type="text" name="email" placeholder="email#example.com" id="email" onchange="input()">
<input type="submit" name="save" value="save">
When you hit the save button it's probably trying to POST your form - you can remove the form element and your code will pretty much work - if all you want to do is display the text input's value elsewhere on the screen.
Here's an example:
function input() {
var input_taker = document.getElementById('email').value;
document.getElementById('display').innerHTML = input_taker;
}
<input type="text" name="email" placeholder="email#example.com" id="email" onchange="input()">
<input type="submit" name="save" value="save">
<br/>
<div id="display" onchange="input()">
I need to show a div after receiving info from a form. I got a good code to show the div after submitting the code, but for this code work, I need to use return false so the page doesn't reload.
Here is the code:
function showHide() {
document.getElementById("hidden").style.display = "block";
}
#hidden {
display: none;
}
<html>
<body>
<form action="" method="post" class="generator-form" onsubmit="showHide(); return false">
<label for="name">
<input type="text" name="nome" placeholder="Insira seu nome" required>
</label>
<input type="submit" value="go">
<div id="hidden">hello</div>
</body>
</html>
PS: I don't know why the js is not working in here, in codepen it's.
So, here's the thing:
I can't use return: false because I do need to return these values; and
I don't want to use onclick() because when the user clicks on the
button it'll show a blank box.
To explain better, I'll get the infos I got in the form and show them in the previously hidden div. It's a signature generator for email.
There's someway I can do this with javascript or php?
Try this:
<?php
$show ="none";
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$show = "block";
}
?>
<html>
<body>
<form action="" method="post" class="generator-form" onsubmit="showHide(); return false">
<label for="name">
<input type="text" name="nome" placeholder="Insira seu nome" required>
</label>
<input type="submit" value="go">
<div style="display:<?php echo $show;?>">hello</div>
</body>
</html>
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
I have a Delete button in my PHP page which deletes a record.
But when I delete that button I do a confirm box with:
<form action="log.php" method="post" onsubmit="return confirm('Are you sure?');">
Can I make it so when they confirm they have to fill in a password?
So what I mean is something like this
<form action="log.php" method="post" onsubmit="return confirm('password :');">
And then they have to fill in a password
Thanks in advance.
Hi You Need some thing like this, Modify according to your requirements
<script>
function do_check()
{
var return_value=prompt("Password:");
if(return_value==="your_password")
return true;
else
return false;
}
</script>
<form action="log.php" method="post" onsubmit="return do_check();">
Try using input type="password" , required attribute` ; disable submit until password set
document.forms["form"].querySelector("input[type=button]").onclick = function(e) {
e.preventDefault();
this.nextElementSibling.disabled = false;
this.nextElementSibling.nextElementSibling.disabled = false;
}
<form name="form">
<input type="button" value="Are you sure?" />
<input type="password" minlength="3" maxlength="7" required disabled />
<input type="submit" disabled />
</form>
document.forms["form"].querySelector("input[type=button]").onclick = function(e) {
e.preventDefault();
this.nextElementSibling.disabled = false;
this.nextElementSibling.nextElementSibling.disabled = false;
}
<form name="form">
<input type="button" value="Are you sure?" />
<input type="password" minlength="3" maxlength="7" required disabled />
<input type="submit" disabled />
</form>
I'm trying to make my logon screen appear and dissappear when a certain button is being pressed but my code doesn't seem to work and always gives a problem
document.getElementById('logon').style.visibility='hidden';
function showlogon(){
document.getElementById('logon').style.visibility="visible";
}
this is my javascript code it must be standard be hidden
<div id="logon">
<form name="login" method="post">
Username:<input name="username" type="text" size="14"/><br>
Password:<input name="password" type="password" size="14"/><br>
<input type="submit" value="Login"/>
</form>
</div>
this is the form that must be hidden by default
This works for me:
<div id="logon" style="display: none;">
<form name="login" method="post">
Username:<input name="username" type="text" size="14"/><br>
Password:<input name="password" type="password" size="14"/><br>
<input type="submit" value="Login"/>
</form>
</div>
<div id="button"><button onClick="show()">Show Screen</button></div>
<script>
function show() {
document.getElementById('logon').style.display = 'block'; // Show the #logon div
document.getElementById('button').innerHTML = '<button onClick="hide()">Hide Screen</button>';
}
function hide() {
document.getElementById('logon').style.display = 'none'; // Hide the #logon div
document.getElementById('button').innerHTML = '<button onClick="show()">Show Screen</button>';
}
</script>
Here is a small simple utility method for what you want to do:
JSFiddle: http://jsfiddle.net/W8XPR/
function get(id) {
return document.getElementById(id);
};
function toggle(id) {
el = get(id);
el.style.display='none'==el.style.display?'':"none";
};