jQuery to calculate live output based on form entries

Question

I have a form. The user will fill it out, and at the bottom of that form I am trying to display a value based values inserted into the form page.

I'm so far not getting any kind of output at all, here is my attempt:

HTML FORM:

<form id="myform">
 <select   
            name="sv_313"
            onchange="calculate()"
            id="sv_313"
        >
                <option value="Select One">Select One</option>
                <option value="0.1">A</option>
                <option value="0.2">B</option>
                <option value="0.3">C</option>
        </select>
<br/>
           <input 

                type="number" 
                name="sv_312" 
                size="10" 
                maxlength="10"
                onblur="calculate()"
                id="sv_312" 
            />


Calculated value 
            <div id="coverage"> </div>

</form>

The javascript:

<script>
//define an array for the possible values input via select menu
var spv = new Array();
spv["A"]=0.1;
spv["B"]=0.2;
spv["C"]=0.3;


//function to get the value from select menu
function getSAMprevalence()
{
var SAMprevalence=0;    
var theForm = document.forms["myform"];
var selectedSAMprevalence = theForm.elements["sv_313"];
SAMprevalence = spv[selectedSAMprevalence.value]
return SAMprevalence;
}

//function to get the value from input field
function getInputvalue()
{
var Inputvalue=0;   
var theForm = document.forms["myform"];
var Inputvalue = theForm.elements["sv_312"];
return Inputvalue;
}

//function to calculate using these two functions, and output into div named coverage:
function calculate()
{
var treatmentCoverage = getSAMprevalence() + getInputvalue();
document.getElementById('coverage').innerHTML =
                                      ""+treatmentCoverage;
}
    </script>

I am really not experienced with javacsript or anything really, any pointers would be very appreciated. Thanks!

EDIT: here is a jsfiddle with it set up in, illustrating the lack of any output :( http://jsfiddle.net/rHu8J/3/

score 3 · Accepted Answer · answered Oct 03 '12 at 01:15

3

Try using jQuery ..

DEMO

$(function() {
    $('#sv_313').on('change', function() {
        calculate();
    });

    $('input[name=sv_312]').on('blur', function() {
        calculate();
    });
});

function calculate() {
    var $select = $('#sv_313').val();
    var $text = $('input[name=sv_312]').val();

    if ($select == undefined || $select == '' ||$select == 'Select One') {
        $select = 0;
    }
    else {
        $select = parseFloat($select);
    }
    //
    if ($text == undefined || $text == '') {
        $text = 0;
    }
    else {
        $text = parseFloat($text);
    }

    $('.coverage').html($select + $text);
}

answered Oct 03 '12 at 01:15

Sushanth --

55,259
9
66
105

This solution seems perfect - it works great in js Fiddle, but I can't make it work in my real code - there is something conflicting with the other js I have (I know this because if I remove it all it works fine!). Should I be enclosing this in `$(document).ready(function() {});` ? – Gideon Oct 03 '12 at 17:56
Make sure the events are inside the DOM ready event.. The function can be placed outside of it – Sushanth -- Oct 03 '12 at 17:58
Thanks - got it working, I'm not great at understanding the order javascript needs to go in, but this seems to be working when placed in the header of my main template rather than the body :) Thanks! – Gideon Oct 03 '12 at 21:09

score 2 · Answer 2 · answered Oct 03 '12 at 01:35

HTML:

<form id="myform">
    <select name="sv_313" onchange="calculate()" id="sv_313">
        <option value="0">Select One</option>
        <option value="0.1">A</option>
        <option value="0.2">B</option>
        <option value="0.3">C</option>
    </select>
    <br/>
    <input type="number" id="sv_312" size="10" maxlength="10" onchange="calculate()"/>
</form>
Calculated value 
<div id="coverage"></div>

Javascript:

function calculate() {
    var myForm = document.forms['myform'];
    var selectVal = myForm.elements['sv_313'].value;
    var inputVal = myForm.elements['sv_312'].value;
    if(!inputVal) inputVal = 0;
    document.getElementById('coverage').innerHTML = parseFloat(selectVal) + parseInt(inputVal);
}

score 0 · Answer 3 · edited May 23 '17 at 12:27

0

I believe your error is when you get the selected option. Try this instead:

SAMprevalence = spv[selectedSAMprevalence.options[selectedSAMprevalence.selectedIndex].text]

thanks to: Get selected value in dropdown list using JavaScript?

edited May 23 '17 at 12:27

Community

1
1

answered Oct 03 '12 at 00:57

MikeB

2,402
1
15
24

I just saw that! it was an error in my example making... I edited it as my actual code does not have this error... still no joy. Thanks for input. – Gideon Oct 03 '12 at 00:58

jQuery to calculate live output based on form entries

3 Answers3