javascript - Using XML to populate an HTML page based on user defined options -
i have list of products want return user depending on selection 3 options. kicker has static page nothing more fancy javascript, html , xml. form along lines of:
<label for="field_1">how spending?</label><select name="field_1" id="cf_field_1" class="cformselect" > <option value="sub10">less £10</option> <option value="10-20">£10 - £20</option> <option value="20-30">£20 - £30</option> <option value="30-40">£30 - £40</option> </select> <label for="field_2">colour?</label><select name="field_2" id="cf_field_2" class="cformselect" > <option value="red">red</option> <option value="blue">blue</option> <option value="yellow">yellow</option> </select> <label for="field_3">what important?</label><select name="field_3" id="cf_field_3" class="cformselect" > <option value="taste">taste</option> <option value="look">how looks</option> <option value="transport">how easy carry</option> </select> there 7 possible product , there more 1 suit selected criteria - times when nothing suitable. questions have makes 48 possible results. possible more products added in time.
the return description of product in formatted text (happy hold in html rather xml).
i'm thinking xml like:
<?xml version="1.0" encoding="iso-8859-1"?> <productset> <product> <name>prod 1</name> <value>sub10</value> <value>10-20</value> <colour>red</colour> <colour>blue</colour> <colour>yellow</colour> <feature>taste</feature> <body> <p>lorem ipsum</p> <p> <a href="/prod_1.html"></a> </p> </body> </product> <product> <name>prod 2</name> <value>20-30</value> <colour>red</colour> <colour>yellow</colour> <feature>taste</feature> <body> <p>lorem ipsum</p> <p> <a href="/prod_2.html"></a> </p> </body> </product> <product> <name>prod 3</name> <value>sub10</value> <value>30-40</value> <colour>red</colour> <colour>yellow</colour> <feature>carry</feature> <body> <p>lorem ipsum</p> <p> <a href="/prod_3.html"></a> </p> </body> </product> </productset> i'm new level , , appreciated in how right products returned.
supposing have retrieved xml string in variable called xml:
var parser = new domparser(); var xml_obj = parser.parsefromstring(xml, "text/xml"); // xml_obj dom document var products = xml_obj.getelementsbytagname("products"); // process need for(var i=0; < products.length; i++){ console.log("found product: " + products[i].getelementsbytagname("name")[0].textcontent); } this take work, may consider using jquery or similar library, should reduce lot code access values. see this example.
Comments
Post a Comment