WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You


You are not connected. Please login or register

View previous topic View next topic Go down  Message [Page 1 of 1]

1 Javascript - Accessing forms on Thu May 24, 2012 12:24 am

Mr.Joker

avatar
Mr. WebArtz
Mr. WebArtz
Hi there WebArtz members. I am Mr.Joker and in this tutorial I will explain you how to access HTML forms with javascript. Isnt that just cool? Ok, here is a basic code:

Code:
<html>
<head>
<title>Javascript - Forms</title>
<script type="text/javascript">
function test() {
var userName = document.forms[0].elements[0].value;
alert("Your name is " + userName)
}
</script>
</head>
<body>
<form>
<span>Enter Username</span><br />
<input type="text" />
<input type="button" value="Click me" onClick="test();"/>
</form>
</body>
</html>

Its simple to understand. All you need to know is HTML and I will explain you Javascript part. We have text field where we can enter some value. I add text "Enter Username" so a user can enter a username. When he does that he can click on button and something should happend. But button won't do a thing if you dont tell him what to do. So I added event onClick="test()" where test() present function i will make. After function always add semi-culon (Wink . So, lets go to javascript part. I have test function. You can see variable inside it called userName and its equal to :
Code:
document.forms[0].elements[0].value;
Thats default way to access value from textbox. Forms have index 0 because we only have one form and its first form thats why its zero(computer count from zero). After that we have elements with index zero because I got only one element inside form which is textbox. And its first of elements. In the end I set .value which mean I want a value from that element. It can be something else but I need value. Now I can do what I want with that value, and for most simple example I added alert popup box to display : "Your name is " + variable value.

But, I sugest you to learn on this way accessing forms and elements:


Code:
<html>
<head>
<title>Javascript - Forms</title>
<script type="text/javascript">
function test() {
var userName = document.Form1.Element1.value;
alert("Your name is " + userName)
}
</script>
</head>
<body>
<form name="Form1">
<span>Enter Username</span><br />
<input type="text" name="Element1"/>
<input type="button" value="Click me" onClick="test()"/>
</form>
</body>
</html>

What is different here? Well I added to form a name attribute. I called it Form1, and also added attribute to element while calling it Element1. Then I changed this:


Code:
var userName = document.forms[0].elements[0].value;
To this:
Code:
var userName = document.Form1.Element1.value;

Insted of typeing forms[index] i type form name, and insted typing elements[index] i type Element1 which is name I add.

If you have any question ask me Very Happy



Last edited by Mr.Joker on Thu May 24, 2012 12:58 am; edited 1 time in total

2 Re: Javascript - Accessing forms on Thu May 24, 2012 12:56 am

RSguideMaker

avatar
Registered Member
Registered Member
Tutorial Accepted

xD good tutorial though.

3 Re: Javascript - Accessing forms on Thu May 24, 2012 12:57 am

Mr.Joker

avatar
Mr. WebArtz
Mr. WebArtz
RSguideMaker you are not in team to say that xD .

4 Re: Javascript - Accessing forms on Thu May 24, 2012 2:17 am

RSguideMaker

avatar
Registered Member
Registered Member
I know. I am not eligible to say that it is accepted but it IS a good tutorial.

5 Re: Javascript - Accessing forms on Thu May 24, 2012 2:59 am

Mr.Joker

avatar
Mr. WebArtz
Mr. WebArtz
Yea, I know Very Happy .

Sponsored content


View previous topic View next topic Back to top  Message [Page 1 of 1]

Permissions in this forum:
You cannot reply to topics in this forum