D4mations.com

JavaScript Tutorial For Beginners #43 – Accessing Form Elements



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

d4mer

, , , , , , ,

8 responses to “JavaScript Tutorial For Beginners #43 – Accessing Form Elements”

  1. 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');

    }

  5. 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";
    };

Leave a Reply