Reputation: 481

Javascript, page keeps refreshing after outputting results

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>

Upvotes: 1

Answers (3)

nickf

Reputation: 546273

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.

Upvotes: 2

RobG

Reputation: 147453

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

Upvotes: 0

Ruan Mendes

Reputation: 92314

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

Upvotes: 10

Javascript, page keeps refreshing after outputting results

Answers (3)

Related Questions