Each time I click button page refreshes

Question

Title virtually says it all. Each time I click calculate button the page just refreshes. I added the stopPropagation and preventDefault which worked on my other button on a different page, however in this situation they don't seem to work. Any thoughts?

JS:

/******** Loan Balance Constructor *********/
function LoanBalance(mLoanAmt, mIntRate, nMonths, mMonthlyPmt){
//Declarations
this.loanAmount = mLoanAmt;
this.interestRate = mIntRate;
this.numbOfMonths = nMonths;
this.monthlyPayment = mMonthlyPmt;

//Calculates Remaining Balance
this.calculateRemaining = function(){
    console.log(this.loanAmount);
    console.log(this.interestRate);
    console.log(this.numbOfMonths);
    console.log(this.monthlyPayment);
        //COME BACK TO FIX THE FORMULA 
var remainingBalance = this.loanAmount*(Math.pow(1+this.interestRate, this.numbOfMonths) -
                        (this.monthlyPayment*(Math.pow(1 + this.interestRate, this.numbOfMonths) - 1) / this.interestRate));

return remainingBalance;
    }
    return this.calculateRemaining()
}

function newBalanceObject(e){
e.stopPropagation();
e.preventDefault();

var balanceObject = new LoanBalance(document.getElementById("loanAmount").value, document.getElementById("interestRate").value, 
                                    document.getElementById("numMonthsPaid").value, document.getElementById("sliderDuration").value);

var result = balanceObject.calculateRemaining();
document.getElementById("remainingBalanceTag").innerHTML = "Your remaining balance is: " + "$" + result.toFixed(2);

}

HTML:

        <div id="remainingBalance">
        <h1 class="text-center">Loan Balance Calculator</h1>
        <form>
            <div class="form-group">
                <label for="loanAmount">Loan Amount:</label>
                <input class="form-control" id="loanAmount">
            </div>

            <div class="form-group">
                <label for="interestRate">Interest Rate:</label>
                <input class="form-control" id="interestRate" placeholder="Please enter number as a decimal">
            </div>

            <div class="form-group">
                <label for="numMonthsPaid">Number of Months Paid: </label>
                <input id="numMonthsPaid" type="text" data-slider-min="0" data-slider-max="600" data-slider-step="1" data-slider-value="300">

            <div class="form-group">
                <label for="sliderDuration">Loan Duration: </label>
                <input id="sliderDuration" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="600" data-slider-step="1" data-slider-value="300"/>
            </div>
            <button id="calcButton" class="btn btn-default">Calculate</button>
        </form>
        <h1 class="text-center" id="remainingBalanceTag"></h1>
    </div>

Where do you call your JS functions? You need to have an event listener for click on your `#calcButton`, right? — blex, Aug 13 '17 at 17:18
Possible duplicate of [Stop form refreshing page on submit](https://stackoverflow.com/questions/19454310/stop-form-refreshing-page-on-submit) — Lazar Ljubenović, Aug 13 '17 at 17:28

score 0 · Answer 1 · answered Aug 13 '17 at 17:19

The form is getting submitted by default. You need to intercept the submission event and stop the default's browser action.

Since you haven't specified the action on the form element, it's simply refreshing the page, because it doesn't know where to send the data to.

Here's a sample code which shows how to intercept and stop all forms fom being submitted by the browser. Adjust it according to your setup so you only prevent submission of the forms that you want prevented.

Array.from(document.forms).forEach(form => {
  form.addEventListener('submit', e => e.preventDefault())
}

Sorry I'm fairly new to JS and don't fully understand what you are saying. I don't understand why you are using Array or a .forEach and Adjust what according to my setup? I'm adding this event listener to my form? — Beez, Aug 13 '17 at 17:25

Each time I click button page refreshes

1 Answers1