Make logon screen visible/invisible javascript - javascript

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";
};

Related

Output display stay longer on screen

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()">

Button not submitting when changing attribute

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"];
?>

Onsubmit does not call function

Trying to verify form input via a jQuery get request, but function does not get called.
Tried using just the jQuery (without function), the $.get works and returns proper values. I need the function approach to return false if (and stop form from submitting) if condition is not met.
<form onSubmit="return checkName();" action="/register" method="post">
<div class="form-group">
<input id="1" autocomplete="off" autofocus class="form-control" name="username" placeholder="Username" type="text">
</div>
<div class="form-group">
<input class="form-control" name="password" placeholder="Password" type="password">
</div>
<div class="form-group">
<input class="form-control" name="passconf" placeholder="Confirm password" type="password">
</div>
<button id="2" class="btn btn-primary" type="submit" value="submit">Register</button>
</form>
<script>
function checkName() {
$(document).ready(function () {
$("button").click(function () {
$.get("/check?username=" + document.getElementById('1').value, function (data, status) {
alert(data);
return false;
});
});
});
}
</script>
I expect the function to be called, return true if input verified (and go on with form submission) and false (stop form from submitting) if verification fails.
It isn't common practice to put events within the html anymore, as there is addEventListener. You can add it directly from the javascript:
document.querySelector('form').addEventListener('submit', checkName)
This allows for easier code to navigate, and makes it easier to read.
We can then prevent the form form doing it's default action by passing the first parameter to the function, and calling .preventDefault() as you can see from the modified function below. We no longer need to have return false because of it.
document.querySelector('form').addEventListener('submit', checkName)
function checkName(e) {
e.preventDefault()
$.get("/check?username=" + document.getElementById('1').value, function(data, status) {
alert(data);
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="/register" method="post">
<div class="form-group">
<input id="1" autocomplete="off" autofocus class="form-control" name="username" placeholder="Username" type="text">
</div>
<div class="form-group">
<input class="form-control" name="password" placeholder="Password" type="password">
</div>
<div class="form-group">
<input class="form-control" name="passconf" placeholder="Confirm password" type="password">
</div>
<button id="2" class="btn btn-primary" type="submit" value="submit">Register</button>
</form>
You're returning false from the async handler function. As such, that's not going to stop the form from being sent.
A better solution would be to always prevent the form from being submit then, based on the result of your AJAX request, submit it manually.
Also note that it's much better practice to assign unobtrusive event handlers. As you're using jQuery this is a trivial task. This also gets you access to the Event object which was raised by the form submission in order to cancel it. Try this:
<form action="/register" method="post" id="yourForm">
<div class="form-group">
<input id="1" autocomplete="off" autofocus class="form-control" name="username" placeholder="Username" type="text">
</div>
<div class="form-group">
<input class="form-control" name="password" placeholder="Password" type="password">
</div>
<div class="form-group">
<input class="form-control" name="passconf" placeholder="Confirm password" type="password">
</div>
<button id="2" class="btn btn-primary" type="submit" value="submit">Register</button>
</form>
$(document).ready(function() {
$("#yourForm").on('submit', function(e) {
e.preventDefault();
var _form = this;
$.get('/check', { username: $('#1').val() }, function(data, status) {
// interrogate result here and allow the form submission or show an error as required:
if (data.isValid) { // just an example property, change as needed
_form.submit();
} else {
alert("Invalid username");
}
});
});
});
You need to return from function not from inside the callback, and you do one if you assign to onsubmit you don't need click handler. And also click handler will not work if you have action on a form.
You need this:
function checkName() {
$.get("/check?username=" + document.getElementById('1').value, function(data, status){
alert(data);
});
return false;
}
this is base code, if you want to submit the form if data is false, no user in db then you need something like this (there is probably better way of doing this:
var valid = false;
function checkName() {
if (valid) { // if valid is true it mean that we submited second time
return;
}
$.get("/check?username=" + document.getElementById('1').value, function(data, status){
if (data) { // we check value (it need to be json/boolean, if it's
// string it will be true, even string "false")
valid = true;
$('form').submit(); // resubmit the form
}
});
return valid;
}
You can mark all your fields as required if they cannot be left blank.
For your function you may use the below format which works for me.
function checkName() {
var name = $("#1").val();
if ('check condition for name which should return true') {} else {
return false;
}
return true;
}
Just write the name of the function followed by (). no need to write return on onsubmit function call
function checkName()
{
$(document).ready(function(){
$("button").click(function(){
$.get("/check?username=" + document.getElementById('1').value, function(data, status){
alert(data);
return false;
});
});
});
}
<form onSubmit="checkName();" action="/register" method="post">
<div class="form-group">
<input id="1" autocomplete="off" autofocus class="form-control" name="username" placeholder="Username" type="text">
</div>
<div class="form-group">
<input class="form-control" name="password" placeholder="Password" type="password">
</div>
<div class="form-group">
<input class="form-control" name="passconf" placeholder="Confirm password" type="password">
</div>
<button id="2" class="btn btn-primary" type="submit" value="submit">Register</button>
</form>
I think if you replace button type from submit to button and then on button click event, inside get request, if your condition gets true, submit the form explicitly, would help you too achieve what you require.
You should remove the document.ready and the button event click.
EDITED
Adding an event parameter to checkName :
<form onSubmit="return checkName(event);" action="/register" method="post" id="myForm">
<div class="form-group">
<input id="1" autocomplete="off" autofocus class="form-control" name="username" placeholder="Username" type="text">
</div>
<div class="form-group">
<input class="form-control" name="password" placeholder="Password" type="password">
</div>
<div class="form-group">
<input class="form-control" name="passconf" placeholder="Confirm password" type="password">
</div>
<button id="2" class="btn btn-primary" type="submit" value="submit">Register</button>
</form>
<script>
function checkName(e){
e.preventDefault();
e.returnValue = false;
$.get("/check?username=" + document.getElementById('1').value,
function(data, status){
if(data) // here you check if the data is ok
document.getElementById('myForm').submit();
else
return false;
});}
</script>

Trying to Hide Javascript form

Ok I'm trying to auto login a guest account and it requires:
In header
<script language="JavaScript" type="text/JavaScript">
function guestLogin() {
document.form_login.username.value = 'guest';
document.form_login.password.value = 'guest';
document.form_login.submit();
}
</script>
And
<form action="https://www.redcheetah.com/WebPrefex/" method="post" name="form_login">
<input name="username" type="text" value="" />
<input name="password" type="password" value="" />
<input name="form_action" type="submit" value="Login" />
</form>
javascript:guestLogin();
How would I get the javascript:guestLogin(); to work without having the Login form on the page.
Any Tips?
Thanks
If you need the form to be on the page - if you can't create it on demand for whatever reason - then if you want guestLogin to work without the user seeing the form, you'll have to hide the form using CSS. It'll still be submittable, it just won't be visible:
function guestLogin() {
document.form_login.username.value = 'guest';
document.form_login.password.value = 'guest';
console.log('submitting');
document.form_login.submit();
}
document.querySelector('div').onclick = guestLogin;
form {
display: none;
}
<form action="https://www.redcheetah.com/WebPrefex/" method="post" name="form_login">
<input name="username" type="text" value="" />
<input name="password" type="password" value="" />
<input name="form_action" type="submit" value="Login" />
</form>
<div>click to submit</div>

Issue with javascript retrieve form data for url

I am kind of new to javascript however I have created a submit form that I want to redirect me to a url based on form input. Here is my current code...
The issue I'm running into however is that the form is sending me the initial value rather than the updated form value (It is using "whatevs" no matter what).
HTML
<form id="Search-Form" onClick="genURL()"><label>Value: </label>
<input type="text" id="search" placeholder="Enter Value"></input>
<div id="search-buttons">
<input id="searchSubmit" value="whatevs" type="submit" tabindex="1" />
</div>
</form>
Javascript
function genURL() {
var searchSubmit = document.getElementById("searchSubmit").value;
window.location = "randomsite/view" + searchSubmit;
}
Add return and use onsubmit:
<form id="Search-Form" onsubmit="return genURL()"><label>Value: </label>
<input type="text" id="search" placeholder="Enter Value"></input>
<div id="search-buttons">
<input id="searchSubmit" value="whatevs" type="submit" tabindex="1" />
</div>
</form>
Revise function like so:
function genURL()
{
location.href = "randomsite/view" + document.getElementById("search").value;
return false;
}
If you were to use onclick, it would go on the button, not the form.

Categories