Display XML content in HTML page to create form elements

Question

I have application in which check-box tree is present. I want to pre-populate the check-box's if user before checked some of those check box.

For that am getting XML format from my back-end perl script as shown below.like, in below XML only 0, 43,44,45,46 and 50 are coming so only those respective checkbox need to checked on page load.I want to display those checked check-box on page load by calling perl script from blackened parsing XMl .How can I do this?

<perldata> 
 <hashref memory_address="0x86f4880"> 
  <item key="0">1</item> 
 </hashref> 
</perldata> 
<perldata> 
 <hashref memory_address="0x86f4880"> 
  <item key="43">1</item> 
 </hashref> 
</perldata> 
<perldata> 
 <hashref memory_address="0x86f4880"> 
  <item key="44">1</item> 
 </hashref> 
</perldata> 
<perldata> 
 <hashref memory_address="0x86f4880"> 
  <item key="45">1</item> 
 </hashref> 
</perldata> 
<perldata> 
 <hashref memory_address="0x86f4880"> 
  <item key="46">1</item> 
 </hashref> 
</perldata> 
<perldata> 
 <hashref memory_address="0x86f4880"> 
  <item key="50">1</item> 
 </hashref> 
</perldata>

where's the html to match this to? WHat have you tried? Show code attempts — charlietfl
– charlietfl, Commented Oct 20, 2012 at 21:13

Sameera Thilakasiri · Accepted Answer · 2012-10-22 07:49:18Z

I read a flat XML file , you would read from your PERL program.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script type="text/javascript">
    $(helloWorld)
    function helloWorld() {
        $.ajax({
            url: 'perldata.xml',
            success: function(data) {
                $('[key]',data).each(function(){
                    $('#chk_'+$(this).attr('key')).prop('checked',true)
                })
            }
        })
    }
    </script>
    <title>perlData</title>
</head>
<body>
<div id="message">
<form>
<input id='chk_0' type='checkbox' />0<br />
<input id='chk_1' type='checkbox' />1<br />
<input id='chk_2' type='checkbox' />2<br />
<input id='chk_3' type='checkbox' />3<br />
<input id='chk_4' type='checkbox' />4<br />
<input id='chk_5' type='checkbox' />5<br />
<input id='chk_6' type='checkbox' />6<br />
<input id='chk_7' type='checkbox' />7<br />
<input id='chk_8' type='checkbox' />8<br />
<input id='chk_9' type='checkbox' />9<br />
<input id='chk_10' type='checkbox' />10<br />
<input id='chk_11' type='checkbox' />11<br />
<input id='chk_12' type='checkbox' />12<br />
<input id='chk_13' type='checkbox' />13<br />
<input id='chk_14' type='checkbox' />14<br />
<input id='chk_15' type='checkbox' />15<br />
</form>
</div>

</body>
</html>

charlietfl · Accepted Answer · 2012-10-20 22:12:50Z

1

Here's a demo that makes ajax request for the xml and parses the item keys as ID for checkboxes

Woring Demo: http://jsfiddle.net/592At/1/

$.get(pathToXmlFile, function(response) {

    $(response).find('perldata').each(function(i) {
        var itemKey = $(this).find('item').attr('key');
        $('#'+itemKey).prop('checked',true)        
    });

})

answered Oct 20, 2012 at 22:12

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Collectives™ on Stack Overflow

Display XML content in HTML page to create form elements

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related