Stack Exchange
document.getElementById return empty
i have a form that need to be proceed in other page, when i try to get value of a input the js return nothing!
the form:
<form id="myf" name="myf" method="POST" action="folder/nextstep.php">

    <label for="place">Name: </label>
    <input id="place" name="place" type="text" onkeyup="getfind('result_place','folder/nextstep.php','place');"><br>
    <div id="result_place"></div>

    <script type="text/javascript"> 
        var values = new Array();
        values[0] = new Array();
        values[0][0] = "place";
        values[0][1] = document.getElementById("place").value;
    </script>

    <input id="submit" name="submit" type="button" onclick="getfind('folder/nextstep.php',values);" value="Add">
</form>

and other file that proceed:
function getfind() {
    var xmlobj = ajax();
    if (arguments.length == 3) {
          //something here
    } else if (arguments.length == 2) {

        var thepage = arguments[0];
        var thevalues = arguments[1];
        var theparam = "";

        for (var i in thevalues) {
            theparam += thevalues[i][0] + "=" + thevalues[i][1] + "&";
            alert(theparam);
        }

but alert something like this:
place=&input2=& and ...
and the values are empty!
why?

length is a base 1 integer, looks like you are testing based on base 0? IE you have 3 arguments and the code section for 3 arguments is blank? my first guess.

Also you are setting var values on load but i see nothing updating them on text entry

You are initialising values at the time the page is loaded.
If you want to use the current contents of the inputs, you need to do that at the time of the click.
The simplest option is probably to put it in a function:
function getvalues()
{
    var values = new Array();
    values[0] = new Array();
    values[0][0] = "place";
    values[0][1] = document.getElementById("place").value;
    return values;
}

then instead of values, use getvalues():
onclick="getfind('folder/nextstep.php',getvalues());"


The problem is most likely that you don't get the values when the function is called. Your code that tries to get them is evaluated before you enter anything. If you embed that part into the getfind() function it should work.
var values = new Array();
values[0] = new Array();
values[0][0] = "place";


function getfind() {

    var xmlobj = ajax();
    if (arguments.length == 3) {
          //something here
    } else if (arguments.length == 2) {

        var thepage = arguments[0];
        var thevalues = arguments[1];

        var theparam = "";

        for (var i = 0; i < values.length; i++) {
            // get latest values
            thevalues[i][1] = document.getElementById(thevalues[i][0]).value;
            theparam += thevalues[i][0] + "=" + thevalues[i][1] + "&";
            alert(theparam);
        }


Its seems that element place element is not ready when you scripting is executed.
Put your code in 
window.onload=function(){
//your code here
}

Your code should be
<script type="text/javascript"> 
window.onload=function(){
     var values = new Array();
     values[0] = new Array();
     values[0][0] = "place";
     values[0][1] = document.getElementById("place").value;
}       
</script>


tnx, all answers correct :)
and now, i use this:
function getvalues()
{
values =
[["edu_place",document.getElementById("edu_place").value],
["edu_degree",document.getElementById("edu_degree").value],
["edu_field",document.getElementById("edu_field").value],
["edu_description",document.getElementById("edu_description").value],
["edu_indate",document.getElementById("edu_indate").value],
["edu_outdate",document.getElementById("edu_outdate").value]];
return values;
}
