内容 <div> 完成eventListener函数后丢失

Question

Here's my Html. the output will be str.

<div id="response_container"> 
     //str 
</div>

And here's the javascript

const form = document.getElementById('search_form');
const htmlcontainer = document.getElementById('response_container');
    form.addEventListener('submit', function()
    {
        console.log("Inside sendQuery()");
        var to_search = document.querySelector('#item_to_search').value;
        var xmlObject = createObject();
        console.log(xmlObject);
        xmlObject.open("GET", "getData.php?search="+ to_search +"&srch_submit=search");
        xmlObject.send(null);
        xmlObject.onreadystatechange = function(){
            if(xmlObject.readyState == 4 && xmlObject.status == 200)
            {
                var doc = xmlObject.responseXML;
                var child = doc.documentElement;
                var content = child.firstChild.data;
                console.log(content);
                var arr = JSON.parse(content);

                for(var i = 0; i < arr.length ; i++)
                {
                    str = "<br><span>Name: "+ arr[i][0] +" Roll No: "+ arr[i][1] +"</span>";
                    htmlcontainer.insertAdjacentHTML('afterbegin', str);
                    /*htmlcontainer.innerHTML = str;*/

                }
                /*htmlcontainer.insertAdjacentHTML('afterend', content);*/

            }
            else
            {

            }

        }

This ajax code works with another php file and returns all the names in database that matches the string entered. But names do not show up in this div that has id="response_container" . I tried halting program in debugger and found that as for loop proceeds, all names does show up in the but vanishes after the eventListener finishes its work. Please help. Is there any way I can fix this?I want names in . thank u

Answer 1

Prevent the browser default form submit process

Change

form.addEventListener('submit', function() {

To

form.addEventListener('submit', function(event) {
   event.preventDefault();
   // other code is same

Answer 2

You need to prevent the form from 'submitting' which is basically wiping out your div because of the page reload.

form.addEventListener('submit', function(e) {
    e.preventDefault();
    //....
}