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>Import 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,
[email protected],905-234-5678,408-123-4567
456bb,Jane Doe,Acme Medical Distributing, 456 Anystreet Lane, AnyTown,
CA,95112,
[email protected],905-234-5678,408-123-4567
789cc,Jerry Doe,Acme Medical Distributing, 789 Anystreet Lane, AnyTown,
CA,95112,
[email protected],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=htmlEscape(fsc);
var btc = file_stringc.split("\n");
var len= btc.length;
var customer_details, contact, company_name, addy1, addy2, city,
province, postal_code, email, phone, fax;
for(i=0; i<len; i++){
customer_details = btc
;
cd = customer_details;
//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="customerframe" src="customer.txt"
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="#111111" width="74%"
id="AutoNumber1">
<tr>
<td width="12%" height="13">Customer #</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">Contact Name</td>
<td width="36%" colspan="3" height="1">
<input type="text" name="contact_name" size="49"
style="font-size: 8pt"></td>
<td width="26%" colspan="2" height="1"><font 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">Company Name</td>
<td width="36%" colspan="3" height="1">
<input type="text" name="company_name" 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">Address 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">Address 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"><font 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"><font SIZE="1">YourCo
City, State Here</font></td>
</tr>
<tr>
<td width="12%" height="1">Province</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"><font size="1">Your Co.
Zip Code</font></td>
</tr>
<tr>
<td width="12%" height="1">Postal Code</td>
<td width="36%" colspan="3" height="1">
<input type="text" name="postal_code" 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">Contact 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">Contact 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">Contact 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>