in reply to Printing html search results to the same page <div>

This is not a perl question it is a javascript question. Anyway here is how to do it using the XMLHTTP object. It is pretty easy. All we do is link our submit button to a js function. This function returns false (as with input validation when there is an error) so the form does nothing when it returns. The function groks the search string, assembles the GET request, sends it, and dumps the data into the div. Jobs done.

As a side note the search CGI needs work. If you search for 'a' it will dump 40,000+ results into the browser, if you type 'b'....and by the time you get to 'z' the entire DB has been extracted. If you type '*' it will tell you why. You probably don't want that to be happening. 

<html>
<head>
<script type="text/javascript">

var xmlhttp; // need this global to deal with bug issue

function loadXMLDoc(url,responseHandler,async) {
    xmlhttp = null;
    if (window.XMLHttpRequest) {     // code for Firefox, Opera, IE7
        xmlhttp = new XMLHttpRequest(); 
    }
    else if (window.ActiveXObject) { // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    if (xmlhttp != null) {
        xmlhttp.onreadystatechange = responseHandler;
        xmlhttp.open("GET",url,async);
        xmlhttp.send(null);
    }
    else {
        alert("Your browser does not support XMLHTTP.");
    }
}

function updateSearch() {
    if (xmlhttp.readyState == 4) {
        if (xmlhttp.status == 200) {
            document.getElementById('results').innerHTML = xmlhttp.res
+ponseText;
            xmlhttp.close;
        }
        else {
            alert("Problem retrieving data:" + xmlhttp.statusText);
        }
    }
}

function doSearch() {
    var search = escape(document.searchform.Search_Term.value);
    var url = "http://cgi.mercury-soft.com/cgi/mercury-soft.com/user-c
+gi-bin/passport/passport.cgi";
    url = url + "?Formaction=Searchforword&Search_Term="+search+"&B=Ye
+s&x=1&y=1";
    loadXMLDoc(url,updateSearch,false);
    return false;
}

</script>
</head>

<form name="searchform">
<input type="text" name="Search_Term">
<input type="button" value="Submit Form" onClick="doSearch()">
</form>

<div id="results">
No results.
</div>
    
</body>
</html>

[download]

Replies are listed 'Best First'.
Re^2: Printing html search results to the same page <div>
by ianshortreed (Initiate) on Apr 14, 2008 at 01:31 UTC
    Many thanks for your suggestions!
[reply]
Re^2: Printing html search results to the same page <div>
by Anonymous Monk on Apr 13, 2008 at 09:09 UTC
    Ifs a javascript question, don't answer it :)
[reply]

      Why not?

      Does it disturb your sense of Perl purity in some way? If so feel free to login and upvote ikegami and downvote me.

      Many of the questions on PM relate somewhat indirectly to perl and deal with server issues, compilation issues, OS issues, etc. PM would be a sad place if all the OP in such cases could hope for was a "this is not a Perl question....".

[reply]
      Why is that a javascript question?
      I don't see why this couldn't be done with a (perl) cgi that displays search results if there is no search-term, and only the search dialog otherwise
[reply]

      Part of what I love so much about this place is that you can get advice which in tangential to Perl. If you couldn't then a bookshelf of Perl books would be roughly equal in value. Since you can get architecture, compiler, platform, interface, glued-languages, DB, templates, even the odd CSS and such, almost all the advice top notch, this place is unbeatable; and Perl-like in its omnivorous nature.

[reply]

In Section Seekers of Perl Wisdom