CODEWITHSUNDEEP
javascripthtml
Jim Fahad
Jim Fahad

Reputation: 635

Javascript onClick() doesn't work for my button to calculate form inputs?

I want to take input values from HTML input and then I want to show the value by clicking result button. Here is my code:

HTML:

<form class="form-inline">
<div class="row">
    <div class="col-md-6 col-sm-6">
        <div class="form-group">
            <div class="col-md-5 col-sm-5">
                <label for="purchase-price">Purchase Price</label>
            </div>
            <div class="col-md-7 col-sm-7">
                <div class="select-wrapper">
                    <input type="text" id="purchase-price">
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-6 col-sm-6">
        <div class="col-md-5 col-sm-5">
            <button class="mortgage-button" id="mortgage-calculate" onClick="result()">CALCULATE</button>
        </div>
    </div>
</div>
<!-- end of row -->
</form>

JavaScript:

    var paid_in_percent;
function setValue(){
    paid_in_percent = document.getElementById("#purchase-price").value;

}   
function result(){
    setValue();
    alert(paid_in_percent);
}

Actually what I want:

I want to take inputs from HTML input, then I want to calculate those results and finally clicking the result/calculate button I want to reveal the calculation.

Here is the jsfiddle

Upvotes: 2

Views: 1524

Answers (1)

Vivek
Vivek

Reputation: 13238

Corrected your code

HTML

<form class="form-inline">
    <div class="row">
        <div class="col-md-6 col-sm-6">
            <div class="form-group">
                <div class="col-md-5 col-sm-5">
                    <label for="purchase-price">Purchase Price</label>
                </div>
                <div class="col-md-7 col-sm-7">
                    <div class="select-wrapper">
                        <input type="text" id="purchase-price">
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-5 col-sm-5">
                    <label for="down-payment">Down Payment</label>
                </div>
                <div class="col-md-7 col-sm-7">
                    <input type="text" id="down-payment">
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-5 col-sm-5">
                    <label for="moartgage-term">Mortgage Term</label>
                </div>
                <div class="col-md-7 col-sm-7">
                    <input type="text" id="mortgage-term">
                </div>
            </div>
        </div>
        <div class="col-md-6 col-sm-6">
            <div class="form-group">
                <div class="col-md-5 col-sm-5">
                    <label for="interest-rate">Interest Rate</label>
                </div>
                <div class="col-md-7 col-sm-7">
                    <input type="text" id="interest-rate">
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-5 col-sm-5">
                    <label for="purchase-price">Property Tax</label>
                </div>
                <div class="col-md-7 col-sm-7">
                    <input type="text" id="property-tax">
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-5 col-sm-5">
                    <label for="down-payment">P.Insurance</label>
                </div>
                <div class="col-md-7 col-sm-7">
                    <input type="text" id="p-insurance">
                </div>
            </div>
        </div>
        <div class="col-md-6 col-sm-6">
            <div class="col-md-5 col-sm-5">
                <input class="mortgage-button" type="button" value="CALCULATE" id="mortgage-calculate" onClick="result()"/>
            </div>
        </div>
    </div>
    <!-- end of row -->
</form>

JavaScript

var paid_in_percent;
function setValue(){
    paid_in_percent = document.getElementById("purchase-price").value;

}   
function result(){
    setValue();
    alert(paid_in_percent);
}

JSFIDDLE Here

Changes : 1] Removed # from getElementById function. 2] Changed button element to input tag with type button. This prevents form submission when clicked on it.

Upvotes: 2

Related Questions