Javascript display form results in iframe

Question

I have simple form on my webpage that passes search variables to an external page. The functionality is working as expected, I'd like to change how/where the results are displayed.

I'd like to display the search results on the same page as the search box, i.e I don't want a new window or tab to open. Ideally I would like to display the results in a hidden <div> and stay away from iframes altogether, however I don't think that's possible?

Both pages (search and results) are on the same domain, however I only have access to edit the search page code.

What do I need to change in my current code in order to get this working. I'm open to suggestions if there's a better way to do this, such as using AJAX etc. Pretty new to JS so all help is much appreciated.

The results page URL is in the following format upon a successful search of the word 'sport';

http://example.com//search/C__Ssport__Orightresult__U

My code so far is as follows;

HTML

<form action="" onsubmit="return search()">
    <input id="SearchInput" placeholder=" Search..." type="text">
    <input type="hidden" id="Base" value="http://example.com/search/">
    <input type="submit" value="Submit">
</form>

JS

<script type="text/javascript">
   function search(){
        var BaseURLInput, BaseURL, searchInput, searchString, locationHref, charRegExString, base64Regex;
        var base64_encoding_map = {"=":"PQ==", "/": "Lw==", "\\":"XA==", "?":"Pw=="};
        var escapeRegExp = function(string) {
            return string.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
        }
        BaseURLInput = document.getElementById("Base");
        searchInput = document.getElementById("SearchInput");

        if (searchInput && BaseURLInput) {
            BaseURL= BaseURLInput.value;
            searchString = searchInput.value;
            for (var specialChar in base64_encoding_map) {
                charRegExString = escapeRegExp(specialChar);
                base64Regex = new RegExp(charRegExString, "g");
                searchString = searchString.replace(base64Regex, base64_encoding_map[specialChar])
            }
            searchString = encodeURIComponent(searchString);
            locationHref = BaseURL+ "C__S" + searchString + "__Orightresult__U";
            window.open(locationHref,'_blank' );
        }
        return false;
    }
</script>

score 0 · Accepted Answer · edited Sep 14 '17 at 14:07

0

Instead of opening results page you could make an AJAX call.

In this answer you have a good example of how to do them: How to make an AJAX call without jQuery?

The idea is to call the results page with an AJAX call and directly embed the results returned to you into your preferred html container.

edited Sep 14 '17 at 14:07

answered Jul 25 '16 at 11:45

Bardo

2,470
2
24
42

Definitively AJAX calls are the way to go in this type of scenarios. They are quite simple once you get the basics, don't get intimidated by them. You always can post your doubts in SO – Bardo Jul 25 '16 at 11:56
The results page does not return JSON data, it's simply a table of results containing book titles, authors etc. Does this matter? – jonboy Jul 25 '16 at 12:04
No, an AJAX call can return anything you need, from plain text to JSON or HTML. You just need to be aware of the type of data that is being returned to you and manage it accordingly – Bardo Jul 25 '16 at 12:11

Javascript display form results in iframe

1 Answers1