Go Around The Tech Corner…

JS Tip 2: How to collect data from forms

Posted on: October 27, 2009


On my previous post about how to display alert messages, you’ll see that the messages are specified in quotes within the script. What if you wanted to display user-generated data on the alerts which pop up? How would you do that? You have to first display a form through which you will collect some information. Then in your JavaScript function, you have to call the values you get from the form so that it picks up and displays what the user enters. Here’s a simple example:

<html>
<title>Displaying user data in the alert messages</title>
<head>
<script language = "JavaScript">
function displayalert()
{
alert('Welcome ' + document.FORM1.yourname.value + 
'! Your Age is ' + document.FORM1.yourage.value)
}
</script>
</head>
<body>
Please Enter Your Name & Age in the textboxes Below, 
Then Click on 'Submit'...<p>
<form name = "FORM1">
Your Name: <input type="Text" Name="yourname"><p>
Your Age: &nbsp;&nbsp;<input Name="yourage"><p>
<input type="button" value="Submit" onClick="displayalert()"><p>
<input type="reset" value="Refresh">
</form>
</body>
</html>
 

The form [FORM1] collects the user’s name and age, and the JavaScript function displayalert() uses the document.FORM1.yourname.value to pick that value, which will be displayed in the alert. Notice that the JavaScript function to display the alert is being called from the Submit onClick property.

I hope this tutorial has been explained well, do leave comments on your opinions or if you think I should change something. Happy Programming!

–          Millie

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Me – The author of this blog!


This is my tech blog. I got another blog, full of jokes that will crack u up! http://humoraddict.blogspot.com

Follow milliepatel84 on Twitter

Tweet Tweet…!!!!

Blog Stats

  • 43,752 hits

Top Clicks

  • None

Flickr Photos

%d bloggers like this: