I have a form that displays a password field and when the form is posted I call a javascript function during the page's onload -- and when I retrieve the password field it never has the password I entered, it's empty. Is calling a javascript function from onload the wrong approach here if I'm trying access the contents of the posted form?
<!DOCTYPE html>
<html>
<script type="text/javascript">
function checkPwd()
{
// okay the form was posted and we got called from onload, now get the post'd password
var thePwd = document.getElementById("theUsersPassword").value;
alert("the var thePwd is: " + thePwd);
}
</script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Beta:</title>
</head>
<body onload="checkPwd()">
<form method="post" action="index.php">
Beta: <input id="theUsersPassword" name="usersPassword" type="password"><br/>
<input type="submit" value="Submit" />
</form>
</body>
</html>
I have a form that displays a password field and when the form is posted I call a javascript function during the page's onload -- and when I retrieve the password field it never has the password I entered, it's empty. Is calling a javascript function from onload the wrong approach here if I'm trying access the contents of the posted form?
<!DOCTYPE html>
<html>
<script type="text/javascript">
function checkPwd()
{
// okay the form was posted and we got called from onload, now get the post'd password
var thePwd = document.getElementById("theUsersPassword").value;
alert("the var thePwd is: " + thePwd);
}
</script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Beta:</title>
</head>
<body onload="checkPwd()">
<form method="post" action="index.php">
Beta: <input id="theUsersPassword" name="usersPassword" type="password"><br/>
<input type="submit" value="Submit" />
</form>
</body>
</html>
- Are you loading the same page when you submit the form? – emco Commented Nov 22, 2011 at 20:13
-
1
Why do you want to access and check an
input type="password"using JavaScript in first place? That puts doors open for security holes. Just submit the form to the server immediately and access it inindex.php. – BalusC Commented Nov 22, 2011 at 20:13 - onload will be called when the page loads and not when the form is submitted. – aziz punjani Commented Nov 22, 2011 at 20:14
- 1 @BalusC It can be relevant to read the password-input with JavaScript if you for instance want to make client side validation that the field isn't empty, prior to posting it to the server. – Christofer Eliasson Commented Nov 22, 2011 at 20:17
- @Chris: OP seems not to be interested in validation (or perhaps he is not actually understanding what he is doing). – BalusC Commented Nov 22, 2011 at 20:18
5 Answers
Reset to default 3I guess you don't want to check the input onload, you want to check it when the form submits right? Because at onload the user hasn't had the chance to enter anything yet.
If you want to do it onsubmit, just change your form tag to this:
<form method="post" action="index.php" onsubmit="checkPwd()">
That's because the element doesn't exist anymore. Javascript only runs on one page, so if you do
document.getElementById('passwordform');
it won't find it because there is no element with that ID. You could do it in javascript by storing the password in a cookie, or retrieving it via the LocalStorage api, but I'm not even going to show you how to do that, because it's unsafe.
Javascript is a client side language, so any code you write in it, is sent to the browser. This means that every user can view and manipulate your code.
You should do it with a server side language such as PHP.
In php, you can simply pare the value to the pasword you expect.
There are 2 ways to sent data from a form to the server: using the POST method, or using the GET method. The Get method is used for sending shorer pieces of information, and are appended to the url in the form of
example.?variable=value
This is not a good idea for information that needs to be secure, and since a url has a maximum length (different for different browsers), so when you send password information, you should use the POST method.
So, your login form could look like this
<form action='securedpage.php'>
<label>enter your password: <input type='password' name='pass'></label>
<input type='submit'>
</form>
Now, in securedpage.php, you could do something like this:
<?php
$expected_pass="!4mr00t";
if($_POST['pass']===$expected_pass){
//show your content
}els{
//show homepage
}
?>
You cannot access the POST data fields from JavaScript.
What you do is that you block the real form submission and get the data from the form.
form.onsubmit = function () { checkPwd(); return false; };
Or if you're trying to do some kind of a validation, you need to return a boolean value from checkPwd and do form.onsubmit = checkPwd
I could be wrong but isn't this normally done with PHP?
<?php
if (isset($_POST['variable'])) {
$first = $_POST['variable'];
echo $first;
}
?>
<form action="" method="POST">
<input type="password" name="variable" />
<input type="submit" />
</form>
This code would spit out a password entered into a form.
Try this:
<form method="post" action="index.php" onsubmit="return checkPwd()">
checkPwd() must return false to avoid the submission (If any problem) o true to perfom the action (If everythings is correct).