Javascript functions for form fields

A number of useful functions for accessing various properties and values of form fields.

Getting the selected index and value from a select list

function getValues(){
var dd = document.getElementById('dropdown');
theindex = dd.options[dd.selectedIndex].value;
thevalue = dd.options[dd.selectedIndex].text;
var span = document.getElementById('span1');
span.innerHTML = '  Selected Index: ' + theindex + 
	', Selected Value: ' + thevalue
}

Detect which checkbox was ticked or unticked, and an array of selected values

function getchk(val){
var output = 'You clicked ' + val + ' Selected: ';
for(var i = 0; i < document.forms[0].check.length; i++){
	if(document.forms[0].check[i].checked)
	output += document.forms[0].check[i].value + ' ';
	}
document.getElementById('span2').innerHTML = output;
}

1
2
3
4

Get the text and number of characters from a text box

function getText(){
var txt = document.getElementById('txt');
var output = txt.value;
var length = output.length;
document.getElementById('span3').innerHTML = 'Count: ' + length
	+ ' Text: ' + output;
}

Date Posted: Saturday, May 12, 2007 10:54 PM
Last Updated:
Posted by: Mikesdotnetting
Total Views to date: 9330

3 Comments

Monday, August 5, 2013 7:53 PM - Deep

I have a form which ask for YEAR. How can I restrict user to only allow to input numbers.

I have put a validation which doesn't allow non-numeric but it is tested after the form is POSTed.

Any suggestion for suppressing the non-numeric keys in "NUMERIC-ONLY" text box ???

Thursday, August 8, 2013 7:39 AM - Mike

You should use a Javascript library like jQuery's Validate plug in to manage that kind of thing in the browser. In fact, this whole article is pretty obsolete because jQuery makes the tasks outlined above much easier.

Thursday, December 12, 2013 10:54 PM - tiara

verry good
Add your comment

If you have any comments to make about this article, please use this form to do so. Make sure that your comment relates specifically to the article above. More general comments can be posted through the form on the Contact page.

Please note, all comments are moderated, and some may not be published. The kind of things that will ensure your comment is deleted without ever seeing the light of day are as follows:

  • Not relevant to the article
  • Gratuitous links to your own site or product
  • Anything abusive or libellous
  • Spam
  • Anything in a language I don't understand including gibberish.

I do not pass email addresses on to spammers, so a valid one will assist me in responding to you personally if required.

Recent Comments

Allen Michaels 12/17/2014 4:37 PM
In response to Cascading DropDownLists with jQuery and ASP.NET
Fantastic thank you so much!...

Emily 12/17/2014 12:36 PM
In response to Parameterized IN clauses with ADO.NET and LINQ
Thanks, very helpful!!!! Can i use this for multiple in's ????? IN (.....) and IN(...) and IN...

sss 12/16/2014 3:06 PM
In response to Solving the Operation Must Use An Updateable Query error
good...

Gjuro 12/15/2014 10:30 PM
In response to Examining the Edit Methods and Edit View
You have one fromr (and it should be from, I suppose). :-)...

Gjuro 12/15/2014 10:27 PM
In response to Adding Search
Hi, thnx for all this C#->VB translations. Yet, the following code block is (slightly) in error it a...

Scot 12/14/2014 1:39 PM
In response to Entity Framework 6 Recipe - Alphabetical Paging In ASP.NET MVC
Thanks,Mike I found solution....

Gjuro 12/13/2014 10:52 PM
In response to Accessing Your Model's Data from a Controller
The article mentions "Creating an Entity Framework Data Model for an ASP.NET MVC Application" (at is...

Samuel 12/13/2014 8:40 AM
In response to Displaying The First n Characters Of Text
I have failed to use the extension because it throws an error that it doesn't recognise the chop be...

Ignas 12/12/2014 5:11 PM
In response to Cleaner Conditional HTML Attributes In Razor Web Pages
Any suggestions for Html Helper elements with HtmlAttributes, when you need to conditionally set it...

Gautam 12/11/2014 8:50 PM
In response to Validation In Razor Web Pages 2
Hi Mike Is this required for V3, non html helper input...