Two dimensional array to calculate amount in a form,javascript -

i have order form user selects quality of image(from dropdownlist),type of item(from radio button),glossy finish(checkbox checked $1) , quantity(textbox),based on selection of user when clicks on calculate button cost of selected items textbox should populate total amount.

(qualityofimage) hard-copy poster coffee mug t-shirt (type of item)

good 8.99 9.99 10.99 11.99 9.99 10.99 11.99 12.99 excellent 10.99 11.99 12.99 13.99

for example: if quality of image good,type of item hard-copy,glossy finish checked , quantity 1: total amount=(8.99+1)*1.

i new javascript , tried using 2 dimensional array calculate amount not getting correct result.any appreciated.

html code:

<form id="orderform" name="orderform">             <!--order form-->         <div id="items">             types of items             <input type="radio" id="items" name="items" value="1" >hard-copy prints             <input type="radio" id="items" name="items" value="2" >posters             <input type="radio" id="items" name="items" value="3" >coffee mugs             <input type="radio" id="items" name="items" value="4" >t-shirts         </div> <div id="qualityofimage">             quality of images             <select name="quality" id="quality">                 <option value="1" selected>good</option>                 <option value="2">very good</option>                 <option value="3">excellent</option>             </select>             </div> <div>         glossy finish             <input type="checkbox" name="gf" id="gf">             </div>         <div>quantity             <input type="text" id ="qty" name="qty" size="5">             </div>             <div><input type="button" id="calculate" value="calculate" onclick="display()"></div> <div>total           <input type="text" id="cost" name="cost" readonly="readonly">           </div>                 </form> 

javascript

var array=[[8.99,9.99,10.99],[9.99,10.99,11.99],[10.99,11.99,12.99],[11.99,12.99,13.99]]; function display() {     var row = document.queryselector('input[name="quality"]:selected').value;    var column = document.queryselector('input[name="items"]:checked').value;     var gf=document.getelementbyid("gf");     var qty=document.getelementbyid("qty").value;     var total=0;     if(gf.checked)     {         total= (array[row][column]+1)*qty;     }     else     {         total= (array[row][column])*qty;     }    document.getelementbyid("cost").value = total; } 

there's 1 issue: :selected jquery selector, won't work document.queryselector.

you're looking $("select option:selected").

so, it'd be:

var row = $('select option:selected').val(); 

once changed that, worked fine.

demo