Write a HTML Control with Javascript function using Response.Write

 

 

Most of ASP.net programmers must have came across writing HTML control by using asp.net. It's not a problem. It can simply be done like this.

 

Response.Write("<input name='cmdTest' type='button' /> ");

 

But the problem comes while writing HTML controls with Javascript function attached and that function has arguments. The problem is due to not allowing of ASP.net to write ["] inside a string, as anything between bracket of Reponse.Write() shoud be purely string. This can be overcomed by just placing a single slash(\) before ("). The following example shows that.

 

Response.Write("<input name='cmdTest' type='button' onclick=\"fn_test('arg1','arg2')\" /> ");

 

 

A Simple JavaScript Menu for Beginners

Here in this example, I have created a simple menu in JavaScript and HTML for Beginners.

I have used two simple <div> elements of HTML and two JavaScript functions to display and hide menu.

The menu is contained in a <Table> element inside a <div>, which is shown and hidden upon entering and leaving of parent <div> element.

The complete source code can be found here.

Print Report in Web Application (IE) without using third party tool

 

We can also print reports in web browsers like Internet Explorer without using third party tools like Crystal Reports.

I have illustrated here how to accomplish it using window.print() function of JavaScript.

 

First open a new window without toolbars and sizes properly adjusted so that, it looks like report. But, Plz, note that it is not compulsory, you can print any web page.

The code is here.

 

<script language="Javascript">

 

var PLReport;

function f_Print()

{

            if (!PLReport || PLReport.closed)

            {

PLPrint=window.open("PLReport.asp?InvNum=" + Invnum,'windregn','width=800,height=600,toolbar=no,scrollbars=yes,resizable=yes,left=80,top=20');

            }

            else

            {

                        PLReport.focus();

            }

}

</script>

 

The above function opens a new window without toolbar if it is not opened or else if it already opened, it sets focus on that.

 

Now, populate the data in the new web page opened PLReport.asp.

Also, display a print button for users to print or else you can directly call print function in onload() event of body of html.

 

But, important point to be noted is that the components that need not to be printed should be hidden while printing. For example, the print button needs not to be printed so, it can be placed inside <div> of html and while printing the <div> can be hidden like this.

 

<div id="div4" name="div4">&nbsp;&nbsp;

<img src="images/print.gif" alt="Print Page" width="16" height="16" style="cursor:hand" onclick="PrintPage()" >&nbsp;

<label style="cursor:hand" onclick="PrintPage()" ><u>P</u>rint Packing List</label>

</div>

 

In above code, inside div4 a print button and print image is kept.

Now, they can be hidden like this while printing.

 

<script language="Javascript">             

            function PrintPage()

                                    {                                                                                             

                                                document.all.div4.style.visibility  = "hidden";

                                                var a = window.print();                                                                                                           document.all.div4.style.visibility  = "visible";

                                                           

                                    }                                 

</script>         

 

 

  

How to use Drop Down Box in Javascript and HTML?

 
The select box can be placed in web page by using following code.
 
<FORM name="formMain">
<SELECT name="selData">
<OPTION SELECTED value="data1">mydata1
<OPTION value="data2">mydata2
</SELECT>
</FORM>

The select box can be accessed from JavaScript as follows.
 
To get no. of items in the select box
document.formMain.selData.length
 
To find whether an option in select box is selected or not
document.formMain.selData.options[0].selected
 
To get the value attribute of first option
document.formMain.selData.options[0].value
 
To get the index of selected item in select box
document.formMain.selData.selectedIndex
 
To get the value of selected Item
document.formMain.selData.options[document.formMain.selData.selectedIndex].value
 
Note: JavaScript is case sensitive.
 

Define a function in JavaScript

JavaScript is a most popular client-side scripting language.

Here, I have shown a function named CheckForm which when called checks if the vaue for the txtInvNum input textbox is set or not. If not, it shows message and returns false.

 

<script language="Javascript">

 

function CheckForm()

{         

           

if (document.formRS.txtInvNum.value = "")

            {

                        error = "Error: Invoice No. is Compulsoroy";

                        alert(error);

                        return false;

            }

            else

            {         

                        return true;

            }

}

 

</script>

 

 

The function can be called on press of button or  label as shown below

 

<LABEL onclick= CheckForm()> Check Form </LABEL>

Pass values from ASP to JavaScript code

We often, need to pass variables declared in ASP to JavaScript code. This can be accomplished by following ways

1. By declaring a hidden input type.

We can declare hidden input type as follows to store values retrieved from ASP.

<input type=hidden name=invno value="<%=Request("invnum")%>">

 

Then, while submitting the form through JavaScript, we can use hidden input name as follows.

 

document.frm1.action = 'PLProcess.asp?InvNum=' + document.frm1.invno.value;

document.frm1.submit();

 

   2.  By changing the location of document , which is possible for pop up windows.

opener.document.location='PLProcess.asp? InvNum =<%=invno%>&status="A"&ConfirmFlg="N"';

 

Here, invno is a variable defined in ASP in same page.