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
Related
I am trying to do something where you can search for flights within a database based on the departure/arrival airport and departure/return flight. There are two radio buttons where you can click whether it's round-trip or one-way. What I am having trouble with is, I want to hide the return flight thing whenever the one-way radio button has been clicked but it won't budge. Everything remains on screen no matter what button is pushed. Here is my code, any help would be appreciated!
<!DOCTYPE html>
<html>
<head>
<script>
function tripCheck(){
if (document.getElementById('round').checked){
document.getElementById('toggle').style.display = 'none';
} else {
document.getElementById('toggle').style.display = 'block';
}
</script>
</head>
<body>
<form action="/post" method="POST">
<!-- Radio Buttons -->
<input type="radio" onclick="javascript:tripCheck();" name="oneround" id="round" checked>Round Trip
<input type="radio" onclick="javascript:tripCheck();" name="oneround" id="oneway">One Way<br>
<!-- Source and Destination Locations -->
<input type="text" name = "source" placeholder="Enter an origin" required/>
<input type="text" name = "dest" placeholder="Enter a Destination" required/><br>
<!-- Departure and Return Dates -->
Departure Date:
<input type="date" id="departure" name="ddate"
value="mm/dd/yyyy" min="2000-01-01" max="2050-01-01" required>
<div id="toggle">Return Date:
<input type="date" id="return" name="rdate"
value="mm/dd/yyyy" min="2000-01-01" max="2050-01-01">
</div>
<!-- Submit Button -->
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
What it looks like
What I want it to look like
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form action="/post" method="POST">
<!-- Radio Buttons -->
<input type="radio" onchange="tripCheck()" name="oneround" id="round" checked>Round Trip
<input type="radio" onchange="tripCheck()" name="oneround" id="oneway">One Way<br>
<!-- Source and Destination Locations -->
<input type="text" name="source" placeholder="Enter an origin" required/>
<input type="text" name="dest" placeholder="Enter a Destination" required/><br>
<!-- Departure and Return Dates -->
Departure Date:
<input type="date" id="departure" name="ddate" value="mm/dd/yyyy" min="2000-01-01" max="2050-01-01" required>
<div id="toggle">Return Date:
<input type="date" id="return" name="rdate" value="mm/dd/yyyy" min="2000-01-01" max="2050-01-01">
</div>
<!-- Submit Button -->
<br>
<input type="submit" value="Submit">
</form>
<script>
function tripCheck() {
if (!document.getElementById('round').checked) {
document.getElementById('toggle').style.display = 'none';
} else {
document.getElementById('toggle').style.display = 'block';
}
}
</script>
</body>
</html>
You have one error on the above code.
Your function doesn't have the closing bracket. If you want to view javascript error you can right click and go to inspect or simply press f12 and go to console menu.
Try entering this, a function Travel_Control
<script>
function Travel_Control() {
if (!document.getElementById('round').checked) {
document.getElementById('toggle').style.display = 'none';
} else {
document.getElementById('toggle').style.display = 'block';
} }
</script>
In your code one closing bracket is missing in function tripCheck(). and you need to revert the condition in if(!condition) statement. you can replace below function in your code and it will work as expected.
function tripCheck()
{
if (!document.getElementById('round').checked)
{
document.getElementById('toggle').style.display = 'none';
} else
{
document.getElementById('toggle').style.display = 'block';
}
}
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"];
?>
I want to set different values of button under different situations. The modal display style is "none" at first. I try to use $("#submitform").value ="Add Event"; however, it doesn't work. When the modal pops up, the button value is still empty.
var btn = document.getElementById("myBtn");
btn.onclick = function() {
$("#submitform").value ="Add Event";
modal.style.display = "block";
};
<div id = "myModal" class = "modal">
<form name="addEvtForm" class="addEvtForm" >
title:<input type="text" name="title" id="title" autocomplete="title"><br>
<input type="button" value="" id="submitform">
</form>
</div>
First, you didn't add jQuery to the html, so the .value didn't work.
Second, there was invalid syntax for your code.
I fixed it up:
$("#submitform").click(function() {
$('#submitform').val('Add Event');
$(".modal").css("display", "block");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id = "myModal" class = "modal">
<form name="addEvtForm" class="addEvtForm" >
title:<input type="text" name="title" id="title" autocomplete="title"><br>
<input type="button" value="" id="submitform">
</form>
</div>
This should work.
try :
$('#submitform').val('Add Event');
or:
document.getElementById("submitform").value = "Add Event";
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.
I know, there are a ton of questions on stack about required. I have tried many options with no result.
<script>
// Javascript function called by "submit" button handler,
// to show results.
function updateOutput(resultHtml) {
toggle_visibility('inProgress');
var outputDiv = document.getElementById('output');
outputDiv.innerHTML = resultHtml;
}
// From blog.movalog.com/a/javascript-toggle-visibility/
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>
<div id="formDiv" >
<!-- Form div will be hidden after form submission -->
<form id="myForm" >
name : <input name="name" type="text" required /> <br/>
Eadres: <input name="email" type="text" required /><br/>
<input type="submit" value="Submit"
onclick="toggle_visibility('formDiv'); toggle_visibility('inProgress');
google.script.run
.withSuccessHandler(updateOutput)
.processForm(this.parentNode)" />
</form>
</div>
<div id="inProgress" style="display: none;">
<!-- Progress starts hidden, but will be shown after form submission. -->
Balabla
</div>
<div id="output">
<!-- Blank div will be filled with "Thanks.html" after form submission. -->
</div>
When I use submitform() like this
<input type="submit" value="Submit"
onclick="toggle_visibility('formDiv'); toggle_visibility('inProgress');submitform();
google.script.run
.withSuccessHandler(updateOutput)
.processForm(this.parentNode)" />
this part is not running properly
Way is required not working? And is there solution.
Thank you
Don't use an onclick handler on your submit button. Use an onsubmit handler on your form tag.
The onclick handler won't get fired anyway if I use enter to submit the form.
Browsers won't fire onsubmit if the form isn't validated according to it's input validation attributes (like required), and the form isn't marked novalidate.