Parsing XML into multiple form fields using Jquery

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.

charlietfl · Accepted Answer · 2012-06-06 03:31:35Z

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/

answered Jun 6, 2012 at 3:31

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Melph Over a year ago

I've added an edit update - I can update a form field (input field) with some text as the script runs, but I cannot get the additional XML data associated with the select option to populate input fields - Sorry is this a trivial thing I am missing.

Melph Over a year ago

Done it - var input = $( "#test2" ); input.val(input.val()+data.id); var input = $( "#test3" ); input.val(input.val()+data.rare); var input = $( "#latin" ); input.val(input.val()+data.latin);

Blair McMillan · Accepted Answer · 2012-06-06 02:26:56Z

0

I assume you are using jQuery.parseXML() to do the actual parsing. Then you can do something like the following (wrapping it in a DOMReady function of course):

var xmlDoc = $.parseXML(yourXML),
$xml = $( xmlDoc );

$xml.find('Result').each(function () {
    $this = $(this); // $this is now the <Result> node
    // Assuming you populating a <select> list
    var newOption = $('<option/>').text($this.find('name').text()).val($this.find('name').text());
    // Populate the additional data that we'll be able to use elsewhere
    newOption.data('latin', $this.find('latin').text());
    newOption.data('rare', $this.find('rare').text());
    // etc...

    // Add the newOption to your existing <select> element
    $('#mySelectList').append(newOption);
});

// Then later on we can deal with the <option> being selected
$('#mySelectList').on('change', function() {
    $selected = $(this).find('option:selected');
    // Do whatever you need to do with the data... Update HTML, populate form fields etc.
    console.log('name', $selected.text());
    console.log('latin', $selected.data('latin');
    console.log('rare', $selected.data('rare');
    // etc...
});

answered Jun 6, 2012 at 2:26

Blair McMillan

5,3492 gold badges28 silver badges45 bronze badges

2 Comments

charlietfl Over a year ago

you might be interested in more dynamic method to parse XML to object that saves quite a bit of manual coding

Melph Over a year ago

var input = $( "#test2" ); input.val(input.val()+data.id); var input = $( "#test3" ); input.val(input.val()+data.rare); var input = $( "#latin" ); input.val(input.val()+data.latin);

Collectives™ on Stack Overflow

Parsing XML into multiple form fields using Jquery

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related