Parsing XML into multiple form fields using Jquery

JaniNNeTelameEs

New Member
What I want to do: i) Parse XML data into a select option field ii) when user makes a selection using the option box, many more form fields are then populated with relevant XML data based on the user selection.I have this working with Adobe Spry (what is that I hear you cry!!!) - Currently, the user selects an option box which contains data from XML , for example "American Wigeon" which when selected then populates other form fields with the rest of the XML, such as "Turdus migratorius" and so on. If the user changes their mind and selects another, for example "American Robin", the relevant XML for this bird will then populate the form fields.I have found answers on here for getting parsed data into a select option, but cannot work out the next bit of using multiple fields.My XML file looks like this (edited down to two entries, but approx 300 normally):\[code\]<?xml version="1.0" encoding="utf-8" ?><BIRD><Result><name>American Wigeon</name><latin>Anas americana</latin><rare>1</rare><id>68</id><breed>0</breed><winter>0</winter></Result><Result><name>American Robin</name><latin>Turdus migratorius</latin><rare>1</rare><id>255</id><breed>0</breed><winter>0</winter></BIRD>\[/code\]I would like to get this to work in jQuery so I can start to add more functionality to the script.Any help would really be appreciated.Many thanksMarkEDIT up date:I like the script written by Charlietfi and have tested this on jsFiddle (many thanks) - I am now having problems appending the additional XML data to form fields. As an example, if I select American Wigeon, I then want to put the additional XML data into FORM fields, that can then be submitted (so the value of "Rare" would go into a text field")I can get sample text into a form field BUT cannot get the selected additonal XML data in - CODE example below:\[code\]var xml = '<?xml version="1.0" encoding="utf-8" ?><BIRD><Result><name>American Wigeon</name><latin>Anas americana</latin><rare>1</rare><id>68</id><breed>0</breed><winter>0</winter></Result><Result><name>American Robin</name><latin>Turdus migratorius</latin><rare>1</rare><id>255</id><breed>0</breed><winter>0</winter></Result></BIRD>';var $xml = $($.parseXML(xml));$xml.find('Result').each(function() {var data=http://stackoverflow.com/questions/10906371/{}$(this).children().each(function() { data[this.tagName]=$(this).text();}) $('#test').data( data.id, data).append('<option value="'+data.id+'">'+data.name+'</option>'); }); $('#test').change(function(){var data=http://stackoverflow.com/questions/10906371/$(this).data( $(this).val()); var input = $("#test2" ); // **this being the name of my text field** input.val( input.val() + "more text" ); alert('ID:'+data.id +', Name:'+ data.name); })\[/code\]When the script runs, I select a bird from the option, this then brings up an alert box as expected PLUS inserted into the text field is "More text" (used this to make sure something gets added). I am stuck on how to use" +data.id + " and get that into #test2Many thanks for every ones help and apologies if this is such a simple thing that I am missing.
 
Back
Top