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

Question

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

So you want to show #purchase-price's value in the alert box? Or do you actually want to calculate the final percentage of all the inputs? — Jacques Marais
– Jacques Marais, Commented Nov 29, 2015 at 9:57
Yes. And My main goal is I want to take more input values, calculate and then by clicking calculate button the result will show on alert. — Jim Fahad
– Jim Fahad, Commented Nov 29, 2015 at 10:01
Yes, also I kept the JS code inside a invoked immediately function . Now I remove that too. It's working. — Jim Fahad
– Jim Fahad, Commented Nov 29, 2015 at 10:10

Vivek · Accepted Answer · 2015-11-29 10:18:55Z

2

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.

edited Nov 29, 2015 at 10:18

answered Nov 29, 2015 at 10:13

Vivek

13.6k19 gold badges101 silver badges140 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jim Fahad Over a year ago

It solves my problem. And does javascript:void(0) prevent the default?

Vivek Over a year ago

@JimFahad Oh.. Sorry. Not required. Removed it.

Jim Fahad Over a year ago

Now I am trying to add(sum) all the values and show that(calculation result) on alert. But the result says it's Nan(not a number). I also make all the input type text to number and wrap document.getElementById('id').value with Number function. Here is the [jsfiddle] (jsfiddle.net/Jim_Fahad/9ujuk6q4/2) . Can you explain why it happens?

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related