Question

i have made a small app using javascript and html.

But recently i encountered a problem with my script.

Problem : Input text box are not allowing me to enter (.)dot/periods i.e decimal values. Example: if i enter a decimal value then it is automatically deleting from my input text box.

What could be reason for this.

I am trying to solve this issue from last 3hrs. But could not found the exact problem. Please check my code and help me to solve this problem.

Relevent code:

<table border="0">
    <form name="form_A" onsubmit="return false">
        <tr>
            <td>
                <select name="unit_menu" class="Items" onchange="CalculateUnit(this.form, document.form_B)">
                    <option>
                    ------- Select a Property -------
                                                                    <option>
                    <option>
                    <option>
                    <option>
                    <option>
                </select>

            </td>
            <td>
                <input type="text" id="info" name="unit_input" placeholder="Type to convert" class="textbox" onfocus="CalculateUnit(this.form, document.form_B)" onkeyup="CalculateUnit(this.form, document.form_B)"></td>

        </tr>
    </form>
    <form name="form_B" onsubmit="return false">
        <tr>

            <td>
                <select name="unit_menu" class="Items" onchange="valuefocus()">
                    <option>
                    ------- Select a Property -------
                    <option>
                    <option>
                    <option>
                    <option>
                    <option>
                </select></td>
            <td>
                <input type="text" name="unit_input" size="20" maxlength="20" placeholder="Type to convert" class="textbox" onfocus="CalculateUnit(this.form, document.form_A)" onkeyup="CalculateUnit(this.form, document.form_A)"></td>
            <td></td>
        </tr>
    </form>
</table>

Javascript

         function CalculateUnit(sourceForm, targetForm){
            // A simple wrapper function to validate input before making the conversion
            var sourceValue = sourceForm.unit_input.value;

            // First check if the user has given numbers or anything that can be made to
            // one...
            sourceValue = parseFloat(sourceValue);
            if ( !isNaN(sourceValue) || sourceValue == 0){
                // If we can make a valid floating-point number, put it in the
                // text box and convert!
                sourceForm.unit_input.value = sourceValue;
                ConvertFromTo(sourceForm, targetForm);
            } else {
                 //wrong input
            }
        }

Answer 1

Your problem is that your conversion function is triggered on keyup, so if the users types 3. it is converted to 3 and put back into the field.

parseFloat(3.) = 3

There are several ways to solve this issue.

The simplest would be to not calculate the value on keyup but when the user hits enter or the field loses focus (blur).

Other option would be to check the string value of the field if it ends with a . before you parse it and leave it unchanged as long it isn`t a valid number.

Example:

function CalculateUnit(sourceForm, targetForm){

    // A simple wrapper function to validate input before making the conversion
    var sourceValue = sourceForm.unit_input.value;

    // First check if the user has given numbers or anything that can be made to
    // one...
    if (!/\.$/.test(sourceValue)) {
        sourceValue = parseFloat(sourceValue);
        if ( !isNaN(sourceValue) || sourceValue == 0){
            // If we can make a valid floating-point number, put it in the
            // text box and convert!
            sourceForm.unit_input.value = sourceValue;
            ConvertFromTo(sourceForm, targetForm);
        } else {
             //wrong input
        }
    } else {
        // sourceValue ends with a '.'
    }
}