没有重定向的POST表单

I would like to post a form's data to the page where the database-query will be made.

But I don't want like in normal cases where a new page opens up, or the site gets redirected. It should be something like a "hidden" post.

I tried to use a xmlhttp-request (GET) with a URL, but since there are a lot of form-fields where you can enter a few sentences of text, the URL gets super long.

I also heard about the "POST" xmlhttp-request, but I haven't found a good tutorial with a working example.

I don't want to use jQuery or anything like that.

Does anybody know how to do this, or how xmlhttp post works?

Here is the code I used for GET: (BUT I would like to not do the var ID1 = ... part. I want to just get the values by $_POST like a regular submit.

function doGET() {
    var ID1 = document.getElementByID("Textfield1").value;
    var ID2 = document.getElementByID("Textfield2").value;
    var ID3 = document.getElementByID("Checkbox1").value;

    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    } else {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystate = function() { alert(msg); }

    xmlhttp.open("GET", "insert.php?ID1=" + ID1 + "&ID2" + ID2 + "&ID3=" + ID3, true);
    xmlhttp.send();
}

HTML

<div>    
     <p> TEXT1 </p>     
     <Input type="TextBox" id="Textfiel1">    
     <br>
     <p> TEXT2 </p>
     <Input type="TextBox" id="Textfield2">
     <br>
     <p> Checkbox 1</p>    
     <Input type="Checkbox" id="checkbox1">
     <br>
     <Label onclick="doGET()"> Click </Label>
</div>

Sending a POST request is not much different than sending a GET. There are two key differences, though, that I will point out below:

Since you didn't supply an HTML form to work with, I made the following below:

<form id="myForm">
    <input type="text" id="Textfield1" name="Textfield1" />
    <input type="text" id="Textfield2" name="Textfield2" />
    <input type="checkbox" id="Checkbox1" name="Checkbox1" />
    <select id="Select1" name="Select1">
        <option value="1">Option 1</option>
        <option value="2" selected>Option 2</option>
    </select>
</form>

I also refactored your doGET method, renaming it postForm which accepts a form element as an argument.

function postForm(form) {
    var xmlhttp = null,
        data = '';

    for (var i = 0; i < form.elements.length; i++) {
        data += '&' + encodeURIComponent(form.elements[i].id) + '=' + encodeURIComponent(form.elements[i].value);
    }

    data = data.substr(1); //Get rid of the first character.

    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    } else {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystate = function() { alert(msg); }

    xmlhttp.open("POST", "insert.php", true);
    xmlhttp.send(data); //Send your data in the send method.
}

postForm(document.getElementById('myForm'));

1. We use POST instead of GET in the xmlhttp.open method.
2. We send the parameters just like you did in the GET, but I have automated the serialization of the form with a loop.

This is actually quite easy, you simply need an iframe in the document with a name attribute, and then you can set the target on your form to the same value. When you submit the form, it will then target the iframe.

If you want the form to return something, it can return javascript that accesses the parent using parent.doSomething (as long as these are on the same domain).