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>

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>

• php
• javascript
• html
• forms
• input

• 2 Use a proper <label> element. Don't abuse the value attribute. – Quentin Commented Jul 30, 2012 at 18:50
• @Quentin I'd like to point out that <label> is not always necessary if placeholder attribute is used. It is, however, remended that each <input> have a <label> which corresponds to it. – Matt Commented Jul 30, 2012 at 18:52
• 3 @Matt — From the specification: The placeholder attribute should not be used as an alternative to a label. and The placeholder attribute represents a short hint (a word or short phrase) intended to aid the user with data entry. A hint could be a sample value or a brief description of the expected format. – Quentin Commented Jul 30, 2012 at 18:55
• @Quentin +1 for one-upping me. :-) – Matt Commented Jul 30, 2012 at 18:56

5 Answers 5

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./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>

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" ?>" ... />

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

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.

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