How do I make JavaScript to set these element values?

Question

I have two fields that need to multiply each other and fill a 3rd form's value. Here's the HTML:

    <input type="text" name="estimate[concrete][price]" value="" onBlur="calc_concreteprice(document.forms.mainform);" /> 
per SF <strong>times</strong> 
<input type="text" name="estimate[concrete][sqft]" value="" onBlur="calc_concreteprice(document.forms.mainform);" /> SF
 = <input type="text" name="estimate[concrete][quick_total]" value="" />

Here's my JavaScript:

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

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

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

I want the first two forms to be multiplied together and output to the third. I think my problem may be within how I am referencing the input field names, with brackets (I'm taking results from this form as an array so I'm already used to working with the results as a multi-dimensional array).

Thanks for the help!

Answer 1

I'm pretty sure it's the square brackets. Try changing your names on your input fields. If you want definite separation between the names to show some sort of hierarchy, try using underscores like <input type="text" name="estimate_concrete_price" />.

In your javascript change it to mainform.estimate_concrete_price.value.....

Give that a shot. I'm pretty sure it will work.

Answer 2

When you write things like mainform.estimate[concrete][quick_total].value, it's attempting to access properties called concrete and quick_total. Try using this format instead to distinguish between a property and a string containing square brackets:

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