XML parsing with jQuery and populate text fields

Question

I have an XML file, with all my data, and I need to populate text fields from this XML file data. There's also a dropdown with the name of each main section in the XML that can be selected. If someone selects "M-A L" in the droplist for example, it should populate the text fields in the HTML file with the data from the section in the XML. And each text fields should be linked with the data in the XML.

Here's my html code :

<select id="Bname">
    <option value="">Please Select</option>
    <option value="M-A">M-A L</option>
    <option value="AP">Alain P</option>
</select>

<input type="text" id="name">
<input type="text" id="title">
<input type="text" id="line1">

Here's my jQuery code :

<script type="text/javascript">  
$(document).ready(function()
{
  $.ajax({
    type: "GET",
    url: "signatures.xml",
    dataType: "xml",
    success: parseXml
  });  });


function parseXml(xml)
{
  $(xml).find("Signature").each(function()
  {
    $("#name").val($(this).find("Nom").text);
    $("#title").val($(this).find("PG-Ligne1").text);
    $("#line1").val($(this).find("PG-Ligne2").text);
  });

}

</script>

And my XML file :

<?xml version="1.0" encoding="utf-8" ?>
<SignaturesNovatech>
  <Signature name="M-A L">
    <Nom>asd</Nom>
    <PG-Ligne1>Representative</PG-Ligne1>
    <PG-Ligne2>Cleaner</PG-Ligne2>
    <PG-Ligne3>3223 Metro street</PG-Ligne3>
    <PG-Ligne4>1-438-234-4453</PG-Ligne4>
    <PD-Ligne1>www.website.com</PD-Ligne1>
    <PD-Ligne2>[email protected]</PD-Ligne2>
    <PD-Ligne3>City here</PD-Ligne3>
    <PD-Ligne4>Postal code</PD-Ligne4>
    <PD-Ligne5>Services available</PD-Ligne5>
    <PD-Ligne6>Graphic</PD-Ligne6>
  </Signature>
<Signature name="Alain P">
    <Nom>asd</Nom>
    <PG-Ligne1>Representative</PG-Ligne1>
    <PG-Ligne2>Cleaner</PG-Ligne2>
    <PG-Ligne3>3223 Metro street</PG-Ligne3>
    <PG-Ligne4>1-438-234-4453</PG-Ligne4>
    <PD-Ligne1>www.website.com</PD-Ligne1>
    <PD-Ligne2>[email protected]</PD-Ligne2>
    <PD-Ligne3>City here</PD-Ligne3>
    <PD-Ligne4>Postal code</PD-Ligne4>
    <PD-Ligne5>Services available</PD-Ligne5>
    <PD-Ligne6>None</PD-Ligne6>
  </Signature>
</SignaturesNovatech>

I know there's a missing part for the "onchange" dropdown item thing. The options in the dropdown menu should be the text...and it should scan the XML file to detect if there's a new entry there.

I'm new to XML and jQuery parsing. Thanks a lot

$(this).find("PG-Ligne1").text; -> you have missed a () ==> $(this).find("PG-Ligne1").text(); — lshettyl
– lshettyl, Commented Jun 2, 2015 at 12:30
Thanks a lot LShetty! Now the data is displaying correctly in the fields. Now the only thing I need to figure it is how to make the dropdown menu options taking the name attribute of each <Signature> part of the XML to create an option. So in my code right now, the 2 options in the dropdown would be "M-A L" and "Alain P". Also, when I select one of them, (Alain P for example), I need it to go parse the "Alain P" Signature section and return the values in the text fields based on the ID of each of them...this should happen "onchange". Thanks again a lot — Danimp
– Danimp, Commented Jun 2, 2015 at 12:43

lshettyl · Accepted Answer · 2015-06-02 12:57:14Z

So, here is a quick and dirty version of what you're after. See if this is what you wanted.

var xml = '<?xml version="1.0" encoding="utf-8" ?><SignaturesNovatech><Signature name="M-A L"><Nom>asd</Nom><PG-Ligne1>Representative</PG-Ligne1><PG-Ligne2>Cleaner</PG-Ligne2><PG-Ligne3>3223 Metro street</PG-Ligne3><PG-Ligne4>1-438-234-4453</PG-Ligne4><PD-Ligne1>www.website.com</PD-Ligne1><PD-Ligne2>[email protected]</PD-Ligne2><PD-Ligne3>City here</PD-Ligne3><PD-Ligne4>Postal code</PD-Ligne4><PD-Ligne5>Services available</PD-Ligne5><PD-Ligne6>Graphic</PD-Ligne6></Signature><Signature name="Alain P"><Nom>asd-Alain</Nom><PG-Ligne1>Representative-2</PG-Ligne1><PG-Ligne2>Cleaner-2</PG-Ligne2><PG-Ligne3>3223 Metro street</PG-Ligne3><PG-Ligne4>1-438-234-4453</PG-Ligne4><PD-Ligne1>www.website.com</PD-Ligne1><PD-Ligne2>[email protected]</PD-Ligne2><PD-Ligne3>City here</PD-Ligne3><PD-Ligne4>Postal code</PD-Ligne4><PD-Ligne5>Services available</PD-Ligne5><PD-Ligne6>None</PD-Ligne6></Signature></SignaturesNovatech>';

$("#Bname").on("change", parseXml);

function parseXml() {
  var filter = $(this).find(":selected").text();
  var $node = $(xml).find("Signature[name='" + filter + "']");
  $("#name").val($node.find("Nom").text());
  $("#title").val($node.find("PG-Ligne1").text());
  $("#line1").val($node.find("PG-Ligne2").text());
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="Bname">
    <option value="">Please Select</option>
    <option value="M-A">M-A L</option>
    <option value="AP">Alain P</option>
</select>

<br/><br/>
<input type="text" id="name"><br/>
<input type="text" id="title"><br/>
<input type="text" id="line1">

So, your code may look like this after the necessary changes. Hope that helps.

Thanks a lot! Makes perfect sense. Weird thing is that when I changed my code, it refuses to parse the XML file. Nothing happens "onchange" when I select another option in my dropdown menu. I tried to copy and paste the code you have typed in the jsfiddle, but still not working. Everything seems fine in the code...I'm not sure I get it, Please take a look at it here : jsfiddle.net/67ut4087 Do you see anything wrong? Cause sadly I don't. Thanks a lot LShetty.
You don't need $(document).ready(function() as $(function() { is the short hand for the same. So, I have removed that from your fiddle. Bear in mind that this will not work in fiddle due to CORS.
Awesome. Thanks a bunch LShetty, you've been really helpful! (I can upvote cause I don't have enough reputation points, but if I could, I would press this button 50 times!)

Collectives™ on Stack Overflow

XML parsing with jQuery and populate text fields

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related