Home1
Javascript - Accessing forms Thu May 24, 2012 12:24 am
Mr.Joker
Mr. WebArtz
Posts : 385
Points : 371
Age : 31
Location : Serbia
Browser :
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:
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 (
. So, lets go to javascript part. I have test function. You can see variable inside it called userName and its equal to :
But, I sugest you to learn on this way accessing forms and elements:
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:
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
- 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 (
. 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;
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;
- 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
Last edited by Mr.Joker on Thu May 24, 2012 12:58 am; edited 1 time in total
