'Auto-tabbing' to next TextBox with asp.net and Javascript

If you have a form that limits characters entered into a textfield, using this simple approach you can automatically jump to the next control, making it easy for your user

Say you have a zip code field that takes in 5 numbers, next you have a state dropdown.  Your user should be able to type in the 5 digit zip code, then boom, the focus is automatically shifts to the dropdown.  It is very simple to implement.  It just requires the following JS function:

 

function next(currentControl, maxLength, nextControl)
   {
    if(document.getElementById(currentControl).value.length >= maxLength)
    document.getElementById(nextControl).focus();
  }

 

and then just call this from a textbox in html:

<input id="Text1" onkeyup="next('Text1', '5', 'Text2')" type="text" />

Or if you are using an asp.net TextBox control:

txt1.Attributes.Add("onkeyup", "next('txt1','5','txt2')");

it's just that easy... here is an example using both asp.net and just html:



HTML/JavaScript Dropdown List Redirect

Recently on a forum the question was asked how to redirect using a dropdown and not using any server side scripting - the answer turns out to be pretty simple

All that is needded is a simple Javascript function that takes in a drop-down list as an input, takes the value of the selected option and run it through a location.href.  Here is the JavaScript:

function Navigate(drop_down_list) {
   var number = drop_down_list.selectedIndex;
   location.href = drop_down_list.options[number].value; }

Then all you need to do is add a dropdown list setting the values to the urls you want to navigate to, and the onclick event set to Navigate(name_of_dropdown) and you are all ready to go. Here is a quick example:



best javascript toggleDiv function ever

Everyone has a javascript toggleDiv function somewhere, but this is the cleanest one you will ever see

All this is is an expand and collapse of whatever you want it to expand/collapse - it is made for divisions with the 'block' declaration, but could also be used for inline elements if you simply changed it to 'inline' 

function toggleDiv(divid){
  var div = document.getElementById(divid);
  div.style.display = div.style.display == 'block' ? 'none' : 'block';}

Basically it is just a condensed if/then statement.  Keep in mind it will only work on the very first click if you already have 'display' set to 'block' or 'none' at first, otherwise it will take 2 clicks.  It is about as simple as it gets.