Why does this JavaScript not correctly update input values?

Question

I have two input fields, and without changing their names (i.e., I have to use the name with the brackets), how do I make this javascript code work?

<script>

    function calc_concreteprice(mainform) {
        var oprice;
        var ototal;

        oprice = (eval(mainform.['concrete[concrete][sqft]'].value) * eval(mainform.['concrete[concrete][price]'].value));
        ototal = (oprice);

        mainform.'concrete[concrete][quick_total]'.value = ototal;
    }   

</script>

Here's the HTML of the input area.

<tr>
                        <td>Concrete Base Price</td>
                        <td><input type="text" name="concrete[concrete][price]" value="" class="item_mult" onBlur="calc_concreteprice(document.forms.mainform);" /> per SF <strong>times</strong> <input type="text" name="concrete[concrete][sqft]" value="" class="item_mult" onBlur="calc_concreteprice(document.forms.mainform);" /> SF</td>
                        <td> = <input type="text" name="concrete[concrete][quick_total]" value="" /></td>
                    </tr>

I know I can get it working by changing_the_input_name_with_underscores but I need to have the names with the brackets (storing the form contents in an array).

EDIT: Left this question as a community wiki, so please contribute as you see fit to code changes!

Answer 1

How about:

mainform['estimate[concrete][sqft]'].value

and so on?

Also: you seem to be using eval() to turn a string into a numerical value. It is pretty much always a bad idea to use eval() on raw user input. I would advise using parseInt() and/or parseFloat() instead.