PDA

View Full Version : Readonly field password protection


Kal
05-15-2008, 01:38 PM
Hi guys,

I have a simple text field with a price value which is set to readonly by default. Is it possible to have a button of some kind next to the text field which brings up a password box. By entering the correct password the price can be overridden.

Any help would be great.

Philip M
05-15-2008, 02:40 PM
<p> PRICE:- <input type = "text" name = "price" id = price" value = "123" size = "5" readonly = "readonly"></p>
<input type ="button" name = "but1" id = "but1" value = "Click To Enable Edit Price Field" onclick = "overRide()">

<script type = "text/javascript">
function overRide() {
var pass = prompt ("Enter the password here","");
if (pass == "abcd") {
document.getElementById("price").readOnly = false;
}
else {alert ("Wrong password!")}
}
</script>

This is completely insecure as the password is visible to any user with "View Source".

Acquaintance,n. A person we know well enough to borrow from, but not well enough to lend to. Ambrose Bierce 1842-1913. The Devil's Dictionary

Kal
05-15-2008, 03:51 PM
Thats great.

Is it possible to hide the password being entered in the prompt box?

Philip M
05-15-2008, 04:24 PM
Thats great.

Is it possible to hide the password being entered in the prompt box?

No. You need a different approach for that:-

<p> PRICE:- <input type = "text" name = "price" id = price" value = "123" size = "5" readonly = "readonly">
Enter password to enable edit price field <input type = "password" name = "pwd" id = "pwd" size = "10" onblur = "overRide()"></p>

<script type = "text/javascript">
function overRide() {
if (document.getElementById("pwd").value == "abcd") {
document.getElementById("price").readOnly = false;
}
else {
alert ("Wrong password!");
}
}
</script>

You can marginally improve the security by storing the password in an external Javascipt file:-

<SCRIPT type = "text/javascript" src="password.js"></SCRIPT>

This file contains nothing but:-

var correctPwd = "abcd"

and then alter the above script to:-

if (document.getElementById("pwd").value == correctPwd) {

Kal
05-16-2008, 10:39 AM
I have made a few modifications, but struggling on something. I have got it so I have default text in the password field, When you click in the field it changes from a text field to a password field which incorporates the function kindly added by Philip M. How can I now have it so that once the user has entered a price and focuses on another field the password field changes back to the text field so that the price cannot be changed
?



<script language="javascript">

function changeBox()
{
document.getElementById('div1').style.display='none';
document.getElementById('div2').style.display='';
document.getElementById('password').focus();
}

function restoreBox()
{
if(document.getElementById('password').value=='')
{
document.getElementById('div1').style.display='';
document.getElementById('div2').style.display='none';
}

if (document.getElementById("password").value == correctPwd)
{
document.getElementById("c_new_line_charge").readOnly = false;
}
else
{
alert ("Wrong password!");
}
}

</script>

<input type="text" name="c_new_line_charge" id="c_new_line_charge" value="19.99" readonly="readonly">

<div id="div1">&nbsp;&nbsp;&nbsp;<input name="pass_temp" type="text" value="Override Password Here!" onfocus="changeBox()"></div>

<div id="div2" style="display:none">&nbsp;&nbsp;&nbsp;<input name="password" id="password" type="password" value="" onBlur="restoreBox()"></div>

Philip M
05-16-2008, 11:14 AM
function RObox() {
document.getElementById("c_new_line_charge").readOnly = true;
}

</script>

<input type="text" name="c_new_line_charge" id="c_new_line_charge" value="19.99" readonly="readonly" onblur = "RObox()">


Quizmaster: What three-letter word means "at this moment"?
Contestant: Then.

Kal
05-16-2008, 11:55 AM
Thank you very much for all your help. Works perfectly.

A1ien51
05-16-2008, 03:10 PM
As stated before this is NOT SECURE. I hope this is not a public site.

Eric