After submitting the Ajax request to back-end the parameter will be appended to the origin address

Question

I have a link that user can click on that to see a searchBox in a lightbox. Once click on the link a lightbox will be shown that includes a search box. User need to enter the search query and clicked on search button to see the search results in the same lightbox.

The problem is that, when the request is sent and response is received the value sent by JavaScript will be replaced by the parameters of the url address.

address is : www.example.com/search?id=12

Once the server sends the response the address will be changed to the following

new address is : www.example.com/search?query=Alex

Notice in the new address id=12 is gone, it cause a java.lang.NullPointerException as server requires id parameter to load the page.

Form

Search
<form action="" onsubmit="return search(this.query.value)">
       <input name="query" id="query"/>
       <input type="submit" value="Search"/>
</form>
<div id="results">
</div>

JavaScript

function search(request){
    if(window.XMLHttpRequest)
    {
        xmlhttp = new XMLHttpRequest();
    }
    else
    {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
        {
            document.getElementById("results").innerHTML=xmlhttp.responseText;
        } 


    }
    xmlhttp.open("get","/search?value="+request,false);
    xmlhttp.send();
    return false;
}