Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Is it possible to put a combo box in a Javascript Alert/Input dialog

Status
Not open for further replies.

Karl Blessing

Programmer
Feb 25, 2000
2,936
US
I am basically designing an application where a user may want to edit a feild, but say the field can ONLY have certain values, best way to make them chose is have a combo box, but is it possible in a Javascript intput dialog to have a combo box. <p>Karl<br><a href=mailto:kb244@kb244.8m.com>kb244@kb244.8m.com</a><br><a href= </a><br>Experienced in , or have messed with : VC++, Borland C++ Builder, VJ++6(starting),VB-Dos, VB1 thru VB6, Delphi 3 pro, Borland C++ 3(DOS), Borland C++ 4.5, HTML, ASP(somewhat), QBasic(least i didnt start with COBOL)
 
Karl,<br>&nbsp;&nbsp;You can't use the standard prompt box that is supplied with Javascript.&nbsp;&nbsp;You'll need to open a window with a select box in it. <p>nick bulka<br><a href=mailto:nick@bulka.com>nick@bulka.com</a><br><a href= > </a><br>
 
Just curious then, If i open a new window I would have 2 questions<br><br>1) how do I alter the window so that it only has a titlebar, no status bar, no navigational buttons, etc.<br>2) how do I get the results returned right back to the middle frame of the window it was called from.<br> <p>Karl<br><a href=mailto:kb244@kb244.8m.com>kb244@kb244.8m.com</a><br><a href= </a><br>Experienced in , or have messed with : VC++, Borland C++ Builder, VJ++6(starting),VB-Dos, VB1 thru VB6, Delphi 3 pro, Borland C++ 3(DOS), Borland C++ 4.5, HTML, ASP(somewhat), QBasic(least i didnt start with COBOL)
 
hmm...<br><br>1)<br>window.open('','','');<br>should do most of what you want with the window, but you cant get rid of the titlebar<br><br>2)insert this into your select :<br>onChange=&quot;itChanged()&quot;;<br><br>and this in a javascript section <br>function itChanged(){<br>theSelect=document._the_form_name_._the_select_name_;<br>text=theSelect.options[theSelect.selectedIndex].text<br>parent.parent._FRAME_NAME_.document.writeln(text+'was selected');<br>}<br><br>I think that should work <p>theEclipse<br><a href=mailto:eclipse_web@hotmail.com>eclipse_web@hotmail.com</a><br><a href=robacarp.webjump.com>robacarp.webjump.com</a><br>**-Trying to build a documentation of a Javascript DOM, crossbrowser, of course. E-mail me if you know of any little known events and/or methods, etc.
 
From another forum, I found this command may be of more use. [Copied from the MSDN Libraries]<br><br><FONT FACE=monospace><br>Creating and Using Modal Dialog Boxes<br>A dialog box is a special window that you create by using the showModalDialog method on the window object. Dialog boxes are useful for soliciting input from the user in a way that does not obscure the information in the current window. They are also useful for displaying important information that the user should act upon or acknowledge before proceeding. <br><br>The showModalDialog method is similar to the open method in that it takes the URL of an HTML document and displays the document in a new window. One of the main differences, however, is that the dialog box is modal, meaning it does not release the input focus until it is closed. This means the user cannot switch back to the window that created the dialog box until she closes the dialog box. However, this does not prevent the user from switching to other windows or applications. <br><br>You typically create dialog boxes in response to user input, such as clicking a button or choosing an item in a menu. The following example calls showModalDialog directly from the onclick attribute of a BUTTON element. <br><br>&lt;BUTTON onclick=&quot;window.showModalDialog('dialog.htm')&quot;&gt;Search&lt;/BUTTON&gt;<br><br>The method in the example above creates a dialog box having the standard dialog box size and features, and loads the document dialog.htm into the new window. <br><br>You can load any valid HTML document into a dialog box, but most dialog documents contain one or more controls with which the user supplies input or directs an action. For example, the following document provides a text control for letting the user specify a string to search for and buttons to confirm or cancel the search. Notice that the string is returned to the main window by assigning it to returnValue. <br><br>&lt;HTML&gt;<br>&lt;HEAD&gt;&lt;TITLE&gt;Search For&lt;/TITLE&gt;<br>&lt;SCRIPT LANGUAGE=&quot;JScript&quot;&gt;<br>function doOK() {<br>&nbsp;&nbsp;&nbsp;&nbsp;window.returnValue = window.document.all.MySearch.value;<br>&nbsp;&nbsp;&nbsp;&nbsp;window.close();<br>}<br>function doCancel() {<br>&nbsp;&nbsp;&nbsp;&nbsp;window.returnValue = &quot;&quot;;<br>&nbsp;&nbsp;&nbsp;&nbsp;window.close();<br>}<br>&lt;/SCRIPT&gt;<br>&lt;/HEAD&gt;<br>&lt;BODY&gt;<br>&lt;P&gt;&lt;B&gt;Search For:&lt;/B&gt; &lt;INPUT ID=MySearch TYPE=text&gt;<br>&lt;CENTER&gt;<br>&lt;BUTTON onclick=&quot;doOK()&quot;&gt;OK&lt;/BUTTON&gt; <br>&lt;BUTTON onclick=&quot;doCancel()&quot;&gt;Cancel&lt;/BUTTON&gt;<br>&lt;/CENTER&gt;<br>&lt;/BODY&gt;<br>&lt;/HTML&gt;<br><br>Show Me<br>When the document above is displayed, the user can type a string into the text control (identified by MySearch) and click either the OK or Cancel button to carry out an action. Clicking OK calls the doOK function, which retrieves the text from the text control and assigns it to the returnValue property of the dialog box. Clicking Cancel calls doCancel, which assigns an empty string to this property. Both functions then call the close method to close the dialog box and return the input focus to the original window. <br><br>The returnValue property on the window object specifies the value to be returned by the showModalDialog method after the dialog box closes. Setting this property is one way a dialog box can return information to the original window. Assuming the document in the previous example is in a file named &quot;search.htm&quot;, the following example can use the returned string to carry out a search. <br><br>function doSearch() {<br>&nbsp;&nbsp;&nbsp;&nbsp;var str = showModalDialog(&quot;search.htm&quot;);<br>&nbsp;&nbsp;&nbsp;&nbsp;if (str == &quot;&quot;)<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;&nbsp;&nbsp;&nbsp;&nbsp;// user canceled search<br>&nbsp;&nbsp;&nbsp;&nbsp;else {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// search for the string<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br>}<br><br>You can pass arguments to a dialog box by using the second parameter of showModalDialog. This parameter accepts any valid type, so an array can be passed just as easily as a discrete type. <br><br>var aCafeArgs = new Array(&quot;Tall&quot;, &quot;Decaf&quot;, &quot;Non-fat&quot;, &quot;Mocha&quot;);<br>var cResult = window.showModalDialog(&quot;barista.htm&quot;, aCafeArgs);<br><br>A dialog box can retrieve the arguments through the dialogArguments property of the window object. Passing arguments is a useful way for the original window to specify the initial values for the controls in the dialog box. For example, consider the dialog document in the search example. By scripting the onload event of the BODY element to call the following function, the dialog box can set the initial search string to a value supplied by the original window. <br><br>function doInit() {<br>&nbsp;&nbsp;&nbsp;&nbsp;if (window.dialogArguments != null)<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.document.all.MySearch.value = window.dialogArguments;<br>}<br>&nbsp;&nbsp;&nbsp;.<br>&nbsp;&nbsp;&nbsp;.<br>&nbsp;&nbsp;&nbsp;.<br>&lt;BODY onload=&quot;doInit()&quot;&gt;<br><br>To set the initial search string to the words &quot;Sample Text&quot;, the original window calls showModalDialog as in the following example: <br><br>var str = showModalDialog(&quot;search.htm&quot;, &quot;Sample Text&quot;);<br><br>A better way to make use of the dialog arguments for this document is to store the search string in a variable within the document of the original window, as in the following example. <br><br>var str = &quot;&quot;;<br>function doSearch() {<br>&nbsp;&nbsp;&nbsp;&nbsp;str = showModalDialog(&quot;search.htm&quot;, str);<br>&nbsp;&nbsp;&nbsp;&nbsp;if (str == &quot;&quot;)<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;&nbsp;&nbsp;&nbsp;&nbsp;// user canceled search<br>&nbsp;&nbsp;&nbsp;&nbsp;else {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// search for the string<br>&nbsp;&nbsp;&nbsp;&nbsp;}<br>}<br><br>Storing the returned string in the global variable ensures that the previous search string is available whenever the user requests another search. Remember that stored values are discarded when a document is unloaded, so you cannot store the previous string with the dialog document. This also means that the stored string in the original window is discarded when that document is unloaded. <br><br>In addition to setting initial values, you can also set the input focus to a specific control in the dialog box by using the focus method. This ensures that when the dialog document is loaded, the user can begin entering input immediately without first moving the focus to an appropriate control. The input focus is typically set in the same function that sets initial values for the dialog box. To set the focus to the text control in the previous example, use the following: <br><br>window.document.all.MySearch.focus();<br><br>If the original window has more that one value to exchange with the dialog box, it can do this by passing an object to the dialog box as an argument. For example, the following dialog document prompts the user with both a Match Case check box and a Search For string. To receive the user's settings for these, the original window passes an object that the dialog box sets when the user clicks OK or Cancel. <br><br>&lt;HTML&gt;<br>&lt;HEAD&gt;&lt;TITLE&gt;Search For&lt;/TITLE&gt;<br>&lt;SCRIPT LANGUAGE=&quot;JScript&quot;&gt;<br>function doInit() {<br>&nbsp;&nbsp;&nbsp;&nbsp;if (window.dialogArguments != null) {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.document.all.MySearch.value = window.dialogArguments.str;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.document.all.MatchCase.checked = window.dialogArguments.caseSensitive;<br>&nbsp;&nbsp;&nbsp;&nbsp;}<br>&nbsp;&nbsp;&nbsp;&nbsp;window.document.all.MySearch.focus();<br>&nbsp;&nbsp;&nbsp;&nbsp;window.returnValue = false;<br>}<br>function doOK() {<br>&nbsp;&nbsp;&nbsp;&nbsp;window.returnValue = true;<br>&nbsp;&nbsp;&nbsp;&nbsp;if (window.dialogArguments != null) {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.dialogArguments.str = window.document.all.MySearch.value;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.dialogArguments.caseSensitive = <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.document.all.MatchCase.checked;<br>&nbsp;&nbsp;&nbsp;&nbsp;}<br>&nbsp;&nbsp;&nbsp;&nbsp;window.close();<br>}<br>function doCancel() {<br>&nbsp;&nbsp;&nbsp;&nbsp;window.returnValue = false;<br>&nbsp;&nbsp;&nbsp;&nbsp;window.close();<br>}<br>&lt;/SCRIPT&gt;<br>&lt;/HEAD&gt;<br>&lt;BODY onload=&quot;doInit()&quot;&gt;<br>&lt;INPUT ID=MatchCase TYPE=checkbox&gt; &lt;B&gt;Match Case&lt;/B&gt; <br>&lt;P&gt;&lt;B&gt;Search For:&lt;/B&gt; &lt;INPUT ID=MySearch TYPE=text&gt;<br>&lt;CENTER&gt;<br>&lt;BUTTON onclick=&quot;doOK()&quot;&gt;OK&lt;/BUTTON&gt; <br>&lt;BUTTON onclick=&quot;doCancel()&quot;&gt;Cancel&lt;/BUTTON&gt;<br>&lt;/CENTER&gt;<br>&lt;/BODY&gt;<br>&lt;/HTML&gt;<br><br>Be careful! Any document that uses this dialog document needs to properly declare and initialize the object. The following example declares the myDialog object and initializes the object before calling showModalDialog. <br><br>function myDialog() {<br>&nbsp;&nbsp;&nbsp;&nbsp;var str;<br>&nbsp;&nbsp;&nbsp;&nbsp;var caseSensitive;<br>}<br>function doSearch() {<br>&nbsp;&nbsp;&nbsp;&nbsp;myDialog.str = &quot;&quot;;<br>&nbsp;&nbsp;&nbsp;&nbsp;myDialog.caseSensitive = false;<br>&nbsp;&nbsp;&nbsp;&nbsp;if (showModalDialog(&quot;search.htm&quot;, myDialog)==false)<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;&nbsp;&nbsp;&nbsp;&nbsp;// user canceled search<br>&nbsp;&nbsp;&nbsp;&nbsp;else {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// search for the string<br>&nbsp;&nbsp;&nbsp;&nbsp;}<br>}<br><br>An alternate way to pass multiple values between the original window and the dialog box is to concatenate those values into a single string, and leave it to the documents to parse the string and extract the values. <br><br>The appearance and size of a dialog box can be set from the third parameter of the showModalDialog method. The following example creates a dialog box that uses a default font size of 10 pixels and a dialog box width and height of 10 ems. <br><br>window.showModalDialog(&quot;dialog.htm&quot;,null,<br>&nbsp;&nbsp;&nbsp;&nbsp;&quot;font-size:10px;dialogWidth:10em;dialogHeight:10em&quot;)<br><br>As you can see in the example above, the third parameter takes a string, consisting of one or more settings separated by semicolons (;). Each setting consists of a name and a value separated by a colon :)) or equal sign (=). The value depends on the ornament. If it is a number, it takes a units designator, such as px or em. <br><br>You use the dialogWidth and dialogHeight properties to set the initial width and height of the dialog box. Similarly, you can use dialogLeft and dialogTop to set the initial position of the dialog box relative to the upper-left corner of the desktop (not the parent window). If you don't want to calculate the left and top positions for the dialog box, you can center it in the desktop by using the center keyword. <br><br>Although the position, width, and height of a dialog box are typically set by the parent document, you can retrieve and change these settings from within the dialog box itself by using the dialogLeft, dialogTop, dialogWidth, and dialogHeight properties. Changing these settings is important, for example, if you want to expand the content of the dialog box to show additional options that the user can choose from. <br><br>You can set the default font, font size, weight, and style for text in the dialog box by using the font, font-size, font-weight, and font-style properties. These take the same values as the CSS attributes of the same name. The default settings apply only to text in the dialog box that does not already have explicit font settings.<br></font> <p>Karl<br><a href=mailto:kb244@kb244.8m.com>kb244@kb244.8m.com</a><br><a href= </a><br>Experienced in , or have messed with : VC++, Borland C++ Builder, VJ++6(starting),VB-Dos, VB1 thru VB6, Delphi 3 pro, Borland C++ 3(DOS), Borland C++ 4.5, HTML, ASP(somewhat), QBasic(least i didnt start with COBOL)
 
ShowModalDialog only works in IE.&nbsp;&nbsp;If you have Netscape users, this isn't a good solution. <p>nick bulka<br><a href=mailto:nick@bulka.com>nick@bulka.com</a><br><a href= > </a><br>
 
Since this is a project for this small company, and since we only use IE, (even our customers has to use IE for most of our products) It can use all IE + Standard stuff, because this is for a inside tool. <p>Karl<br><a href=mailto:kb244@kb244.8m.com>kb244@kb244.8m.com</a><br><a href= </a><br>Experienced in , or have messed with : VC++, Borland C++ Builder, VJ++6(starting),VB-Dos, VB1 thru VB6, Delphi 3 pro, Borland C++ 3(DOS), Borland C++ 4.5, HTML, ASP(somewhat), QBasic(least i didnt start with COBOL)
 
You're a lucky man. Karl.&nbsp;&nbsp;I wish I could ignore Netscape. In that case, I'd use VBScript instead of Javascript. <p>nick bulka<br><a href=mailto:nick@bulka.com>nick@bulka.com</a><br><a href= > </a><br>
 
I know what you mean, netscape used to be good prior to IE 4.something I think that was before AOL bought them out, in any case the most annoying feature of netscape now, is when you resize your window, the entire page gets reloaded.<br><br>Also since VBscript is already close to a tool that I use , and also since sticking with the IE lets you control more Of its feature, however in future use Netscape will not be as easy to ignore when doing customer related projects. I got thew showModal Dialog thing working, made it call to an ASP, putting in self-encoded parameter, (not using second argument that uses window object, because thats client side, and I Cant setup my dialog according to its type of i dont proccess server-side arguments). It appears I may have to reload the main page just to get it to store the session variable when it returns. <p>Karl<br><a href=mailto:kb244@kb244.8m.com>kb244@kb244.8m.com</a><br><a href= </a><br>Experienced in , or have messed with : VC++, Borland C++ Builder, VJ++6(starting),VB-Dos, VB1 thru VB6, Delphi 3 pro, Borland C++ 3(DOS), Borland C++ 4.5, HTML, ASP(somewhat), QBasic(least i didnt start with COBOL)
 
Hello <br>&nbsp;&nbsp;&nbsp;You can remove the title bar the status bar and the toolbar by doing this.<br><br>myWin= open(&quot;bla.html&quot;, &quot;displaywindow&quot;,<br>&nbsp;&nbsp;&nbsp;&quot;width=200,height=200,menubar=yes,toolbar=no,status=no,&quot;)<br><br><br>
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top