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.

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

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

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

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

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

Рекомендации по теме

Комментарии

Thanks, now i understand onblur event.

fabrizio_pisani

In js, when I do the following:

// var
// var

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
<input type="text" placeholder="Enter Email" name="email" id="email" required>

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

<div class="clearfix">
<button type="reset"
<button type="submit" class="signupbtn" name="sub">Login</button>
</div>
</div>
</form>
<script type="text/javascript" src="login.js"></script>
</body>
</html>

Javascript

// var
// var

var myForm=document.forms.frm;
var email=myForm.email.value;
var psw=myForm.psw.value;
var database=[

{
password:"123"
},
{
{
username:"jack",
password:"777"
}

];
function isUserValid(username, password){
for (var i = 0; i <database.length; i++) {
&&

return true;
}

}
return false;

}
function signIn(username, password){
// e.preventDefault();
if(isUserValid(username, password))
alert('Login Successful');
else
alert('Please enter valid credentials');
}

if(isUserValid(username, password))
alert('Login Successful');
else
alert('Please enter valid credentials');
}

kesavanmma

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

dipeshbudhiraja

What's the best way to undo the pink border with onblur?
setting it to "none" erases any style it had previously.
Would you save the previous style to a variable and reload that, or is there some "back to page default" option built in?

omikronweapon

I've tried to search for this answer, but I'm confused as to what the rules are concerning using properties on variables and why we need to create variables storing some of the DOM logic in order to use the properties.

jordanvanderkris

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

QueenRachel

Why you didn't try for onclick method instead of onfocus ?

vedantbothikar

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()
{
= "lightblue";
};myForm.username.onblur = function()
{
    = "none";
};myForm.email.style.outline = "none";
myForm.email.style.border = "1px solid blue";
myForm.email.onfocus = function()
{
= "lightblue";
};myForm.email.onblur = function()
{
    myForm.email.style.background = "none";
= "none";
myForm.password.style.border = "1px solid blue";
myForm.password.onfocus = function()
{
= "lightblue";
};myForm.password.onblur = function()
{
    = "none";
= "none";
= "1px solid blue";
= function()
{
= "lightblue";
= function()
{
    = "none";
};

arafatahmed

the white screen is not good for the eyes please change it if you can.

brokenhillgorillaz

White background and no zoom terrible combo for the eyes.

cloudguru

Can you plz provide Pastebin for the codes, it's time-consuming to have to type down all the html and css?

gamerbeast

JavaScript Tutorial For Beginners #43 - Accessing Form Elements

JavaScript Tutorial For Beginners #43 - Accessing Form Elements

JavaScript Tutorial for Beginners - 43 - Form Validation Part 1

JavaScript Tutorial 43 - this keyword in JavaScript | Programming For Beginners

JavaScript for Beginners #43 Introduction to Objects in JavaScript

43. DOM Events | Javascript tutorial for beginners | Javascript full course

Tutorial JavaScript for beginners #43 Coding Conventions # M Tutorial

43. DOM Manipulation | JavaScript Tutorial for Beginners | Web Development

Object Maps in JavaScript - Part- 16 || JavaScript tutorial for Beginners || Tutorial - 43

Build and Deploy a Modern Cafe Website with HTML, CSS and JavaScript

JAVASCRIPT BASICS TUTORIAL! - CS50 on Twitch, EP. 43

HTML Insertion Methods | JavaScript Tutorial in Hindi #43

43. Introduction to Objects in JAvaScript | Learn JavaScript for beginners |

43 - ( JavaScript Tutorial ) Array Methods: concat , isArray

Learn JavaScript - Full Course for Beginners

🚀JavaScript Tutorial: Data Types in JavaScript | Web Development Full Course | #43

Async/Await in Javascript | JavaScript Tutorial In Hindi #43

Center Radial Gradient Colors | Canvas API Javascript Tutorial For Beginners Part 43

#43 What is JS Destructuring? | JavaScript Full Tutorial

43 document.getElementById() - Javascript Tutorial 2018

43rd Javascript Project - Text to Speech API Tutorial for beginners with Source Code

An Introduction to JavaScript - Course for Beginners

JavaScript Tutorial in Hindi for Beginners [Part 43] - Traversing elements in JavaScript

43 Mastering Divide and Conquer Algorithms: Binary Search Explained | JavaScript Tutorial

JavaScript tutorial 43 - method some