Json dropdown list error

Question

Iam newbi on json code I will appreciate if anybody can help me with this error: I have got Car model+Year+deposit+price

when the user first click model than choose year and deposit show monthly amount pay back.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Cars</title>
<link href="css/cakeform.css" rel="stylesheet" type="text/css" />
<script>
var prices = {
'model' : 'Skoda' {
'1' : {
    '12300' : '959',
    '13000' : '892',
    '13500' : '844',
    '19000' : '317'
},
'2' : {
    '12300' : '542',
    '13000' : '504',
    '13500' : '477',
    '19000' : '179'
},
'3' : {
    '12300' : '403',
    '13000' : '375',
    '13500' : '355',
    '19000' : '133'
}
};
    'Tiida' {
'1' : {
    '12300' : '955',
    '13000' : '892',
    '13500' : '844',
    '19000' : '317'
},
'2' : {
    '12300' : '555',
    '13000' : '504',
    '13500' : '477',
    '19000' : '179'
},
'3' : {
    '12300' : '455',
    '13000' : '375',
    '13500' : '355',
    '19000' : '133'
}
};
};
  onload = function(){
var f = document.booklets;
var model = f.model;
var qtyEl = f.qty;
var pagesEl = f.pages;
var priceEl = document.getElementById('price');
f.qty.onchange = f.pages.onchange = f.model.onchange = function(){
    var qty   = qtyEl[qtyEl.selectedIndex].value;
    var model = modelEl[modelEl.selectedIndex].value;
    var pages = pagesEl[pagesEl.selectedIndex].value
    priceEl.innerHTML = prices[pages][qty][model];
};
f.qty.onchange();//initialise price field for whatever values are selected on page   load
 };
 </script>
 </head>
 <body>

 <fieldset>
 <legend>Cars</legend>
 <form name="booklets" method="" action="">
<div>Select Model:
<select class="selectClass" name="model">
    <option value="Skoda">Skoda</option>
    <option value="Tiida">Tiida</option>
    <option value="Tyota">Toyota</option>
</select>
<div>Select Year:
<select class="selectClass" name="pages">
    <option value="1">1 Year</option>
    <option value="2">2 Years</option>
    <option value="3">3 Years....</option>
</select>
<br><br>Select Deposit:
<select class="selectClass" name="qty">
    <option value="12300">$12300</option>
    <option value="13000">$13000</option>
    <option value="13500">$13500</option>
</select>
   </div>
   <div><br>Monthly Payment: <font color="blue" size=7>$ <span id="price"></span> </font>       </div>
  </form>
 </fieldset>
 </body>
 </html>

thanks in advance:

Michal · Accepted Answer · 2013-08-25 09:24:06Z

Your JSON was not valid, so that had to be fixed. You should use " instead of ' for valid JSON, and use something like JSONLint to check for bad commas and brackets.

Fixed JSON variable:

var prices = {
    "Skoda": {
        "1": {
            "12300": "959",
            "13000": "892",
            "13500": "844",
            "19000": "317"
        },
        "2": {
            "12300": "542",
            "13000": "504",
            "13500": "477",
            "19000": "179"
        },
        "3": {
            "12300": "403",
            "13000": "375",
            "13500": "355",
            "19000": "133"
        }
    },
    "Tiida": {
        "1": {
            "12300": "955",
            "13000": "892",
            "13500": "844",
            "19000": "317"
        },
        "2": {
            "12300": "555",
            "13000": "504",
            "13500": "477",
            "19000": "179"
        },
        "3": {
            "12300": "455",
            "13000": "375",
            "13500": "355",
            "19000": "133"
        }
    }
};

Then you had a typo or two in your code, and you were accessing the JSON data incorrectly. You have to make sure to access it based on the hierarchy in the structure. Here, that means prices[model][pages][qty].

Fixed onload function:

window.onload = function() {
    var f = document.booklets;
    var modelEl = f.model;
    var qtyEl = f.qty;
    var pagesEl = f.pages;
    var priceEl = document.getElementById('price');
    f.qty.onchange = f.pages.onchange = f.model.onchange = function () {
        var qty = qtyEl[qtyEl.selectedIndex].value;
        var model = modelEl[modelEl.selectedIndex].value;
        var pages = pagesEl[pagesEl.selectedIndex].value;
        priceEl.innerHTML = prices[model][pages][qty];
    };
    //initialise price field for whatever values are selected on page   load
    f.qty.onchange(); 
};

DEMO: http://jsfiddle.net/eGQr2/

Collectives™ on Stack Overflow

Json dropdown list error

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related