Monday, October 8, 2012

How to pass more than one values from one page to another page using javasctipt?


There is lot of methods for passing data from one page to another page, but here I am explaining, 
How to pass more than one values from one page to another page using java-script?

I have created one example for showing this process, here is code-
Source page code (SourcePage.aspx)-

This is client side Function-
        
 <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        function TransferData() {
            var value= new Object();
            value.item1 = $('input[id$=txtItem1]').val();
            value.item2 = $('input[id$=txtItem2]').val();
            showModalDialog('SecondPage.aspx', value);
            return false;
        }
    </script>


In above JavaScript code, I have created one function called- TransferData(). In this function, first I have created one var type as object using this line-

var value= new Object();

Now, using JQuery I am getting control's values and assigning to "value" variable, here "item1" and "item2" are dynamic properties for value variable.

       value.item1 = $('input[id$=txtItem1]').val();
       value.item2 = $('input[id$=txtItem2]').val();


After that using showDialog() , I am passing value variable to next page.

   showModalDialog('SecondPage.aspx', value);

All these value can be accessed in next page using same properties.

Body Part-

  <div>
        <table align="center">
            <tr>
                <td>
                    Value1
                </td>
                <td>
                    <asp:TextBox ID="txtItem1" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    Value2
                </td>
                <td>
                    <asp:TextBox ID="txtItem2" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <asp:Button ID="btnSend" runat="server" Text="Pass Data" OnClientClick="return TransferData();" />
                </td>
            </tr>
        </table>
    </div>



Now to pass data of this page to another page, I have called TransferData() function in onClientClick() event of Button.

Now SecondPage code (SecondPage.aspx)-

This is client side Function- 

 <script type="text/javascript">
        function FetchValues() {
            var value= window.dialogArguments;
            if (value!= null) {
                var item1 = value.item1 ;
                var item2 = value.item2;
                alert('item1 =' + item1 + ', item2 =' + item2 );
            }
            return false;
        }
    </script>


To get passes data from source page, I have written one client side function FetchValues(). In this function, I am getting passed data variable using this code-

var value= window.dialogArguments;

Now to get values, first I am checking for null and then accessing value like this-

   if (value!= null) {
                var item1 = value.item1 ;
                var item2 = value.item2;
                alert('item1 =' + item1 + ', item2 =' + item2 );
            }


Body Part-

<body onload="FetchValues();">
    <form id="form1" runat="server">
    <div>
    </div>
    </form>
</body>


I have called FetchValues() function in onload() event of body, based on our need this function can be called anywhere.

Note-
In this code I have used JQuery, so don't forget to include JQuery plug-in in your page.


Thanks


1 comment: