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.

Could anyone help me figure out why it's acting this way? Thanks

website : http://nonlocalhost.uphero.com/index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style type="text/css">
        * {font-size:13px;font-family:arial;background-color:black;color:white;padding:0;margin:0;}
        #wrapper {width:640px;margin:0px auto;}

        input {color:lime;width:150px;height:22px;}
        #money_to_convert, label:nth-child(3) {position:relative;top:100px;right:95px;}
        #my_currency {width:53px;height:22px;position:relative;top:100px;left:232px;}
        #converted_input, label:nth-child(5) {position:relative;top:134px;right:298px;}
        #convert_currency {width:53px;height:22px;position:relative;top:134px;left:175px;}
        #submit_button {width:52px;height:25px;position:relative;top:117px;right:230px;}
    </style>
    <script type="text/javascript">
        function output_value() {
            var my_input = Number(document.getElementsByName("user_input")[0].value);
            var my_output;
            var my_currency = document.convertions.currency_to_convert.value;
            var convert_to = document.convertions.convert_currency_to.value;


            if(my_currency == "USD"){
                if(convert_to == "CAD"){
                    my_output = my_input * 0.975;
                    document.getElementsByName("convertion_output")[0].value = my_output;
                }else if(convert_to == "EUR"){
                    my_output = my_input * 0.775;
                    document.getElementsByName("convertion_output")[0].value = my_output;
                }else if(convert_to == "GBP"){
                    my_output = my_input * 0.620;
                    document.getElementsByName("convertion_output")[0].value = my_output;
                }else if(convert_to == "AUD"){
                    my_output = my_input * 0.956;
                    document.getElementsByName("convertion_output")[0].value = my_output;
                }else{
                    alert("You can't convert the same currency.");
                }
            }else if(my_currency == "CAD"){
                if(convert_to == "USD"){
                    my_output = my_input * 1.025;
                    document.getElementsByName("convertion_output")[0].value = my_output;
                }else if(convert_to == "EUR"){
                    my_output = my_input * 0.795;
                    document.getElementsByName("convertion_output")[0].value = my_output;
                }else if(convert_to == "GBP"){
                    my_output = my_input *  0.636;
                    document.getElementsByName("convertion_output")[0].value = my_output;
                }else if(convert_to == "AUD"){
                    my_output = my_input *  0.980;
                    document.getElementsByName("convertion_output")[0].value = my_output;
                }else{
                    alert("You can't convert the same currency.");
                }
            }else if(my_currency == "EUR"){
                if(convert_to == "USD"){
                    my_output = my_input * 1.289;
                    document.getElementsByName("convertion_output")[0].value = my_output;
                }else if(convert_to == "CAD"){
                    my_output = my_input * 1.257;
                    document.getElementsByName("convertion_output")[0].value = my_output;
                }else if(convert_to == "GBP"){
                    my_output = my_input * 0.800;
                    document.getElementsByName("convertion_output")[0].value = my_output;
                }else if(convert_to == "AUD"){
                    my_output = my_input * 1.233;
                    document.getElementsByName("convertion_output")[0].value = my_output;
                }else{
                    alert("You can't convert the same currency.");
                }
            }else if(my_currency == "GBP"){
                if(convert_to == "USD"){
                    my_output = my_input * 1.610;
                    document.getElementsByName("convertion_output")[0].value = my_output;
                }else if(convert_to == "EUR"){
                    my_output = my_input * 1.249;
                    document.getElementsByName("convertion_output")[0].value = my_output;
                }else if(convert_to == "CAD"){
                    my_output = my_input * 1.571;
                    document.getElementsByName("convertion_output")[0].value = my_output;
                }else if(convert_to == "AUD"){
                    my_output = my_input * 1.541;
                    document.getElementsByName("convertion_output")[0].value = my_output;
                }else{
                    alert("You can't convert the same currency.");
                }
            }else if(my_currency == "AUD"){
                if(convert_to == "USD"){
                    my_output = my_input * 1.045; 
                    document.getElementsByName("convertion_output")[0].value = my_output;
                }else if(convert_to == "EUR"){
                    my_output = my_input * 0.810;
                    document.getElementsByName("convertion_output")[0].value = my_output;
                }else if(convert_to == "GBP"){
                    my_output = my_input * 0.648;
                    document.getElementsByName("convertion_output")[0].value = my_output;
                }else if(convert_to == "CAD"){
                    my_output = my_input * 1.019;
                    document.getElementsByName("convertion_output")[0].value = my_output;
                }else{
                    alert("You can't convert the same currency.");
                }
            }else{
                alert("Fatal Error, refresh the page.");
            }
        }
    </script>
</head>

<body>
    <div id="wrapper">
        <form name="convertions">
            <select name="currency_to_convert" id="my_currency">
                <option value="USD" selected>USD</option>
                <option value="CAD">CAD</option>
                <option value="EUR">EUR</option>
                <option value="GBP">GBP</option>
                <option value="AUD">AUD</option>
            </select>
            <select name="convert_currency_to" id="convert_currency">
                <option value="USD">USD</option>
                <option value="CAD" selected>CAD</option>
                <option value="EUR">EUR</option>
                <option value="GBP">GBP</option>
                <option value="AUD">AUD</option>
            </select>
            <label for="user_input">Amount:</label>
            <input type="text" name="user_input" id="money_to_convert" />
            <label for="convertion_output">Result:</label>
            <input type="text" name="convertion_output" id="converted_input" disabled="disabled" />
            <button onclick="output_value()" id="submit_button">Submit</button>
        </form>     
    </div>
</body>

</html>

I understand that you're a beginner, but a handy tip is that whenever you copy/paste a line of code, chances are you're doing it wrong, and there's a *lot* of copy/paste happening there. — nickf, Sep 12 '12 at 22:52
Just to follow up on nickf's comment. Your gigantic if/else does not need to set the value of the input. It should only be done after you figure out what the conversion rate is, which is all your big if/else should be doing. Then at the end you'd just call `document.getElementsByName("convertion_output")[0].value = my_input * rate` — Ruan Mendes, Sep 12 '12 at 22:59

score 10 · Accepted Answer · edited May 23 '17 at 11:44

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

score 2 · Answer 2 · answered Sep 12 '12 at 23:02

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.

score 0 · Answer 3 · answered Sep 12 '12 at 22:56

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;
}

Javascript, page keeps refreshing after outputting results

3 Answers3