Search This Blog

Wednesday, 28 November 2012

How to create dropdown list box and display value in two textboxes using xml and javascript


HTML PAGE:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <script> (adsbygoogle = window.adsbygoogle || []).push({ google_ad_client: "ca-pub-9656694405771953", enable_page_level_ads: true }); </script>
    <title>Microsoft Asp.Net</title>
    <script type="text/javascript">
function round(number,X)
            {
            return Math.round(number*Math.pow(10,X))/Math.pow(10,X);
            }
            function rates (getit)
            {
            var a= getit.split("#");
            var arate = a[1];
            var aaccess = a[3];
           
            if (arate!='')
                  {
            document.getElementById('access').value=aaccess;
            document.getElementById('rate').value=arate;
                                    } else {
         document.getElementById('access').value='';
        document.getElementById('rate').value='';
                                    }
           
            }
//-->
</script>
</head>
<body>
    <form id="form1" runat="server">
<asp:Xml ID="ddlCountry" runat="server" TransformSource="~/XSLTFile.xsl" DocumentSource="~/CountriesData.xml"></asp:Xml>
<br />
    <br />
 <input class="y_use_cheers_dial_text_6" name="rate" type="text" id="rate" size="4" onFocus="document.getElementById('destination').focus()" />
    <br />
    <br />
     <input type="text" name="access" class="y_use_cheers_dial_text_6" id="access" onFocus="document.getElementById('destination').focus()" />
<br />
    <br />
    </form>
</body>
</html>

CountriesData.xml:

<?xml version="1.0" encoding="utf-8" ?>
<Countries>
  <Country>
    <ID>1</ID>
    <Name>India</Name>
    <Price>1p(Ind)</Price>
    <Access>0001</Access>
    <PriceAccess>#1p##0001####</PriceAccess>
  </Country>
  <Country>
    <ID>2</ID>
    <Name>Bangladesh</Name>
    <Price>2p(Bng)</Price>
    <Access>0002</Access>
    <PriceAccess>#2p##0002####</PriceAccess>
  </Country>
  <Country>
    <ID>3</ID>
    <Name>Singapore</Name>
    <Price>3p(Sing)</Price>
    <Access>0003</Access>
    <PriceAccess>#3p##0003####</PriceAccess>
  </Country>
  <Country>
    <ID>4</ID>
    <Name>Sri Lanka</Name>
    <Price>4p(Sri)</Price>
    <Access>0004</Access>
    <PriceAccess>#4p##0004####</PriceAccess>
  </Country>
  <Country>
    <ID>5</ID>
    <Name>Pakistan</Name>
    <Price>35p(Pak)</Price>
    <Access>0005</Access>
    <PriceAccess>#5p##0005####</PriceAccess>
  </Country>
</Countries>

XSLTFile.xsl:

<?xml version="1.0" encoding="utf-8"?>

<xsl:stylesheet version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">

  <select onchange="rates(this.options[this.selectedIndex].value)">
        <xsl:for-each select="Countries/Country">
          <option value="{PriceAccess}">
            <xsl:value-of select="Name"/>
          </option>
        </xsl:for-each>
      </select>

</xsl:template>

</xsl:stylesheet>

No comments:

Post a Comment