Q923 How can I run a CGI script by clicking on an image and mapping the cgi script's return value into a javascript variable, all this without loading a new html page?

You are here: irt.org | FAQ | JavaScript | Image | Q923 [ previous next ]

You can invoke a cgi script by clicking on an image by replacing the source of the image:

<script language="JavaScript"><!--
function call_cgi() {
    if (document.images) {
        document.images['myImage'].src = '/cgi-bin/script.cgi';
    }
}
//--></script>

<a href="#" onClick="this.href='javascript:call_cgi()'"><img src="picture.gif" name="myImage" width="50" height="50"></a>

But, for this to work, the script.cgi must return an image and not text. It is not possible to capture a value returned by a cgi script in this fashion.

It is possible to return the results to another frame:

<script language="JavaScript"><!--
var variableName = null;
//--></script>

<a href="/cgi-bin/script.cgi" target="otherFrameName"><img src="picture.gif" width="50" height="50"></a>

If you've defined the frameset as:

<frameset rows="100%,*">
<frame src="mypage.htm" name="originalFrame">
<frame src="about:blank" name="otherFrameName">
</frameset>

Then the results will be hidden in a hidden frame.

If you write the cgi script to return HTML with embedded JavaScript, then you can set capture the result and store it in a JavaScript variable. The CGI script could return HTML as follows:

<script language="JavaScript"><!--
parent.originalFrame.variableName = '42';
//--></script>

©2018 Martin Webb