• Wednesday , 29 January 2020

JavaScript Tutorial For Beginners #43 – Accessing Form Elements

Code Canyon



Yo ninjas, in this JavaScript tutorial I’ll show you how to access form elements and work with their properties and methods in JavaScript. In particular, we’ll look at the onblur and andfocus method in this tutorial.

SUBSCRIBE TO CHANNEL – https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1

========== JavaScript for Beginners Playlist ==========

========== CSS for Beginners Playlist ==========

========== HTML for Beginners Playlist ==========

========== The Net Ninja ============

For more front-end development tutorials & to black-belt your coding skills, head over to – https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk

========== Social Links ==========

Twitter – @TheNetNinja – https://twitter.com/thenetninjauk

Original source

3d Ocean

Related Posts

8 Comments

  1. Kesavan mma
    December 12, 2019 at 07:43

    In js, when I do the following:

    // var email=document.getElementById('email').value;

    // var psw=document.getElementById('psw').value;

    var myForm=document.forms.frm;

    var email=myForm.email.value;

    var psw=myForm.psw.value;

    variables email and psw are always empty strings in the browser console. I tried document.getElementById and accessing using tag name property as well. Nothing works. but document.getElementById('email').value,myForm.email.value;
    shows the entered value correctly. Please help me. I have a project to submit on May 2

    HTML
    <!DOCTYPE html>

    <html>

    <head>

    <title></title>

    </style>

    </head>

    <body>

    <form style="border:1px solid #ccc" name="frm">

    <div class="container">

    <h1>Sign Up</h1>

    <p>Please fill in this form to create an account.</p>

    <hr>

    <label for="email"><b>Email</b></label>

    <input type="text" placeholder="Enter Email" name="email" id="email" required>

    <label for="psw"><b>Password</b></label>

    <input type="password" placeholder="Enter Password" name="psw" id="psw" required>

    <div class="clearfix">

    <button type="reset" class="cancelbtn">Reset</button>

    <button type="submit" class="signupbtn" name="sub">Login</button>

    </div>

    </div>

    </form>

    <script type="text/javascript" src="login.js"></script>

    </body>

    </html>

    Javascript

    // var email=document.getElementById('email').value;

    // var psw=document.getElementById('psw').value;

    var myForm=document.forms.frm;

    var email=myForm.email.value;

    var psw=myForm.psw.value;

    var database=[

    {

    username:"mohit@gmail.com",

    password:"123"

    },

    {

    {

    username:"jack",

    password:"777"

    }

    ];

    function isUserValid(username,password){

    for (var i = 0; i <database.length; i++) {

    if(database[i].username==document.getElementById('email').value && document.getElementById('psw').value){

    return true;

    }

    }

    return false;

    }

    function signIn(username,password){

    // e.preventDefault();

    if(isUserValid(username,password))

    alert('Login Successful');

    else

    alert('Please enter valid credentials');

    }

    myForm.sub.onclick=function(){

    if(isUserValid(username,password))

    alert('Login Successful');

    else

    alert('Please enter valid credentials');

    }

  2. Yifah Porat
    December 12, 2019 at 07:43

    How can I get rid of the blue border so only the pink border will show?

  3. Koivinen
    December 12, 2019 at 07:43

    3:42 "A thick pink border, eh? Let's do that and make it nice and manly."

  4. basavaraj k
    December 12, 2019 at 07:43

    Thanks good tutorials

  5. Arafat Ahmed
    December 12, 2019 at 07:43

    I have multiple text field, like email , username, password, in form. now I want to change their border color on focus. should I write different function for all of them?

    var myForm = document.forms.test;
    myForm.username.style.outline = "none";
    myForm.username.style.border = "1px solid blue";
    myForm.username.onfocus = function()
    {
     myForm.username.style.background = "lightblue";
    };myForm.username.onblur = function()
    {
        myForm.username.style.background = "none";
    };myForm.email.style.outline = "none";
    myForm.email.style.border = "1px solid blue";
    myForm.email.onfocus = function()
    {
     myForm.email.style.background = "lightblue";
    };myForm.email.onblur = function()
    {
        myForm.email.style.background = "none";
    };myForm.password.style.outline = "none";
    myForm.password.style.border = "1px solid blue";
    myForm.password.onfocus = function()
    {
     myForm.password.style.background = "lightblue";
    };myForm.password.onblur = function()
    {
        myForm.password.style.background = "none";
    };myForm.password_confirm.style.outline = "none";
    myForm.password_confirm.style.border = "1px solid blue";
    myForm.password_confirm.onfocus = function()
    {
     myForm.password_confirm.style.background = "lightblue";
    };myForm.password_confirm.onblur = function()
    {
        myForm.password_confirm.style.background = "none";
    };

  6. Dipesh Budhiraja
    December 12, 2019 at 07:43

    Thanks a lot brother for these really helpful tutorials. Keep making them 😀

  7. Budi Haryono
    December 12, 2019 at 07:43

    Hey ninja, how old are you?

  8. Денис Довженко
    December 12, 2019 at 07:43

    Thanks, now i understand onblur event.

Leave A Comment

You must be logged in to post a comment.