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:
Last Updated:
Posted by:
Total Views to date: 10310

3 Comments

- 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 ???

- 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.

- tiara

verry good

Recent Comments

Vijay 5/25/2015 2:12 PM
In response to How To Send Email In ASP.NET MVC
Thanks...

RR 5/25/2015 8:58 AM
In response to Web Pages - Efficient Paging Without The WebGrid
@MIke.. is it possible to combine pagination and filter (change category ) in the script? Thanks...

Irfan Khan 5/25/2015 6:19 AM
In response to Highlighting Keywords Found In Search Results
This is truely helpful. Thank you for the brilliant tip....

Manoj Kulkarni 5/25/2015 4:46 AM
In response to Custom TagHelpers in ASP.NET MVC 6
Thank you for nice article. Really helpful....

Sean 5/21/2015 4:20 AM
In response to ASP.NET MVC 5 with EF 6 - Working With Files
Thank you for the tutorial. Saving to the database works, but the save FilePath is not working. It...

KrASh 5/19/2015 11:10 PM
In response to Adding Search
Hello Mike, I have a question about the second search. In one line it has a where with the title and...

KrASh 5/19/2015 11:04 PM
In response to Accessing Your Model's Data from a Controller
Thanks, I had some silly mistake, can't remember now what it was (had some personal problems last i...

Satyabrata Mohapatra 5/18/2015 4:29 PM
In response to Error Handling in ASP.NET Razor Web Pages
Great article. Learned a lot....

Corstian Boerman 5/13/2015 12:59 PM
In response to ASP.NET 5 Middleware, Or Where Has My HttpModule Gone?
It looks as if this technique doesn't work anymore. (As of the VS 2015 RC release) When adding it...

Alvin 5/12/2015 1:20 PM
In response to Razor Web Pages E-Commerce - Adding A Shopping Cart To The Bakery Template Site
Maybe ability to update quantity of the items once you are in the "Review Cart" step. Also, if on...