How do you get the height of a form div + error messages after hitting the submit button in javascript?

Question

So, I've been trying to get this form to work (css and javascript), but I'm stuck on something: i have the form, and everything's basically working, excpet that i have a container for the form div: formbody, and a container for the submit, clear, etc. The top div is set to height:auto; position:absolute; and the bottom is set to, nothing. it just had a width.

When the user clicks on the submit button, the formbody will need to resize, but i don't know how to get the new size of the form in order to set the position of the bottom div.

I just added more of the css - there's a background div that just holds the template open for the form -- I had that set to relative -- but formbody has a position absolute because the height needs to be auto in order to resize for the errors (and when i set it to auto without position:absolute, formbody shrank to 20px).

    .background {
    width: 0px;
    height: 700px;
    position: relative;
    z-index:999;
    }

.formbody {
    background-image: url('');
    background-repeat: no-repeat;
    background-position: left bottom;
    position:absolute;
    left:0px;
    top:50px;
    width:700px;
    height:auto;
    padding-bottom:20px;
    border:1px solid #d2d2d2;
}

.bottom {
    width:700px;
}

Answer 1

something like this

<script>

    var formbody_width= $(".formbody").width();

    $(".submit").live("click", function) {

       $(".formbody").css("height", formbody_width + 300 + "px");     

    }

</script>

Answer 2

Would this work? (Here's a live preview: http://jsfiddle.net/rcMGn/1/ )

Basically what I'm doing here is getting the first node with class formwidth (as per your css) and using the DOM model to acquire its style properties.

The function getElementsByClass will return an array of all elements in the document with class formwidth (and I'm supposing there's going to be only one) and getting the first element from the array (which is supposed to be 1) and then styling it.

You don't need to care about the function... To get the width just the first line of the code below...

formWidth = getElementsByClass('formbody',null,'form')[0].offsetWidth;

To get the height, use this one:

formHeight = getElementsByClass('formbody',null,'form')[0].offsetHeight;

and copy the function from the files of Dustin Diaz , the function below...

function getElementsByClass(searchClass,node,tag) {
    var classElements = new Array();
    if ( node == null )
        node = document;
    if ( tag == null )
        tag = '*';
    var els = node.getElementsByTagName(tag);
    var elsLen = els.length;
    var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
    for (i = 0, j = 0; i < elsLen; i++) {
        if ( pattern.test(els[i].className) ) {
            classElements[j] = els[i];
            j++;
        }
    }

    return classElements;
}