Process number input in JavaScript form

Question

I'm building a form that allows to calculate the Bishop Score: https://jsfiddle.net/molecoder/zv2kww5a/3/ .

As you can see, the user doesn't need to submit any form in order for the Bishop Score value to appear.

In the first stage, all the form inputs were built using inputs of type radio as you can see in the next image:

Well, now there's a problem with that implementation... The user needs to be able to write a number (between 0 and 10) in the dilation just like in the following image:

This saying, needed a more effective way. Having an input number with minimum and maximum defined between 0 and 10, allowing up to two decimal places (step=".01") is what i am looking for. The HTML code, in that section, got modified to:

<label><b>Dilation</b></label><br/>
<input type="number" id="selecteddilation" min="0" max="10" step=".01" name="selecteddilation" value="2"/><br/>

I can get the value of the input in JavaScript with input's id for example:

var dilation = document.getElementById('selecteddilation').value;

The current code can be seen here: https://jsfiddle.net/molecoder/00Lsx5mq/16/

How can the getDilation() function return that input?

// getDilation() finds the points based on the dilation.
// Here, we need to take user's the selection from radio button selection
function getDilation()
{  
    var dilationPoints=0;
    //Get a reference to the form id="bishopform"
    var theForm = document.forms["bishopform"];
    //Get a reference to the dilation the user Chooses name=selecteddilation":
    var selectedDilation = theForm.elements["selecteddilation"];
    //Here since there are 4 radio buttons selectedDilation.length = 4
    //We loop through each radio buttons
    for(var i = 0; i < selectedDilation.length; i++)
    {
        //if the radio button is checked
        if(selectedDilation[i].checked)
        {
            //we set dilationPoints to the value of the selected radio button
            //i.e. if the user choose the 0 cm we set it to 0
            //by using the dilation array
            //We get the selected Items value
            //For example dilation["Round11".value]"
            dilationPoints = dilation[selectedDilation[i].value];
            //If we get a match then we break out of this loop
            //No reason to continue if we get a match
            break;
        }
    }
    //We return the dilationPoints
    return dilationPoints;
}

Your first line of code - no, not even that, the *comment* before it - shows me you need to re-learn some things. There is no such thing as an "associative array" in JavaScript. You want an Object. — Niet the Dark Absol, May 12 '18 at 13:27
In this case arguing about object vs associative array is semantics and not useful. For some background on the distinction there's https://stackoverflow.com/questions/8146104/whats-the-difference-between-objects-and-associated-array-in-javascript. Suffice to say there's a difference and people like to argue about it. — Dave Newton, May 12 '18 at 13:40
ok, got it. If we use named indexes, JavaScript will redefine the array to a standard object. — molecoder, May 12 '18 at 13:50
@molecoder - it isn't just about arguing about something pedantic as Dave suggests - it is about the underlying API that is available for any given construct. Objects and Arrays have different APIs - its that simple. — Randy Casburn, May 12 '18 at 13:51

Randy Casburn · Accepted Answer · 2018-05-12T14:10:23.930

This is is most direct way to retrieve the numeric value from that input field:

function getDilation()
{  
    return parseFloat(document.querySelector('#selecteddilation').value);
}

Please note the use of parseFloat() here. In each of your functions used to calculate your result you are returning a string. It is highly recommended you cast those strings into integers/floats as appropriate so that your mathematical operators don't do it automatically for you.

You can use parseInt() or the unary + operator to accomplish that for the integers.

EDIT

In response to your question about not updating the result, you'll also need to include an event listener:

 onchange="calculateTotalBishop()" //in style of your other listeners

to the HTML element.

well, I don't know, I didn't write the logic in your program, but I'll take a look and get back to you. — Randy Casburn, May 12 '18 at 14:07

Process number input in JavaScript form

1 Answers1