Javascript functions for form fields

4.14 (21 votes)

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: 10991

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

Jerrie Pelser 23/07/2016 05:08
In response to Loading ASP.NET Core MVC Views From A Database Or Other Location
Very cool concept Mike!...

Satyabrata 20/07/2016 20:54
In response to ASP.NET Web Pages vNext or Razor Pages
Thanks for sharing ...

infocyde 18/07/2016 00:40
In response to ASP.NET Web Pages vNext or Razor Pages
Curious to see if a new release of webmatrix will happen or if that is dead in the water....

Don 15/07/2016 16:58
In response to ASP.NET Web Pages vNext or Razor Pages
Thanks Mike! Wonder if the MVC Lite is the Controllerless Views approach referred to on the Web Dev...

Jose Negro 30/06/2016 16:02
In response to Entity Framework Code First and Stored Procedures
Thank you very much for so clear examples....

A. Truong 29/06/2016 15:25
In response to The Best Way To Import Data From Excel To SQL Server via ASP.NET
Awesome work! Lifesaver....

satyabrata 19/06/2016 18:53
In response to Entity Framework Code First and Stored Procedures
Nice article. Thanks. The menu on this website not working in mobile....

satyabrata 16/05/2016 06:28
In response to Implementing SQL Server Full-Text Search In An ASP.NET MVC Web Application With Entity Framework
This is great. Thanks for sharing....

sharey 06/05/2016 13:15
In response to The Best Way To Import Data From Excel To SQL Server via ASP.NET
nice work gentleman.Really helpfull....

Satyabrata Mohapatra 20/04/2016 04:36
In response to The Best Way To Import Data From Excel To SQL Server via ASP.NET
Another beauty !!!! Thanks for sharing....