CODEWITHSUNDEEP
phpjavascripthtmlformsinput
bonny
bonny

Reputation: 3247

input type password value?

hello i have a problem with the following issue:

i have two input fields. one is for the login username i.e. and the other one is the password. now i would like to set the value of both fields. my problem is the password. my intend to realize that is the following:

HTML:

<input 
type="text"
id="log_password" 
name="log_password" 
value="<?php echo ($log_password);?>" 
onfocus="if(this.value=='Password')this.value='';this.type='password'"
onblur="if(this.value=='') this.value=this.defaultValue;"/>

PHP: 

$log_password = "Password";

if(isset($_POST['submit'])){

    $log_password = $_POST['log_password'];

        if(empty($log_password)){
            $errors['log_password'][]="No password given";
            $_POST['log_password'] = "Password";
            $log_password = $_POST['log_password'];
    }       
}

the problem is that this works up to the point where the form will be submitted. in case of an error the password is visible again because of the type="text" tag. so how can i solve this, if there is someone who could help me out i really would appreciate. thanks a lot.

UPDATE:

<div class="small2"> 
<?php if (!isset($errors['log_password'])):?>
<input 
type="<?= $passwordVal == "" ? "text" : "password" ?>" 
id="log_password" name="log_password" 
value="<?php echo ($log_password);?>" 
placeholder="Passwort" 
onfocus="if(this.value=='Passwort')this.value=''" 
onblur="if(this.value=='') this.value=this.defaultValue;"/>
<?php endif;?>

<?php if (isset($errors['log_password'])):?>
<input class="log-err" 
type="<?= $passwordVal == "" ? "text" : "password" ?>" 
id="log_password" name="log_password" 
value="<?php echo ($log_password);?>" 
placeholder="Passwort" 
onfocus="if(this.value=='Passwort')this.value=''" 
onblur="if(this.value=='') this.value=this.defaultValue;"/>
<?php endif;?>
</div>

Upvotes: 1

Views: 15630

Answers (5)

deste
deste

Reputation: 550

As Matt correctly suggest, you can use placeholder tag.

But to get placeholder working, you cannot set "value". The solution is using conditional type, of course, or playing with jQuery framework. You can do something like this..

<?
    $your_pass = 'bla-bla-bla';
?>
<!DOCTYPE html>
<html>
    <head>
        <title>Test page</title>
        <!-- Load jQuery library from Google repository -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    </head>
    <body>
        <form action="#">
            <input type="password" name="log_password" id="log_password" />
        </form>
    </body>
    <script>

        $(document).ready(function() {
            /* execute this by jQuery when document is ready */

            /* must use traditional javascript to change input's type attribute */
            document.getElementById('log_password').setAttribute('type', 'text');

            /* set empty value attribute of input with id "log_password" */
            $('input#log_password').attr('val','');

            /* set placeholder attribute */
            $('input#log_password').attr('placeholder','Password');

            $('input#log_password').focus(function(){
                /* when input with id log_password is focus.. */
                $(this).attr('placeholder','');

                /* set the value as you prefer... */
                $(this).val('<?=$your_pass?>');

                /* reset type of input to password */
                document.getElementById('log_password').setAttribute('type', 'password');
            });
        });
    </script>
</html>

Upvotes: 2

Dru
Dru

Reputation: 556

how about a script on document ready to check if log_password value is password and change the type.

oh sorry dint see deste's post +1 for that

Upvotes: 0

Matt
Matt

Reputation: 7040

Use

<input type="password" placeholder="Password" ... />

If you MUST use this as a text field (in order to display "Password") you should make the input type conditional:

<?php
    // in case of error, the value that the user entered will be passed back via GET (POST?)
    $passwordVal = isset($_GET['log_password']) ? $_GET['log_password'] : "";
?>

<!-- if ($passwordVal) is an empty string, type is "text", else type is "password". -->
<input type="<?= $passwordVal == "" ? "text" : "password" ?>" ... />

Upvotes: 2

user1350140
user1350140

Reputation:

write the code you regarded as a function and then call it with loading the page, focus event and blur event. The solution of Matt is nice but I think it restricted to HTML5 Supported browsers.

Upvotes: 0

voodoo417
voodoo417

Reputation: 12101

I think , you need change type from 'text' to 'password' , if has errors

Upvotes: 0

Related Questions