Dot Net Thoughts

In asp.net, it allows to create only one <FORM> tag. If you put more than one <FORM> tag it will generate an error. But some times we require multiple form tags and submit buttons. Because <FORM> tag in asp.net always submit the form to the page itself.

Here is some code in javascript, it will submit the form using javascript.

function submitform()
{
document.forms[0].action = "mynewaspxpage.aspx";
document.forms[0].submit();
}

This function will set the action to mynewaspxpage.aspx and submit the form. Normally this option required for submitting forms automatically.

I already posted some code to add and read values from dropdown lists using Javascript. Sometimes we require to reset the items to zero or need to clear the items in the dropdown list. Here is a simple code snippet which will reset the dropdown items.

function clearDropdown(dropdown)
{
var mycombo =document.getElementById(dropdown);
mycombo.options.length = 0;
return(false);
}

And you can use this function like this

<button onclick="javascript:clearDropdown('myoptions')">Reset Options</button>

Where myoptions is the dropdown to clear.

If you are using list tags, like OL, LI, UL etc, there is limited control on the UI, like it will render only like 1, disc etc. Sometimes the we require bulletedlists to be look nice. Here is simple way to modifying the OL and UL tags with custom icons. The list-style-image property in CSS used to replace the existing UL and OL tags marker with an Image.

ol
{
list-style-image: url("newImage.gif");
}

And you can change it dynamically using Javascript.

var links = document.getElementsByTagName("UL");
for(var i=0; i <= links.length - 1; i++)
{
links[i].style.listStyleImage="url(plus.gif)";
}

This code will search all the UL tags and assign images for them.

If your writing cross-browser web applications, it is nessary to detcect Browser name and version. Because some of the javascript code like forms[] and controls[] will not work in all browsers, and document.getElementById() will not work in old version browsers.

Here is the code to detect browser name and version.

var browser=navigator.appName
var version= parseFloat(navigator.appVersion)
alert("You are running " + browser +" and your browser version is " + version);

This will popup an alert box with browser name and version.

Normally if you include any ActiveX control in an HTML file and browse it using MS Internet Explorer(ActiveX only works in MS IE) it gives you warning about the ActiveX control. Here is a way to avoid this warning problem.

1) Create a .js file and insert the activeX control properties using javascript document.write method

document.write('<OBJECT CLASSID="CLSID:0713E8A2-850A-101B-AFC0-4210102A8DA7" ID="TreeView1" STYLE="HEIGHT: 400px; LEFT: 50px; WIDTH: 300px">');
document.write('<PARAM NAME="LineStyle" VALUE="0">');
document.write('<PARAM NAME="Style" VALUE="7">');
document.write('<PARAM NAME="Appearance" VALUE="1">');
document.write('<PARAM NAME="BorderStyle" VALUE="1">');
document.write('<PARAM NAME="Indentation" VALUE="250">');
document.write('</OBJECT>');

2) Insert the code in the body part in the HTML file.

<script language="Javascript" src="treeview_activex.js" mce_src="treeview_activex.js"></script>

The above code will create a Treeview activeX control, in an HTML page. You can also use Adobe flash and MS Windows Media player activeX controls using the same method.

Timing events in javascript helps to execute a function, after a specified time interval.

setTimeout() – Executes a code some time in the future.
clearTimeout() – Cancel an existing setTimeout event.

var somevariable = setTimeout("function_to_execute",milliseconds);
clearTimeout(somevariable)

Here is sample code snippet for a Javascript counter using SetTimeout and ClearTimeout functions.

Timing events in javascript helps to execute a function, after a specified time interval.

setTimeout() – Executes a code some time in the future.
var somevariable = setTimeout(“function_to_execute”,milliseconds);

clearTimeout() – Cancel an existing setTimeout event.
clearTimeout(somevariable)

Code of a javascript counter.

<html>
<head>
    <title>Javascript counter</title>

    <script type="text/javascript" language="Javascript">
        var var_counter = 0;
        var var_timer;
        function start_counter() {
            document.getElementById("counter").innerText = var_counter;
            var_counter++; var_timer = setTimeout("start_counter()", 1000);
        }
        function stop_counter() {
            clearTimeout(var_timer);
        }
    </script>
</head>
<body>
    Counter :
    <div id="counter">
    </div>
    <br />
    <button onclick="start_counter()">
        Start</button>
    <button onclick="stop_counter()">
        Stop</button>
</body>
</html>

if var_counter variable is local scope instead of global, every time clicking on start button will initialize the counter.

There is two more timing related functions available in Javascript.

SetInterval() and ClearInterval() – It is almost same as the SetTimeout and clearTimeout, only difference is setTimeout() triggers expression only once, setInterval() keeps triggering expression again and again (unless you tell it to stop). And the Syntax are same. You can write the counter with SetInterval very easily that setTimeOut