CODEWITHSUNDEEP
javascriptjqueryhtmlxml
Danimp
Danimp

Reputation: 99

XML parsing with jQuery and populate text fields

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

Upvotes: 2

Views: 447

Answers (1)

lshettyl
lshettyl

Reputation: 8181

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.

Upvotes: 1

Related Questions