JQuery Tutorial #2 : Hide and Show Password in JQuery

faad (58)in #utopian-io • 8 years ago (edited)

What Will I Learn?

Today we come up with another jquery tutorial, in this tutorial you'll learn how to hide and show password field in JQuery.

Hide and show password
Get Check Boxes in JQuery
Change HTML attributes with JQuery

Requirements

Write here a bullet list of the requirements for the user in order to follow this tutorial.

Basics of Programming
Basics of HTML

Difficulty

Basic

Tutorial Contents

Create necessary files
Setting JQuery Environment
Code HTML
Code JQuery

Create necessary files

Open up your text editor and create a file with name hideshowpass.html and save in your computer. And write the necessary HTML code

<!doctype html>
<html>
    <head>
        <title>Hide &  Show Password in JQuery</title>
    </head>
    <body>
        
    </body>
</html>

Setting JQuery Environment

To use Jquery you've to link it with your file, We've already discussed in our previous tutorial how to link jquery with your file. Here again, you just have to put the following code in your <head> tag.

<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>

Code HTML

Now write the HTML code for your password field and checkbox field you want to work with. You've to write the code in the <body> tag

<input type="password" name="password" id="pass">
 <input type="checkbox" name="showPass" id="showPass"> Show password

Output

Code JQuery

Now we'll write the jquery code to hide and show the password, first write the jqery code to initiate it.

<script language="javascript">
            $(document).ready(function(){
                
            });
        </script>

After writing this write get the checkbox element in Jquery, while you click on the checkbox the password show you.

$("#showPass").click(function(){

                    
                });

When you click on the checkbox the code withing its body will run. So, now we just only have to work with our password field

When you click on the checkbox the checkbox will be checked, if the checkbox is checked the password will be shown.

For this you just have to change the attribute of the password field type="password" to type="text" as we did below

if($(this).is(':checked')){
                        $("#pass").attr("type", "text");
                    }

output

and otherwise remain the type="password"

else {
                        $("#pass").attr("type", "password");
                    }

Output

The complete Code

<!doctype html>
<html>
    <head>
        <title>Hide &  Show Password in JQuery</title>
        <script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
    </head>
    <body>
        <input type="password" name="password" id="pass">
        <input type="checkbox" name="showPass" id="showPass"> Show password

        <script language="javascript">
            $(document).ready(function(){
                $("#showPass").click(function(){

                    if($(this).is(':checked')){
                        $("#pass").attr("type", "text");
                    }else {
                        $("#pass").attr("type", "password");
                    }
                });
            });
        </script>
    </body>
</html>

Curriculum

JQuery Tutorial #1: How to develop a Progress Bar in JQuery

Posted on Utopian.io - Rewarding Open Source Contributors

#jquery #tutorials

8 years ago in #utopian-io by faad (58)

$0.00

Sort:

Trending

[-]

roj (61) 8 years ago

Your contribution cannot be approved because it is not as informative as other contributions. See the Utopian Rules. Contributions need to be informative and descriptive in order to help readers and developers understand them.

Since you needed help about why are you getting rejected over and over again, I will clarify what kind of tutorials we expect in the category.
Firstly, the tutorial is too simple, and "tutorial" part of the contribution doesn't actually teach enough about the properties of jQuery.
Topics you covered might be important but we judge the tutorial prepared by you, not the actual library or the function.
In the category, we expect high quality tutorials which teach about technical aspects of open source projects. That means, you should really "teach" some stuff.
Tutorials only explaining how to use a function of a library is not considered as teaching. It may be an important concept for tutorials from another website, but in Utopian, we only reward high quality tutorials with detailed and unique explanations about technical subjects of open source projects.
You should think that, there are hundreds of simple functions can be explained in this way in only jQuery. If we approve this kind of tutorials, we should also approve thousand of tutorials which only shows some examples but doesn't really add value to the open source community. Consider that Utopian is here to reward high value efforts for open source community.
My suggestions is that, you should significantly increase quality in your tutorials contributions. Don't hesitate to spend more time to gather more qualified information or content. Make sure that your tutorials are really educational in many ways and they add high value content to the project.

You can contact us on Discord.
[utopian-moderator]

$0.32

1 vote

STEEM 0.05

TRX 0.32

JST 0.083

BTC 65049.86

ETH 1754.89

USDT 1.00

SBD 0.44