Question

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):

<?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>

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 thanks

Mark

EDIT 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:

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={}
$(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=$(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);    
  })

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 #test2
Many thanks for every ones help and apologies if this is such a simple thing that I am missing.

Answer 1

Following will dynamically parse the XML, creating both an option and a data object which will be stored on select element using jQuery data()

var $xml = $($.parseXML(xml));

$xml.find('Result').each(function() {
    var data={};
    /* loop over children of each "Result to create data object*/
    $(this).children().each(function() {
        data[this.tagName]=$(this).text();
    });
    /* add data to select and create option*/
    $('#test').data( data.id , data).append('<option value="'+data.id+'">'+data.name+'</option>');
});

/* change handler for select*/
$('#test').change(function(){
    var data=$(this).data( $(this).val()); 
    /* here you would make updates to other fields */   
     alert('ID:'+data.id +', Name:'+ data.name);    
})

DEMO: http://jsfiddle.net/dpK7x/1/