How to get input submission to stay on screen instead of flashing across

Question

I am currently trying to create a tip calculator app using JS, HTML, and CSS. My issue is that the input value is submitted when the button is clicked, but once submitted, the value just flashes for less than a second, then it vanishes. I would like for the value to stay on the screen once submitted.

let dinTotal = document.querySelector('#cost');
let dinService = document.querySelector('#service');
let dinSize = document.querySelector('#size');
let calcBtn = document.querySelector('button');
let total = 0;
let amount = document.querySelector('#amount')

calcBtn.addEventListener('click', function() {
  if(dinTotal.value >= 50 && dinService.value < 5 && dinSize.value < 5) {
    total = (dinTotal.value * 0.10) + dinTotal.value ;
    amount.textContent = total;
  }
})

<form>
  <h1>Tip & Dip✌️</h1>
  <hr>

  <!-- Bill Section -->

  <div>
    <label for='cost'>Dinning amount</label>
  </div>

  <input name='cost' id='cost' type='number' placeholder='$' required>

  <!-- Service Section-->

  <div class='top-space'>
    <label for='service'>How was the service</label>
  </div>

  <input name='service' id='service' type='number' placeholder='rate 1-10' required>

  <!-- Party Size-->
  <div class='top-space'>
    <label for='size'>Party Size</label>
  </div>

  <div>
    <input name='size' id='size' type='number' required>
  </div>
  
  <div class='top-space'>
    <button>LET'S CALCULATE...</button>
  </div>
  
  <hr>
  <h2>Total: $<span id='amount'>0</span></h2>
</form>

Possible duplicate of [How to prevent buttons from submitting forms](https://stackoverflow.com/questions/932653/how-to-prevent-buttons-from-submitting-forms) — Heretic Monkey, Oct 25 '19 at 19:45

score 0 · Answer 1 · answered Oct 25 '19 at 19:45

The default behavior of a button is to submit the form. When a form submits, if you don't stop it, it will unload the current page and submit the data to its action URL. With no action attribute, a form submits to the current page, causing your reload.

Set the type attribute on your button to button to prevent it from being a submit button.

    <button type="button">LET'S CALCULATE...</button>

score 0 · Answer 2 · answered Oct 25 '19 at 19:52

use the preventDefualt() method of the event callback

calcBtn.addEventListener('click', function(event) {
    event.preventDefault()
}

Full working snippet (though it only updates for size and value of less than 5 and checks greater than 50 I hope you know)

let dinTotal = document.querySelector('#cost');

let dinService = document.querySelector('#service');

let dinSize = document.querySelector('#size');

let calcBtn = document.querySelector('button');

let total = 0;

let amount = document.querySelector('#amount')

calcBtn.addEventListener('click', function(event) {
event.preventDefault()
if(dinTotal.value >= 50 && dinService.value < 5 && dinSize.value < 5)  

{
total = (dinTotal.value * 0.10) + dinTotal.value ;
 console.log(total)
 amount.textContent = total;

}

})

<form>
  <h1>Tip & Dip✌️</h1>
  <hr>
  <div>
    <label for='cost'>Dinning amount</label>
  </div>
  <input name='cost' id='cost' type='number' placeholder='$' required>
  <div class='top-space'>
    <label for='service'>How was the service</label>
  </div>

  <input name='service' id='service' type='number' placeholder='rate 1-10' required>
  <div class='top-space'>
    <label for='size'>Party Size</label>
  </div>

  <div>
    <input name='size' id='size' type='number' required>
  </div>

  <div class='top-space'>
    <button>LET'S CALCULATE...</button>
  </div>
  <hr>
  <h2>Total: $<span id='amount'>0</span></h2>
</form>

How to get input submission to stay on screen instead of flashing across

2 Answers2