Trying to do some simple calculations to display on web site using Javascript

Question

I am hoping someone can help me out - I am a Javascript novice for sure. I primarily focus on front-end web site development but a client has asked me if we can display some "cost" options online based on user input. I was able to succeed in the first pass but once I had to calculate based on a select value things stop working.

Here is my first pass which works for my client and calculates correctly since there is only one unit:

<script type="text/javascript"> 
function calcform() { 
    with (document.form1)
        { result.value = +number1.value * .75+ +number3.value} /*Calculates Option 1 One Year     Costs.*/
        { result2.value = +number1.value * .75+ +number3.value + +number3.value} /*Calculates     Option 1 Two Years.*/
        { result3.value = +number1.value * .75}/*Calculates Option 1 Leasing Fees.*/
        { result4.value = +number1.value * .08}/*Calculates Option 2 Leasing Fees.*/
        { result5.value = +number1.value * .08 *12 +500}/*Calculates Option 2 One Year Costs.*/
        { result6.value = +number1.value * .08 *24 +500}/*Calculates Option 2 Two Years.*/
    } 
</script> 
<table>
    <form name="form1" action=""> 
        <tr>
            <h5>Prospective Owners Cost Calculator:</h5><br/>
            <h4>Enter Your Anticipated Monthly Rent Here:<br/>
                <input type="text" id="number1" value="" size="20" />
            </h4><br/> 
            <input type="button" id="Calculate" value="Calculate" onclick="calcform()" />
            <input type="reset" id="reset" value=" Clear "/>
        </tr><br/>
        <tr>
            <td>
                <h4>
                    <strong>Option 1</strong>
                </h4><br/>
                <h4>Leasing Fee (75% of one month's rent):<br /> 
                    <input type="text" id="result3" value="" size="40" />
                </h4><br/>
                <h4>Monthly Management Fee (Fixed $79 x 12 months):<br />
                    <input type="text" id="number3" value="948" size="40" />
                </h4><br/> 
                <h4>Total First Year:<br /> 
                    <input type="text" id="result" value="" size="40" />
                </h4><br/> 
                <h4>Total After 2 Years (assuming lease renewal):<br />
                    <input type="text" id="result2" value="" size="40" />
                </h4><br/>
            </td>
            <br/><br/>
            <td>
                <br><br>
            </td>
            <td>
                <h4>
                    <strong>Option 2</strong>
                </h4><br/>
                <h4>Leasing Fee ($500 fixed):<br />
                    <input type="text" id="number5" value="500" size="40" />
                </h4><br/>
                <h4>Monthly Management Fee (8% of Gross Rents):<br />
                    <input type="text" id="result4" value="" size="40" />
                </h4><br/>
                <h4>Total First Year:<br />
                    <input type="text" id="result5" value="" size="40" />
                </h4><br/>
                <h4>Total After 2 Years (assuming lease renewal):<br />
                    <input type="text" id="result6" value="" size="40" />
                </h4><br/>
            </td> 
        </form>
    </table>

I'm trying to add a second form which would go on a different HTML page that would drive additional calculations using a select drop down so a user can indicate number of units, which would drive different calculations. Told you - I'm a novice! Greatly appreciate the assistance!

<script type="text/javascript"> 
function calcform() 
{ 
with (document.form1) 

{ result1.value = +number1.value * .75}/*Calculates Option 1 Leasing Fees.*/
{ result2.value = +number3.value * +number2.value}/*Calculates Option 1 Mgmt Fees all     units.*/

} 
</script> 
<table><form name="form1" action=""> 
<tr><h5>Prospective Owners Cost Calculator:</h5><br/>

<h4>Enter Your Anticipated Monthly Rent Here (Total for all units):<br/>
<input type="text" id="number1" value="" size="20" /></h4><br/>

<h4>Enter the number of units (from 2-6)<br/>
<input type="number" name="number2" value="2" min="2" max="6"/></h4><br/> 

<input type="button" id="Calculate" value="Calculate" 
onclick="calcform()" /><input type="reset" id="reset" value=" Clear "/></tr>

<br/><tr><td><h4><strong>Option 1</strong></h4><br/>

<h4>Leasing Fee (75% of one month's rent):<br /> 
<input type="text" id="result1" value="" size="40" /></h4><br/> 

<h4>Monthly Management Fee per unit (Fixed[enter link description here][1] $69 x 12 months):<br /> 
<input type="text" id="number3" value="828" size="40" /></h4><br/> 

<h4>Monthly Management Fee all units:<br /> 
<input type="text" id="result2" value="" size="40" /></h4><br/>
</form> </table>

You can see this at dev1.beastlyweb.com. I've also uploaded the Excel spreadsheet there that contains the calculations the client wants replicated online.

Answer 1

Looks like the calculation is failing because you put name="number2" in the input for "Enter the number of units (from 2-6)", instead of id="number2". You are calling the field by it's id in your calculation (+number2.value).