Complete XML into HTML form not working?

kre1973 · Apr 21, 2007

I have a HTML pager site that pulls in data from a XML file using Javascript allowing the user to select an individual and enter info into the textboxes. They would then click the send button and a page would go out to their pager using a Perl program. I can see the data(just the names) in the dropdown from my XML file in the webpage. I don't want to see the actual pager numbers displayed, but they need to be pulled in by the Perl program. I hope this explanation is clear....

Here's the HTML code:

Code:

<HTML>
<HEAD>
<TITLE>Paging Site</TITLE>
<script language="JavaScript" src="groups.js" type="text/javascript"></script>
<body onload="init();">
      <FORM name=myform action=[URL unfurl="true"]http://mycompany.com/cgi-bin/pager/page.pl[/URL] method=post>          
              <TABLE cellspacing=1 cellpadding=1 width="60%">
        <TBODY>
        <tr>
          <td> 
           <STRONG>Choose Individual</strong>
              <select size=1 id="roleCategoryListing" name="roleCategoryListing" onChange="selectRole(this.value);">
              <option>Loading...</option></select><p>
              </td>
            </tr> 
<TR>
          <TD valign=top width=144>
        <STRONG>Your Name</STRONG>
             <INPUT title="Your Name" name=YourName> </TD>
          <TD valign=top width=144>
        <STRONG>Your Phone
            </STRONG><INPUT title="Your Phone Number" maxlength=12 name=YourNumber>
</TD></TR>
            <TR valign=top>
          <TD colspan=2>
          <STRONG>Your Message</STRONG><TEXTAREA title="Your Message" name=YourMessage rows=4 cols=60></TEXTAREA>
          </TD></TR>
          <TR align=middle>
          <TD valign=top colspan=2>
<INPUT type=submit value=Send> 
<INPUT onClick=ResetForm() type=reset value=Reset>
</TD>
</TR>
</TBODY>
</TABLE>
</FORM>
</TD></TR>
</BODY>
</HTML>

Here's the JavaScript code:

Code:

var xmlDoc =  new ActiveXObject("Msxml2.DOMDocument.3.0");
var allRoleListing;
var allRoleCategoryNodes;
var allRoleNodes;

function init(){

      xmlDoc.async = false;
      xmlDoc.load("./xml/Individual.xml");
      
      allRoleListing = xmlDoc.selectNodes("/IndividualListing");
      allRoleCategoryNodes = xmlDoc.selectNodes("//Individual");
      allRoleNodes = xmlDoc.selectNodes("//Name");
      
      buildfirstdropdown();
}


function buildfirstdropdown(){
      emptyFirstDropDown();
      
      var roleCategoryListSelect = document.getElementById('roleCategoryListing');
      var roleListOptions = roleCategoryListSelect.options;

      var newOption = document.createElement("option");
      newOption.innerHTML = "---Individual---";
      newOption.value = "--";
      roleCategoryListSelect.appendChild(newOption);

      for (var i=0; i<allRoleCategoryNodes.length; i++) {
      var thisCategoryNameTxt = allRoleCategoryNodes[i].selectNodes("./Name")[0].text;
      var newOption = document.createElement("option");
      newOption.innerHTML=thisCategoryNameTxt;
      newOption.value = i;
      roleCategoryListSelect.appendChild(newOption);
      }
}

function emptyFirstDropDown(){
      var roleCategoryListingSelect = document.getElementById('roleCategoryListing');
      var roleCategoryListingSelectOptions = roleCategoryListingSelect.options;
      var roleCategoryListingSelectOptionsLength = roleCategoryListingSelectOptions.length;

      for (var i=0; i<roleCategoryListingSelectOptionsLength; i++){
            roleCategoryListingSelect.removeChild(roleCategoryListingSelect[0]);
      }      
}

Here's a partial sample of the XML file:

Code:

<?xml version="1.0" ?> 
- <IndividualListing>
- <Individual>
  <Name>Aaron, Scott</Name> 
  <Pager>"6152220365@archwireless.net"</Pager> 
  </Individual>
- <Individual>
  <Name>Wilson, Jeff</Name> 
  <Pager>"3122257514@archwireless.net"</Pager> 
  </Individual>
- <Individual>
  <Name>Thomas, Ryan</Name> 
  <Pager>"3129410781@archwireless.net"</Pager> 
  </Individual>
- <Individual>
  <Name>Adams, Naveed</Name> 
  <Pager>"3129416077@archwireless.net"</Pager> 
  </Individual>
- <Individual>
  </IndividualListing>

Thanks

BillyRayPreachersSon · Apr 22, 2007

Instead of this:

Code:

var newOption = document.createElement("option");
newOption.innerHTML = "---Individual---";
newOption.value = "--";
roleCategoryListSelect.appendChild(newOption);

I'd consider using methods already in place to do this specifically for select elements, e.g.:

Code:

var newOption = new Option("text", "value");
roleCategoryListSelect.add(newOption, null);

As you can see, the Option constructor takes two parameters - the text to show in the drop down for the option, and the value to assign to that option.

Take a look at my FAQ "How do I create multi-level select / list / drop down boxes?" (faq216-6294) for lots of tips on select box programming (including a work-around to IE's bad handling of the "add" method).

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

tsuji · Apr 23, 2007

[1]
>I don't want to see the actual pager numbers displayed, but they need to be pulled in by the Perl program.
If you're prepared to do it server-side from within page.pl, you can no doubt succeed in correlating i with the corresponding Pager. But as the xml is already loaded into the client-side, you can as well do this and directly submitting the Pager info to page.pl for its consumption, like this; and it will _not_ display _explicitly_ client-side.

>newOption.value = i;
[tt]newOption.value = allRoleCategoryNodes.selectNodes("./Pager")[0].text;[/tt]

[2] Other than [1], you can make emptyFirstDropDown() a lot easier and cleaner like this. This is not a functional change though.
[tt]
function emptyFirstDropDown(){
var roleCategoryListingSelect = document.getElementById('roleCategoryListing');
roleCategoryListSelect.length = 0; //or condense to one-liner
}[/tt]

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Complete XML into HTML form not working?

kre1973

IS-IT--Management

BillyRayPreachersSon

Programmer

tsuji

Technical User

Similar threads

Part and Inventory Search

Sponsor