| |
I recently saw a posting asking "How can I force the results of a form submittal to open up in a new window?" so I thought that I would write up this tutorial to explain the process.
First, start off by building your form just like you would normally. Here is an example form:
<form name="formName" method="get" action="myFile.cgi">
<input type="text" name="fieldSearch">
<input type="submit" name="clickSubmit" value="Search">
</form>
|
Now, this form will just turn around and submit back to the same window, which we don't want it to do. The first thing that we have to do to prevent this is to get the form to actually call a javascript function, which we will call submitForm(). To do this, we will change our submit button into a regular button and add an onClick property which calls the function submitForm() and passes the name of the form as such:
<input type="button" name="clickSubmit" onClick="submitForm(document.formName)" value="submit">
|
Now the fun part, building the javascript function. Here is the basic code for the function:
<script type="text/javascript">
<!--
function submitForm(theForm) {
}
</script>
|
This code set up the shell for the function. Within the submitForm() function, we need to establish a new window by including the following two lines:
myWindow = windows.open(windowURL, windowName);
myWindow.focus();
|
The first line will create the new window with a name of windowName and open it to the URL defined by windowURL. Now, obviously, we haven't created these two variables yet, so let's do so. The windowName variable is fairly easy as we can see here:
windowName = "myWindow\'s name";
|
The windowURL variable is a little more complicated however. We have to basically build the entire URL from scratch based on the information that is in the form. Here is one example of how to do this:
windowURL = theForm.action + '?';
|
After you create the base, you need to append to it each field that is in the form, for pretty much all field types, the following code will work, although there are a few that are kinda funky (I'll let you find those on your own).
windowURL .= 'fieldSearch=' + theForm.fieldSearch.value + '&';
|
Repeat this code for each field in the form, and you should be set to go. The final code should look something like this:
<script type="text/javascript">
<!--
function submitForm(theForm) {
windowName = "myWindow\'s name";
windowURL = theForm.action + '?';
windowURL .= 'fieldSearch=' + theForm.fieldSearch.value + '&';
myWindow = windows.open(windowURL, windowName);
myWindow.focus();
}
</script>
<form name="formName" method="get" action="myFile.cgi">
<input type="text" name="fieldSearch">
<input type="button" name="clickSubmit" onClick="submitForm(document.formName)" value="submit">
</form>
|
As a side note, if you try this just on your local drive or something, the myFile.cgi file MUST exist in the same path as the file containing the code otherwise the variables aren't displayed correctly after the filename (but they are when the file is there... go figure).
|
|