Returning Multiple Values From ModalDialog

In this post I will show you how you can call the showModalDialog to open the modal dialog and then how you can pass back the multiple values from the modal dialog. For this example I have two form one which is the main form and the second one is the modal dialog form which will be used to take the user input, I have only two field on modal dialog form the user name and the password and these two fields are return to the main form from the modal dialog form. In the main form I have only one button which is used to open the modal dialog and there label one to show the success or failure of the return value and the other two labels to show the user name and the password if user entered on the modal dialog. Here is my JavaScript which is used to open modal dialog and then check for the return values.

 function OpenWindow()
{
var sFeatures ='dialogHeight=400px; dialogWidth=600px;center:yes;help:no;status=yes,toolbar=no,menubar=no';
var ErrorMessage = document.getElementById('lblErrorMessage');
var UserName= document.getElementById('lblUserName');
var Password = document.getElementById('lblPassword');
var returnValue=window.showModalDialog("frmModalDialog.aspx", '', sFeatures);

if(returnValue != null)
{
ErrorMessage .innerHTML='User Entered Values:';
ErrorMessage.className='InformationMessage';
UserName.innerHTML=returnValue.LoginName;
Password.innerHTML=returnValue.Password;
}
else
{
ErrorMessage.innerHTML='User didn\'t enter any value:';
ErrorMessage.className='ErrorMessage';
UserName.innerHTML=' ';
Password.innerHTML=' ';
}
return false;
} 

Here is the syntax of the showModalDialog function. In the syntax of the show modal dialog the parameter which are enclosed in [ and ] are optional you can omit these parameters.

vReturnValue = object.showModalDialog(sURL [, vArguments] [, sFeatures])

Here is the detail of the parameter to the showModalDialog function.

1. sURL:Required. String that specifies the URL of the document to load and display.
2. vArguments:Optional. Variant that specifies the arguments to use when displaying the document. Use this parameter to pass a value of any type, including an array of values. The dialog box can extract the values passed by the caller from the dialogArguments property of the window object.
3. sFeatures:String that specifies the window ornaments for the dialog box, using one or more of the following semicolon-delimited values:

Returns the value of the returnValue property as set by the window of the document specified in sURL, and type of the return value is Variant.

Here the JavaScript on the show modal form which is used to return value from the modal dialog. Here I have two function PassValuesBack and the CanclClick function. In the PassValueBack function which is bind with the sign in button and used to return value to the calling form. I have searched the txtLoginName and the txtPassword button and save them in the local variable so that there value can be send back to the calling form. Then I have created object and added LoginName and Password properties to that object and after assigning the user name and password to these properties respectively I have assign this object to the returnValue and close the window. In the CancelClick I have assign null to the returnValue and close window.

function PassValuesBack()
{
var txtLoginName= document.getElementById ('txtLoginName');
var txtPassword = document.getElementById('txtPassword');
var objReturnValue = new Object();
objReturnValue.LoginName =txtLoginName.value;
objReturnValue.Password = txtPassword.value;
window.returnValue = objReturnValue;
window.close();
}

function CancelClick()
{
window.returnValue = null;
window.close();
}   

Now on the main form If user entered values and press sign in button then it will return values of the user login name and password, even if user didn't entered anything and press sign in button then the empty string is returned. On main form I have check for the null value of the returned variable, mean if user click on the close button on the modal dialog or click the cancel button then it will execute the else statement but if the return object is not null then get the value and assign to the label controls. You can download the source code from here.

Reference

1. Show Modal Dialog Method

All and any comments / bugs / suggestions are welcomed!