Input field with two value - javascript

I have two input fields as this:
input type="hidden" name="action" value="login">
input type="hidden" name="action" value="admin_login">
I have two separate login forms, which I want to become one
I've searched for the solution on internet and it seems that it is better to let in tho form the value of "login", so that normal users login using their credentials, and then do some javascript in the page translated as IF username === adminX then this. form value="admin_login".
Any help on how to accomplish this, I don't know much of javascript

Using java script you can do this by
<script>
function check_login() {
if (userType==admin){
Myform.value="admin_login";}
else{
Myform.value="user";
}
}
</script>
<input type="submit" onclick="check_login()">
I think the best way to do this by having single form for both user but now depend on server side how you handle it.like
if(userType==admin_login) {
//show admin permissions for result page
}
else{
hide all admin permissions and show only given permission for normal user for result page
}

later: done it like this, because next day the version from comment is not working anymore..boh
<form method="POST" action="index.php">
<input type="text" placeholder="Username" id="username" onBlur="myFunction()" name="username" value="">
<input type="password" placeholder="Password" name="password">
<button type="submit" name="action" id="log" value="login">SIGN UP</button>
</form>
and javascript:
<script type="text/javascript">
function myFunction(){
var username = document.getElementById("username").value;
if(username == 'admin'){
document.getElementById("log").value='admin_login';
}else{
document.getElementById("log").value='login';
}
}
</script>
Hope it helps someone in the future. Thank you!

Related

Submit button taking me to link that states HTTP ERROR 405. How do I prevent this, so i can allow it to work the way it is intended to?

I'm still learning, so if there's any help, or the answer is really trivial like something I need to put before hand, an explanation of the reason why this is happening would be greatly appreciated!
This has been a problem ever since I have started using it for weekend projects. Whenever I make a button, for example one that I have been trying to use is
<button type="submit" id="btn" onclick="validate()">login</button>
However, when I click on the button, instead of showing me what its supposed to show, it just states this on a gray page.
This page isn’t working
If the problem continues, contact the site owner.
HTTP ERROR 405
HTML
<div class="wrapper">
<form class="box" method="post">
<h3>login</h3>
<div class="username">
<input type="text" placeholder="enter username" id="username" name="usernmame" value="">
</div>
<div class="password">
<input type="password" placeholder="enter password" id="password"">
</div>
<button type="submit" id="btn" onclick="validate()">login</button>
</form>
</div>
JS
//I do understand that this is not a good way of setting up a username and password ,since anyone can easily get it. Ive been just doing this as a weekend project, i just want it to show an alert if it works or not
function validate(){
let username = document.getElementById('username');
value;
let password=document.getElementById('password');
value;
if(username =='please' && password == 'work')
{
alert('finally');
} else{
alert("NOOOO")
}
}
I have tried to see if it was a problem with my js, but nothing seems to change, so that is why im starting to suspect that it its the button thats causin the problem
Firstly its not
document.getElementById('password');
value;
its
document.getElementById('password').value;
Secondly, there is no action property present I'll suggest removing the entire form tags
<div class="wrapper">
<h3>login</h3>
<div class="username">
<input type="text" placeholder="enter username" id="username" name="usernmame" value="">
</div>
<div class="password">
<input type="password" placeholder="enter password" id="password"">
</div>
<button type=" submit" id="btn" onclick="validate()">login</button>
</div>
<script>
function validate() {
let username = document.getElementById('username').value;
let password = document.getElementById('password').value;
if (username == 'please' && password == 'work') {
alert('finally');
} else {
alert("NOOOO")
}
}
</script>
on your for, you are using attibute method="post" which has alternative of method="get" which being sent using URLs you are using method="post" which has a missing attribute action="/action_page.php" that will process you're page.
Like this
<form class="box" action="/action_page.php" method="post">
since you don't have action attribute, and has method="post", the post is being sent to the same page you are sending and without receiving it properly like in php.
$username = $_POST['username'];
If you still want to continue using javascript at test it, remove at post method, and remove the type="submit" on your button as it behaves on submitting if you just want to test using javascript.
Here is your final script.
HTML
<form class="box">
<h3>login</h3>
<div class="username">
<input type="text" placeholder="enter username" id="username" name="usernmame" value="">
</div>
<div class="password">
<input type="password" placeholder="enter password" id="password"">
</div>
<button id="btn" onclick="validate()">login</button>
</form>
</div>
JS
function validate(){
let username = document.getElementById('username').value;
let password=document.getElementById('password').value;
if(username =='please' && password == 'work')
{
alert('finally');
} else{
alert("NOOOO")
}
}

open website if "password" is exactly what is needed (github pages)

Sorry if this is a relatively basic question but I'm getting a little bit frustrated, and this is the first time I'm using GitHub Pages
What I want is:
Accept text in form
Compare text in form with password "pass"
if correct, go to a different html site
else, do nothing
thanks in advance
<!DOCTYPE html>
<html>
<head>
<title>Page</title>
</head>
<body>
<form onSubmit="checkPass(this)">
<label>Password:</label>
<input type="text" name="Password" id="pwd" size="20">
<input type="Submit" name="Submit">
</form>
<script>
function checkPass(passForm) {
var password = document.getElementById('pwd');
if (password == "pass"){
windows.open("Website extension here")
}
}
</script>
</body>
</html>
But anyone can view source and open the website right? Everything is right except you missed .value. Add a return false and make windows as window:
function checkPass() {
var password = document.getElementById('pwd').value;
if (password == "pass") {
window.open("https://example.com")
}
}
<form onSubmit="checkPass(); return false;">
<label>Password:</label>
<input type="text" name="Password" id="pwd" size="20">
<input type="Submit" name="Submit">
</form>
The above code will not work in sandbox. So try it using CodeSandbox Demo.

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.

Javascript form validation - PHP variable as VALUE - Invalid Input

I have an issue where I am validating form submission with javascript. The form is prefilled with results from the database as PHP values like this:
<form name="profiledit" action="profile_edited.php" method="POST" >
<h3>Name:</h3>
<input type="text" id="teamname" name="teamname"
value="<?php echo $result['teamname'];?>">
</form>
This is the javascript:
<script type="text/javascript">
function empty() {
tn = document.getElementById("teamname").value;
if (! /^[a-zA-Z0-9]+$/.test(tn)) {
alert("Please enter a valid Team Name");
return false;
}
}
</script>
The submit button is :
onClick="return empty();"
The problem is that is always tells me top "Please enter a valid Team Name" unless I retype the text in the box (that was supplied by the PHP value).
I cannot see any weird spaces or things in "view source".
What could the problem be?
Thanks.
EDIT1 : Sorry I forgot to paste closing brace. It was there in the code and this does work for BLANK forms OK. Just not when it has a prefilled value from PHP.
Try this
Check this link
Html
<form name="profiledit" action="" method="POST" id="profiledit">
<h3>Name:</h3>
<input type="text" id="teamname" name="teamname" value=""/>
<input type="button" id="submit" value="submit" name="submit" />
<input type="submit" id="submitform" value="submitform" name="submit" style="display:none;" />
</form>
Jquery
$('#submit').click(function(){
var pattern=/^[a-zA-Z0-9]*$/;
var tn = $("#teamname").val();
if(tn == "" && pattern.test(tn)){
alert('1');
}else {
//alert('2');
$('#submitform').trigger('click');
}
});
Hope its helps
Well, there was nothing wrong with the responses after all. My code was good and you guys code was good as well.
The problem?
Well I just happened to be testing with a teamname that had a SPACE in it!!!!!!!!!!
So having finally worked out that was the problem all along I would like to thank you all for your inputs.
I have used the regex instead : /^\w+( \w+)*$/
Allows words, numbers and a space.

How to make a certain pattern or algorithm when entering staff id in login form?

I am trying to make a login form with an input for Staff ID, Password, and submit. For say, software has a serial # that will only be accepted if it matches the pattern or format of the serial that is required for the software. How would I do that? I want it to have a thumbnail that will popup and tell you that is is not the proper format kind of like required does when you put in in the input tag. I want to also be able to possibly style the thumbnail as well, in order to make it match the UI of the site.
html form:
<section name="LoginSection" id="LoginSection" class="LoginSection">
<div name="LoginHeader" id="LoginHeader" class="LoginHeader">
<center><h3>Staff Login</h3></center>
</div>
<form name="LoginForm" id="LoginForm" class="LoginForm" action="">
<input type="text" placeholder="Staff Identification Number" name="StaffInput" id="StaffInput" class="StaffInput" required />
<input type="password" placeholder="Staff Login Password" name="StaffPass" id="StaffPass" class="StaffPass" required />
<center><input type="submit" value=" Submit " name="Submit" id="Submit" class="Submit" /></center>
</form>
</section>
try more on HTML5 thing:
<input type="tel" name="mobileno" pattern="[789][0-9]{9}" required title="Enter Mobileno in correct format"/>
Or if you want it using Javascript something like :
<script type="text/javascript">
function login()
{
if(document.loginFrm.mobileno.value.length==0 )
{
alert('Enter MobileNo please');
document.loginFrm.mobileno.focus()
}
//return false
}
</script>
i think you can get your imagination for combination some html css and php. or with bootstrap design ?
for example :
<?php
if(isset($_POST['submit'])){
if($_POST['name'] == NULL && $_POST['pass'] == NULL){
echo'<div class="login">
<span> It didn't work ! </span>
</div>';
}
}
hehe i always do that if i want to combine skill with css html and php :)
You can see my update answare with jquery :
$(document).ready(function(){
$('#button').click(function(){
if($('#txt-name').val() == '' && $('#txt-pwd').val() == ''){
alert('It didn't work');
}
});
});

Categories