html ajax internet-explorer servlets onkeypress

Why this works using a button and it doesn't work using the onkeypress event

When I try to execute a method using ajax with a button I insert a text at the end of the page in a div and all is right:

enter image description here

But when I try to execute a method using ajax with the onkeypress of an html text component, it only show the ajax response text and not the other components that I had in the view:

enter image description here

I need this working on Internet explorer

What is wrong?

The view:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="${pageContext.request.contextPath}/views/test.js"
    type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
</head>
<body>
    <form action="test" method="post">
        <div id="div1">
            <table>
                <tr>
                    <td><span>Code: </span></td>
                    <td><input id="field1" name="field1" onkeypress="javascript:insertOnKeyPress()"
                        type="text" /></td>
                    <td><input id="method" name="method" type="hidden"
                        value="insert" /></td>
                    <td><input id="insert" name="insert" onclick="insertButton();"
                        type="button" value="Insert"></td>
                </tr>
            </table>
        </div>
        <div id="div2"></div>
    </form>
</body>
</html>

The servlet:

import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

@WebServlet("/sc/test")
public class TestServlet extends HttpServlet {

    private static final long serialVersionUID = 1L;

    Logger logger = LoggerFactory.getLogger(TestServlet.class);

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) {
        this.doPost(request, response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) {
        String method = null;
        try {
            method = request.getParameter("method");
            System.out.println(method);
            if (method == null) {
                getServletConfig().getServletContext().getRequestDispatcher("/views/test.jsp").forward(request, response);
            } else if ("insert".equals(method)) {
                System.out.println(request.getParameter("param1"));
                response.setContentType("text/plain");
                response.setCharacterEncoding("UTF-8");
                response.getWriter().write("response text");
            }
        } catch (Exception exception) {
        }
    }
}

The javascript file with the methods:

function insertOnKeyPress() {
    var tecla = window.event.keyCode;
    if (tecla == 13) {
        var xmlHttp = false;
        try {
            xmlHttp = new ActiveXObject("Msxml2.xmlHttp");
        } catch (e) {
            try {
                xmlHttp = new ActiveXObject("Microsoft.xmlHttp");
            } catch (E) {
                xmlHttp = false;
            }
        }

        if (!xmlHttp) {
            xmlHttp = new XMLHttpRequest();
        }

        xmlHttp.onreadystatechange = function() {
            if (xmlHttp.readyState == 4) {
                document.getElementById("div2").innerHTML = xmlHttp.responseText;
            }
        };

        xmlHttp.open("POST", "test", true);
        xmlHttp.setRequestHeader("Content-type",
                "application/x-www-form-urlencoded");
        xmlHttp.send("method=insert&param1=param_test");
    }
}

function insertButton() {
    var xmlHttp = false;
    try {
        xmlHttp = new ActiveXObject("Msxml2.xmlHttp");
    } catch (e) {
        try {
            xmlHttp = new ActiveXObject("Microsoft.xmlHttp");
        } catch (E) {
            xmlHttp = false;
        }
    }

    if (!xmlHttp) {
        xmlHttp = new XMLHttpRequest();
    }

    xmlHttp.onreadystatechange = function() {
        if (xmlHttp.readyState == 4) {
            document.getElementById("div2").innerHTML = xmlHttp.responseText;
        }
    };

    xmlHttp.open("POST", "test", true);
    xmlHttp.setRequestHeader("Content-type",
            "application/x-www-form-urlencoded");
    xmlHttp.send("method=insert&param1=param_test");
}

Solution

Change insertOnKeyPress to prevent the default action of the Return key, which is to submit the form.

if (tecla == 13) {
    var xmlHttp = false;
    window.event.preventDefault();
    ...

BTW, you don't need javascript: at the beginning of the onkeypress attribute. That's never needed in an onXXX attribute, it's only needed when you're putting Javascript in an attribute that contains a URL (e.g. href or src.