CODEWITHSUNDEEP
javascript
molecoder
molecoder

Reputation: 473

Process number input in JavaScript form

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:

bs1

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:

newbs

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

Upvotes: 3

Views: 730

Answers (1)

Randy Casburn
Randy Casburn

Reputation: 14165

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.

Upvotes: 3

Related Questions