Henry,
Here's something I created which may help you. It allows you to create
a txt file on your server, then import it to the web page into an
iFrame which remains out of view. The script below then accesses the
innerHTML of that hidden iFrame to populate your document form. Every
time you chang the customer.txt file on your server, the data imported
will likewise change. Copy and paste the code below into an html file
(don't forget to create the customer.txt file with the test data
supplied) and it will work in msie & firefox:
<head><title>Im port Customer List</title>
<script type="text/javascript">
/*
create a text file with your customer info using commas as delimiters.
Here's the info I made for testing in a customer.txt file:
(customer id number is the first item)
123aa,John Doe,Acme Medical Distributing, 123 Anystreet Lane, AnyTown,
CA,95112,jo**** **@blah.com,905-234-5678,408-123-4567
456bb,Jane Doe,Acme Medical Distributing, 456 Anystreet Lane, AnyTown,
CA,95112,jo**** **@blah.com,905-234-5678,408-123-4567
789cc,Jerry Doe,Acme Medical Distributing, 789 Anystreet Lane, AnyTown,
CA,95112,jo**** **@blah.com,905-234-5678,408-123-4567
*/
/* COMMENT: iframe source file content must be accessed
// cross browser by obtaining the innerHTML of the
// iframe source. When that content is obtained, it is
// interpreted by the browser which may insert <pre or
// other tags into the result. This function htmlEscape will
// take out the <pre and </pre tags from that character string.
*/
function htmlEscape(s){
s=s.replace(/\//g,'');
s=s.replace(/>/g,'');
s=s.replace(/</g,'');
s=s.replace(/pre/gi,'');
return s;
}
// pass unique customer number to script to obtain just the string of
info for that customer which is inside the iframe content
function getCust(cusno){
this.cusno =cusno;
var custno = cusno.toString( );
// iframe containing customer.txt is named "customer" :
var fsc = window.frames['customer'].document.body. innerHTML;
var file_stringc=ht mlEscape(fsc);
var btc = file_stringc.sp lit("\n");
var len= btc.length;
var customer_detail s, contact, company_name, addy1, addy2, city,
province, postal_code, email, phone, fax;
for(i=0; i<len; i++){
customer_detail s = btc[i];
cd = customer_detail s;
//extract the first 5 digits of the string which is the customer id:
// note that if you change the length of the customer id, you need to
change how
// variable 'matcher' is created ie: cd.substring(0, [length])
var matcher = cd.substring(0, 5);
//find the matching string with the customer number passed
in the parameter:
if(custno == matcher){
//populate an array with the contents of that matched string of
customer info:
c_details =cd.split(",");
//iterate through the array to assign values to variables matching
your form name:
customer_number =c_details[0];
contact =c_details[1];
company_name =c_details[2];
addy1 =c_details[3];
addy2= c_details[4];
city =c_details[5];
postal_code =c_details[6];
email =c_details[7];
phone = c_details[8];
fax = c_details[9];
}
}
// populate the form using the variables above:
document.forms["orderform"].elements['contact_name'].value =contact;
document.forms["orderform"].elements['company_name'].value =
company_name;
document.forms["orderform"].elements['addy1'].value = addy1;
document.forms["orderform"].elements['addy2'].value = addy2;
document.forms["orderform"].elements['city'].value = city;
document.forms["orderform"].elements['postal_code'].value =
postal_code;
document.forms["orderform"].elements['email'].value = email;
document.forms["orderform"].elements['phone'].value = phone;
document.forms["orderform"].elements['fax'].value = fax;
}
</script>
</head>
<body>
<h4>This is the iFrame which imports customer.txt from your server. In
the original script, i set its style to be left:-2500; top:-2500;
width:0px; height:0px so that it is hidden from view on the document,
yet still accessible from the script</h4>
<hr/>
<iframe name="customer" id="customerfra me" src="customer.t xt"
width="90%" height="120px" border="3px"></iframe>
<hr/>
<h4>
Scroll through the iframe text and select the first 5-digit number (eg:
123aa, 456bb, 789cc) and input that number into the box
labelled Customer Number. Hit your tab key to trigger the onBlur event
which pulls in the appropriate information and populates
the rest of the form with the correct data.
</h4>
<form method="POST" name="orderform " action="">
<table border="0" cellpadding="0" cellspacing="0"
style="border-collapse: collapse" bordercolor="#1 11111" width="74%"
id="AutoNumber1 ">
<tr>
<td width="12%" height="13">Cus tomer #</td>
<td width="36%" colspan="3" height="13">
<input type="text" name="customer_ no" size="19" style="font-size:
8pt" onBlur="getCust ( this.value)"></td>
<td width="13%" height="13"></td>
<td width="26%" colspan="2" height="13"><u> <b>PURCHASE
ORDER</b></u></td>
<td width="13%" height="13"></td>
</tr>
<tr>
<td width="12%" height="1">Cont act Name</td>
<td width="36%" colspan="3" height="1">
<input type="text" name="contact_n ame" size="49"
style="font-size: 8pt"></td>
<td width="26%" colspan="2" height="1"><fon t SIZE="2">
<p ALIGN="CENTER"> <b>To be filled by:</b></font></td>
<td width="13%" height="1"></td>
<td width="13%" height="1"></td>
</tr>
<tr>
<td width="12%" height="1">Comp any Name</td>
<td width="36%" colspan="3" height="1">
<input type="text" name="company_n ame" size="49"
style="font-size: 8pt"></td>
<td width="13%" height="1"></td>
<td width="39%" colspan="3" rowspan="2" height="1">
<font size="6" face="Century Gothic">Your Company
Name</font></td>
</tr>
<tr>
<td width="12%" height="1">Addr ess Line 1</td>
<td width="36%" colspan="3" height="1">
<input type="text" name="addy1" size="49" style="font-size:
8pt"></td>
<td width="13%" height="1"></td>
</tr>
<tr>
<td width="12%" height="1">Addr ess Line 2</td>
<td width="36%" colspan="3" height="1">
<input type="text" name="addy2" size="49" style="font-size:
8pt"></td>
<td width="13%" height="1"></td>
<td width="39%" colspan="3" height="1"><fon t SIZE="1">Your
Company Address</font></td>
</tr>
<tr>
<td width="12%" height="1">City </td>
<td width="36%" colspan="3" height="1">
<input type="text" name="city" size="49" style="font-size:
8pt"></td>
<td width="13%" height="1"></td>
<td width="39%" colspan="3" height="1"><fon t SIZE="1">YourCo
City, State Here</font></td>
</tr>
<tr>
<td width="12%" height="1">Prov ince</td>
<td width="36%" colspan="3" height="1">
<input type="text" name="province" size="35" style="font-size:
8pt"></td>
<td width="13%" height="1"></td>
<td width="39%" colspan="3" height="1"><fon t size="1">Your Co.
Zip Code</font></td>
</tr>
<tr>
<td width="12%" height="1">Post al Code</td>
<td width="36%" colspan="3" height="1">
<input type="text" name="postal_co de" size="25" style="font-size:
8pt"></td>
<td width="13%" height="1"></td>
<td width="13%" height="1"></td>
<td width="13%" height="1"></td>
<td width="13%" height="1"></td>
</tr>
<tr>
<td width="12%" height="11">Con tact Email</td>
<td width="36%" colspan="3" height="11">
<input type="text" name="email" size="49" style="font-size:
8pt"></td>
<td width="13%" height="11"></td>
<td width="13%" height="11"></td>
<td width="13%" height="11"></td>
<td width="13%" height="11"></td>
</tr>
<tr>
<td width="12%" height="4">Cont act Phone</td>
<td width="36%" colspan="3" height="4">
<input type="text" name="phone" size="30" style="font-size:
8pt"></td>
<td width="13%" height="4"></td>
<td width="13%" height="4"></td>
<td width="13%" height="4"></td>
<td width="13%" height="4"></td>
</tr>
<tr>
<td width="12%" height="5">Cont act Fax</td>
<td width="36%" colspan="3" height="5">
<input type="text" name="fax" size="30" style="font-size:
8pt"></td>
<td width="13%" height="5"></td>
<td width="13%" height="5"></td>
<td width="13%" height="5"></td>
<td width="13%" height="5"></td>
</tr>
</table>
</body>
