使用form.submit（）清空带有表单的$ _GET和$ _POST

Question

I would like to test the connection before submit. Unlike that solution, I am using a non-Jquery solution (because I don't want to go into that language and I think it isn't necessary to load the librarie).

The code works fine in testing the connection and in sending or not the form.

The problem seems to be that using formTemp.submit() in xhr.onreadystatechange, send the form without the inputs.

Here is what I do :

//Test connection on form
var myForm = document.getElementsByTagName('form');
for (var i = 0 ; i <myForm.length; i++){
    (function(){
        var currentI = i;
        addEvent(myForm[currentI],'submit', function(e) {
            e = e || window.event; //In case IE
            e.preventDefault(); //Prevent the Form to be sent
            TestConnection_js(this);
        });
    })();
}

function addEvent(element, event, func){ 
    if (element.addEventListener){
        element.addEventListener(event, func, false);
    } else { //In case IE
        element.attachEvent('on'+event, func);
    }
}

var TestConnection_js = function (formTemp){
    var xhr = new XMLHttpRequest();
    xhr.open('GET', './index.php');
    xhr.onreadystatechange = function(){
        console.log(xhr.readyState+' - '+xhr.status);
        if (xhr.readyState == 4 && xhr.status == 200) {
            formTemp.submit(); //Here is my Submit (that submit nothing)
        } else {
            alert('Connection Error');
        }
    };
    xhr.send(null);
    return xhr;
}

<!-- What's on page : here.php -->
<form action="aim.php" method="post">
  <input type="submit"  value="Aim" />
</form>

<!-- What's on page : aim.php -->
<?php print_r ($_GET);
      print_r ($_POST); ?>

I guess that the fact it end up on aim.php means success test, so could you tell me what is wrong here ?

Edit : Forgot the method="post" on the form, but that is not the problem.

</div>

Answer 1

Problems:
1. The TestConnection_js function makes a GET request, so you will not have any data in print_r($_POST);
2. The ajax request was made to index.php instead of aim.php (xhr.open('GET', './index.php');)
3. No data was sent by ajax request, so even the print_r($_GET); will have no data
4. If you want to sent POST request, which I assume is that what you want, you have to serialize the form and make a POST ajax request to aim.php file

Solution:
1. I recommend you to use a javascript framework (like jQuery) that does most of the code you want and the code is cross-browser compatible. Take a look at jQuery ajax POST requests.
Also, take a look at this example of jQuery POST request with the form data.
2. Use the developer tool integrated in your browser. My preferred tool is Firebug for Firefox. This way you can see exactly each request the browser is making and the data is being sent/received.