Popup window needed when click on save post in php/JavaScript

Question

I am learning PHP/JavaScript and I need some help: My HTML and PHP coding :

<h1>ItemsAreSh1t V<?= ItemsAreSh1t_version ?></h1>
<form method="post">
<input type="checkbox" name="dorun" value="run" <?=     isset($settings['dorun']) ? 'checked' : ''; ?>>&nbsp;Run<br>
Codes of the items:
Separate with | - ie. AJK|c1K|d01<br><textarea name="giftcodes" cols="50"><?     = $settings['giftcodes']; ?></textarea><br/>
<input type="submit" name="save" value="Save Settings">
</form>


<form id="frmsearch" method="post" name="form_search"  onsubmit="xmlhttpPost('index.php', 'form_search', 'searchresults', '', '<img  src=\'img/indicator.white_1.gif\'>'); return false;"> 
<input type="hidden" name="formtype" value="search"> <b>Search:</b>&nbsp;
<input type="text" size=10 name="search">&nbsp; 
<select name="type">
<option value="any">Any</option>
<option value="animal">Animal</option>
<option value="tree">Tree</option>
<option value="building">Building</option>
<option value="decoration">Ring/Deco</option>
<option value="vehicle">Vehicle</option>
</select>
<input type="hidden" name="userId" value="<?= $_SESSION['userId']; ?>">
<input type="submit" name="submit" value="Search"></form>
</div>
<div id="searchresults"></div>

and also using JavaScript to clear search result :

<script type="text/javascript" src="/js/ajaxsbmt.js"></script>
<script type="text/javascript">
    function ClearSearch(id){
        obj = document.getElementById(id);
        obj.innerHTML = "";
     }  
</script>

In PHP to clear search results :

    echo '<a href="#" onclick="ClearSearch(\'searchresults\');">Clear Search Results</a>'; #on click clear result

Now here i want to get search result in a popup window with a table design ...

Answer 1

Firstly, you might want to check out AJAX (snippet from related post) to send data to server, process it and send response back to browser. Pure JS:

<script type="text/javascript">
function loadXMLDoc() {
    var xmlhttp;

    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == XMLHttpRequest.DONE ) {
           if(xmlhttp.status == 200){
               document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
           }
           else if(xmlhttp.status == 400) {
              alert('There was an error 400')
           }
           else {
               alert('something else other than 200 was returned')
           }
        }
    }

    xmlhttp.open("GET", "ajax_info.txt", true);
    xmlhttp.send();
}
</script>

Secondly, the technique is called modal or dialog window - looks something like an alert window (JS) but is actually a HTML (write whatever you want here - a table, style it, add extra JS, etc.). There are various ways to do it, just to name some:

1. Bootstrap - http://getbootstrap.com/javascript/#modals
2. jQuery - https://jqueryui.com/dialog/