Programming a binary to decimal conversion form - What isn't working with my code? (JavaScript and HTML5)

Question

I have a simple HTML form like so

<form class="TextCenter" onSubmit="ConversionScript">
    <input type="radio" name="Conversion" value="BintoDec" checked onClick="document.getElementById('stringToConvert').value='10000001 to 129';" /> Binary to Decimal
        <br />
    <input type="radio" name="Conversion" value="DectoBin" onClick="document.getElementById('stringToConvert').value='129 to 10000001'"/> Decimal to Binary
        <br />
        <br />
    String to Convert: 
    <input type="text" id="StringToConvert" value="10000001 to 129" onClick="document.getElementById('stringToConvert').value=''" />
        <br />
        <br />
    <input type="submit" />
</form>

When the user selects an input type, they enter a string such as "10000000" or "129". Then, on form submission, it is converted based on the user's choice by JavaScript like this:

/* Misc. Global functions and variables (not used on their own or by one singular thing) */
function GetRadioValue() {
    var inputs = document.getElementsByName("Conversion");
    for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].checked) {
            return inputs[i].value;
        }
    }
}

var stringToConvertRaw = document.getElementById("StringToConvert");
var stringToConvert = parseFloat(stringToConvertRaw.replace(/\D/g,''));
/* End Section */
/* Main Handler Function (initates lower level functions) */
function ConversionScript() {
    var radioValue = GetRadioValue();

    if (radioValue == "BintoDec")
    {
        BinaryToDecimal();
    }
    else if (radioValue == "DecToBin")
    {
        DecimalToBinary();
    }
}
/* End Section */
/* Function to Convert Binary to Decimal */
function BinaryToDecimal() {
    var conversionArray = stringToConvert.split('').reverse();
    var decimalSum = 0;

    for (var i = 0; i < conversionArray.length; i++) {
        if (conversionArray[i] === 1) {
            decimalSum += Math.pow(2, i);
        }
    }

    alert("The binary string " + stringToConvert + " is " + decimalSum + " .");
}
/* End Section */

However, for some reason, on form submission, nothing happens except the page reloads. No alert, nothing. Is there something wrong with my code's syntax (I've been working with Java so that's a possibility) or have I made a different kind of error? (I've looked over it a hundred times and haven't found the problem so... I thought some fresh eyes might help.)

Answer 1

Since you're not really submitting a form I would convert your submit input to a button and move the onSubmit attribute to an onclick attribute on the button.

<form class="TextCenter">
    <input type="radio" name="Conversion" value="BintoDec" checked onClick="document.getElementById('stringToConvert').value='10000001 to 129';" /> Binary to Decimal
    <br />
    <input type="radio" name="Conversion" value="DectoBin" onClick="document.getElementById('StringToConvert').value='129 to 10000001'" /> Decimal to Binary
    <br />
    <br /> String to Convert:
    <input type="text" id="StringToConvert" value="10000001 to 129" onClick="document.getElementById('stringToConvert').value=''" />
    <br />
    <br />
    <button type="button" onclick="ConversionScript()" />Submit</button>
</form>

With that said, it's generally considered a bad practice to add onclick and onsubmit attributes to markup. You should bind everything with even listeners in the JavaScript.

Also, you had some syntactical errors in your script so i cleaned them up here:

/* Misc. Global functions and variables (not used on their own or by one singular thing) */
function GetRadioValue() {
    var inputs = document.getElementsByName("Conversion");
    for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].checked) {
            return inputs[i].value;
        }
    }
}

var stringToConvertRaw = document.getElementById("StringToConvert").value;
var stringToConvert = parseFloat(stringToConvertRaw.replace(/\D/g,''));
/* End Section */
/* Main Handler Function (initates lower level functions) */
function ConversionScript() {
    var radioValue = GetRadioValue();

    if (radioValue == "BintoDec")
    {
        BinaryToDecimal();
    }
    else if (radioValue == "DecToBin")
    {
        DecimalToBinary();
    }
}
/* End Section */
/* Function to Convert Binary to Decimal */
function BinaryToDecimal() {
    var conversionArray = stringToConvert.toString().split('').reverse();
    var decimalSum = 0;

    for (var i = 0; i < conversionArray.length; i++) {
        if (conversionArray[i] === 1) {
            decimalSum += Math.pow(2, i);
        }
    }
  }

Answer 2

When you submit a form, the default action will force a page reload. You can return false at the end of the form's onSubmit to prevent this. Try replacing onSubmit="ConversionScript" with onSubmit="ConversionScript(); return false;