Entry
How to pass data back and forth between a window and a modal dialog?
How to pass data back and forth between forms in a main window and a modal dialog?
Feb 13th, 2000 04:51
Martin Honnen,
These faqt focusses on the use of IE4/5's showModalDialog to open a
modal dialog window to enter some data and pass it back to the opening
window.
IE4/5 has a
showModalDialog
function with (maximal) three arguments and a return value:
var r = showModalDialog('someURL', arguments, 'featureString')
To pass data to the dialog you use the second argument which is then
accessible in the opened dialog via
window.dialogArguments
To pass data back to the opening window you set
window.returnValue
in the dialog window and this value is then returned to the opening
window when the dialog is closed.
Contrary to
window.open (...)
script execution in the opening window waits for the modal dialog to
close.
Note that the feature string is different from the window.open()
argument as it is a semicolon separated list in css style syntax and
NOT the comma separated feature=value of window.open().
Here is an example with one FORM in the main window which opens a modal
dialog passing a form text field as the argument and returning a
selection from the dialog:
Main window:
<HTML>
<HEAD>
<SCRIPT>
function getValue (field) {
var r = showModalDialog('aDialog.html', field,
'dialogWidth:250px;dialogHeight:100px;center:1;');
if (typeof r != "undefined")
field.value = r;
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="aForm">
<INPUT TYPE="text" NAME="aText">
<INPUT TYPE="button" VALUE="select text"
ONCLICK="getValue(this.form.aText)"
>
</FORM>
</BODY>
</HTML>
aDialog.html:
<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE WIDTH="100%" HEIGHT="100%">
<TR>
<TD ALIGN="center" VALIGN="middle">
<FORM NAME="aForm">
<SELECT NAME="gods" ONCHANGE="window.returnValue = this.value;
window.close()">
<OPTION SELECTED>
<SCRIPT>
document.write('Please select text for field ' +
window.dialogArguments.name);
</SCRIPT>
<OPTION VALUE="Kibology">Kibology
<OPTION VALUE="Scriptology">Scriptology
</SELECT>
</FORM>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
