Javascript, page keeps refreshing after outputting results

Question

i have a small problem.

I\'m learning Javascript and I decided to make a currency converter but, my page keeps refreshing after the data is being displayed.

Answer 1

The default behavior of button is act like a submit button if it's inside a form. If you add type='button', it stops acting like a submit button

<button onclick="output_value()" type="button" id="submit_button">

You can also just return false from the handler (like you could with <input type="submit">) to prevent the default behavior.

<button onclick="output_value(); return false" id="submit_button">

Not that you don't really need a form here, since you're not submitting it. Removing the form also fixes your problem.

See How to prevent buttons from submitting forms

Answer 2

This isn't really an answer that solves your problem, but I just wanted to refactor that function.

/* USD to... */
var rates = {
  USD: 1,
  CAD: 0.975,
  EUR: 0.775,
  GBP: 0.620,
  AUD: 0.956
};
function output_value() {
  var my_input = parseFloat(document.getElementsByName("user_input")[0].value);
  var my_currency = document.convertions.currency_to_convert.value;
  var convert_to = document.convertions.convert_currency_to.value;
  var output = document.getElementsByName('convertion_output')[0];

  // side note. "conversion" is spelt with an 's' not a t.
  output.value = my_input / rates[my_currency] * rates[convert_to];
}

It could actually be a one-liner, since each of those variables are only used once, but this is probably more readable.

Answer 3

The form is being submitted, so the page refreshes after that. The fix is to put your listener on the form and have the submit handler call it, then return false so that the form doesn't submit. That way if javascript is disabled, not available or fails to run successfully, the form submits and you can do the conversion at the server.

A common strategy is to have a form that functions correctly without any script, then add scripting to avoid server calls where possible. To do that, you need to either add name attributes to the form controls or change the ID attributes to name attributes.

Buttons in a form are type submit by default.

To "refresh the page" you can just call the form's reset method, and you can pass a reference to the form from its submit handler so:

e.g. in the HTML:

<form name="convertions" onsubmit="return output_value(this)">

    ...
    <button>Submit</button>

and in the function:

function output_value(form) {

    // var my_currency = document.convertions.currency_to_convert.value;
    var my_currency = form.currency_to_convert.value;

    // and so on
    ...

    alert("Fatal Error, refresh the page.");
    // reset the form
    form.reset(); 

    // stop the form submitting
    return false;
}