K
koen colen
Hello group,
I'm modifying a piece of code of Joe Norman's address book that I found on
http://www.intranet2internet.com/public/default.asp?PAGE=sscript&ID=3
because I'm trying to make myself a script like the address book but with
textareas instead of textboxes (where users can use the enter key on the
keyboard to write multiple lines in a textbox).
So I think I need to escape() the cookie to save the "hard returns" in a
cookie and display them later correctly, right? I did it like this and it
works fine:
function setRec() {
strRecord = "";
for(i = 0; i < document.frm1.elements.length; i++) {
strRecord = strRecord +
document.frm1.elements.value + ":";
}
arrRecords[recCount] = strRecord;
document.frm2.add.value = " NEW ";
---> document.cookie =
"Records="+escape(arrRecords)+";expires=" + expireDate.toGMTString();
}
My first question: where do I have to unescape() the cookie to display the
cookie back in the form?
Another thing I completely don't understand is the following: I understand
that textboxvallues are seperated with the":" sign and because I want to
allow the user to use the ":" sign in the textareas I replaced it like this
to set the record:
function setRec() {
strRecord = "";
for(i = 0; i < document.frm1.elements.length; i++) {
---> strRecord = strRecord +
document.frm1.elements.value + "xyzyz";
}
arrRecords[recCount] = strRecord;
document.frm2.add.value = " NEW ";
document.cookie =
"Records="+escape(arrRecords)+";expires=" + expireDate.toGMTString();
}
AND like this to split the record
function currentRecord() {
if (arrRecords.length != "") {
strRecord = arrRecords[recCount];
---> currRecord = strRecord.split("xyzyx");
for(i = 0; i < document.form1.elements.length; i++) {
document.form1.elements.value = currRecord;
}
}
}
The thing I don't understand is the following: each recordgroup is seperated
with a "," and again I want to allow them as input in the textareas. I see
that they are splitted in the following code and I replaced it with
"qqqyyy":
function loadCookie() {
if(document.cookie != "") {
if(cookieVal("Records") != ""){
---> arrRecords = cookieVal("Records").split("qqqyyy");
}
currentRecord();
}
}
But where is the "," set? I really dont understand! I guess it has something
to do with the arrays, right?
I hope anyone can help me out on this one or point me in the right
direction!
Here is the compete modified code (for the original please look link on top
of this message):
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<SCRIPT language="JavaScript">
<!--
var arrRecords = new Array();
var arrCookie = new Array();
var recCount = 0;
var strRecord="";
expireDate = new Date;
expireDate.setDate(expireDate.getDate()+365);
function cookieVal(cookieName) {
thisCookie = document.cookie.split("; ")
for (i = 0; i < thisCookie.length; i++) {
if (cookieName == thisCookie.split("=")[0]) {
return thisCookie.split("=")[1];
}
}
return 0;
}
function loadCookie() {
if(document.cookie != "") {
if(cookieVal("Records") != ""){
arrRecords = cookieVal("Records").split("qqqyyy");
}
currentRecord();
}
}
function setRec() {
strRecord = "";
for(i = 0; i < document.form1.elements.length; i++) {
strRecord = strRecord + document.form1.elements.value + "xyzyz";
}
arrRecords[recCount] = strRecord;
document.frm2.add.value = " NEW ";
document.cookie = "Records="+escape(arrRecords)+";expires=" +
expireDate.toGMTString();
}
function newRec() {
switch (document.frm2.add.value) {
case " NEW " :
varTemp = recCount;
for(i = 0; i < document.form1.elements.length; i++) {
document.form1.elements.value = ""
}
recCount = arrRecords.length;
document.frm2.add.value = "CANCEL";
break;
case "CANCEL" :
recCount = varTemp;
document.frm2.add.value = " NEW ";
currentRecord();
break;
}
}
function countRecords() {
document.frm2.actual.value = "Record " + (recCount+1)+";
"+arrRecords.length+" saved records";
}
function delRec() {
arrRecords.splice(recCount,1);
navigate("previous");
setRec();
}
function currentRecord() {
if (arrRecords.length != "") {
strRecord = arrRecords[recCount];
currRecord = strRecord.split("xyzyz");
for(i = 0; i < document.form1.elements.length; i++) {
document.form1.elements.value = currRecord;
}
}
}
function navigate(control) {
switch (control) {
case "first" :
recCount = 0;
currentRecord();
document.frm2.add.value = " NEW ";
break;
case "last" :
recCount = arrRecords.length - 1;
currentRecord();
document.frm2.add.value = " NEW ";
break;
case "next" :
if (recCount < arrRecords.length - 1) {
recCount = recCount + 1;
currentRecord();
document.frm2.add.value = " NEW ";
}
break;
case "previous" :
if (recCount > 0) {
recCount = recCount - 1;
currentRecord();
}
document.frm2.add.value = " NEW ";
break;
default:
}
}
// Splice method Protype Function
// Peter Belesis, Internet.com
// http://www.dhtmlab.com/
function pageLoad(){
if (!Array.prototype.splice) {
function array_splice(ind,cnt) {
if (arguments.length == 0) return ind;
if (typeof ind != "number") ind = 0;
if (ind < 0) ind = Math.max(0,this.length + ind);
if (ind > this.length) {
if (arguments.length > 2) ind = this.length;
else return [];
}
if (arguments.length < 2) cnt = this.length-ind;
cnt = (typeof cnt == "number") ? Math.max(0,cnt) : 0;
removeArray = this.slice(ind,ind+cnt);
endArray = this.slice(ind+cnt);
this.length = ind;
for (var i = 2; i < arguments.length; i++) {
this[this.length] = arguments;
}
for(var i = 0; i < endArray.length; i++) {
this[this.length] = endArray;
}
return removeArray;
}
Array.prototype.splice = array_splice;
}
recCount = 0;
loadCookie();
countRecords();
}
function upper() {
document.form1.textfield.value =
document.form1.textfield.value.toUpperCase();
document.form1.textarea.value=document.form1.select.value+document.form1.sel
ect2.value+document.form1.select3.value+document.form1.textfield.value+"\n\n
PROBLEM:\n"+document.form1.textarea2.value+"\n\nTROUBLESHOOTING:\n"+document
..form1.textarea3.value+"\n\nSOLUTION /
CONCLUSION(S):\n"+document.form1.textarea4.value+"\n\nCOMMENT /
ACTION:\n"+document.form1.textarea5.value
}
function copyToClipboard (text) {
if (window.clipboardData) {
window.clipboardData.setData('text', text);
}
}
function max() {
self.moveTo(0,0)
self.resizeTo(screen.availWidth,screen.availHeight)
}
//-->
</SCRIPT>
</head>
<body bgcolor="#F3F3F3" leftmargin="0" topmargin="0" marginwidth="0"
marginheight="0" onload="pageLoad(); upper(); max();
document.form1.select.focus()" link="#96A9BA" vlink="#96A9BA"
alink="#96A9BA">
<table width="100%" border="0" cellpadding="0" cellspacing="0"
bgcolor="#FFFFFF">
<!--DWLayoutTable-->
<tr>
<td width="50%" height="73"><img src="spacer.gif" width="15"
height="1"><img src="book.gif" width="79" height="63"></td>
<td width="50%" align="right" class="tablerighttop">
<form name="frm2">
<table align="center" border="1" resize="none">
<tr>
<td align="center">
<input type="button" name="first" value="|<< "
onClick="navigate('first');countRecords()">
<input type="button" name="previous" value=" < "
onClick="navigate('previous');countRecords()">
<input type="button" name="next" value=" > "
onClick="navigate('next');countRecords()">
<input type="button" name="last" value=" >>|"
onClick="navigate('last');countRecords()">
<input type="box" name="actual" size=30>
</td>
</tr>
<tr>
<td align="center">
<input type="button" name="add" value=" NEW "
onClick="newRec();countRecords()">
<input type="button" name="set" value="SAVE RECORD"
onClick="setRec();countRecords()">
<input type="button" name="del" value="Delete"
onClick="delRec();countRecords()">
</td>
</tr>
</table>
</form>
</td>
</tr>
<tr>
<td height="5" colspan="2"><img src="spacer.gif" width="1"
height="5"></td>
</tr>
<tr>
<td height="3" colspan="2" bgcolor="#0A357E"><img src="spacer.gif"
width="1" height="3"></td>
</tr>
</table>
<form name="form1" method="post" action="">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="50%" height="226" valign="top" class="tableleft"> <select
name="select" onChange="upper(); copyToClipboard(this.form.textarea.value)">
<option value="+31 ">+31</option>
<option value="+32 ">+32</option>
</select> <select name="select2" onChange="upper();
copyToClipboard(this.form.textarea.value)">
<option value="NL ">NL</option>
<option value="NL/EN ">NL/EN</option>
<option value="NL/FR ">NL/FR</option>
<option value="FR ">FR</option>
<option value="FR/EN ">FR/EN</option>
<option value="EN ">EN</option>
</select> <select name="select3" onChange="upper();
copyToClipboard(this.form.textarea.value)">
<option value="LASERJET 1000 ">1000</option>
<option value="LASERJET PLUS ">plus</option>
<option value="LASERJET SERIESII ">seriesII</option>
</select> <input name="textfield" type="text" class="uppercase"
onFocus="if(!this.initialyCleared){this.value='';this.initialyCleared =
true;}" onKeyUp="upper(); copyToClipboard(this.form.textarea.value)"
value="Short problem description" size="36">
<BR> <img src="problem.gif" width="88" height="19"> <BR> <textarea
name="textarea2" cols="57" rows="5"
onFocus="if(!this.initialyCleared){this.value='';this.initialyCleared =
true;}" onKeyUp="upper(); copyToClipboard(this.form.textarea.value)">Give a
description of the symptoms the printer has.
- What complaints does the customer have regarding sounds / smells / colors
which may appear?
- What faillure codes or light patterns does the customer have?</textarea>
<BR> <img src="troubleshooting.gif" width="165" height="15"> <BR>
<textarea name="textarea3" cols="57" rows="5"
onFocus="if(!this.initialyCleared){this.value='';this.initialyCleared =
true;}" onKeyUp="upper(); copyToClipboard(this.form.textarea.value)">- What
tests has the customer already done?
Engine test?:
Half selftest?:
Paperpath test?:
Other?:</textarea>
<BR> <img src="solution.gif" width="222" height="15"> <BR> <textarea
name="textarea4" cols="57" rows="5"
onFocus="if(!this.initialyCleared){this.value='';this.initialyCleared =
true;}" onKeyUp="upper(); copyToClipboard(this.form.textarea.value)">- What
part(s) should be replaced according to agent?:
- What productnumbers have these parts?:</textarea>
<BR> <img src="comment.gif" width="156" height="15"> <BR>
<textarea name="textarea5" cols="57" rows="5"
onFocus="if(!this.initialyCleared){this.value='';this.initialyCleared =
true;}" onKeyUp="upper(); copyToClipboard(this.form.textarea.value)">- What
service did you start? Fireman (POP, CE-Onsite, Unit Exchange), Puma (RRR,
Unit Exchange).
- When no service was started, what did you do then?
For example: Sent customer to repaircenter in Amersfoort.</textarea>
</td>
<td width="50%" align="right" valign="top"
class="tableright"><textarea name="textarea" cols="57"
rows="28"></textarea></td>
</tr>
</table>
</form>
</body>
</html>
Many thanks in advance,
Koen
I'm modifying a piece of code of Joe Norman's address book that I found on
http://www.intranet2internet.com/public/default.asp?PAGE=sscript&ID=3
because I'm trying to make myself a script like the address book but with
textareas instead of textboxes (where users can use the enter key on the
keyboard to write multiple lines in a textbox).
So I think I need to escape() the cookie to save the "hard returns" in a
cookie and display them later correctly, right? I did it like this and it
works fine:
function setRec() {
strRecord = "";
for(i = 0; i < document.frm1.elements.length; i++) {
strRecord = strRecord +
document.frm1.elements.value + ":";
}
arrRecords[recCount] = strRecord;
document.frm2.add.value = " NEW ";
---> document.cookie =
"Records="+escape(arrRecords)+";expires=" + expireDate.toGMTString();
}
My first question: where do I have to unescape() the cookie to display the
cookie back in the form?
Another thing I completely don't understand is the following: I understand
that textboxvallues are seperated with the":" sign and because I want to
allow the user to use the ":" sign in the textareas I replaced it like this
to set the record:
function setRec() {
strRecord = "";
for(i = 0; i < document.frm1.elements.length; i++) {
---> strRecord = strRecord +
document.frm1.elements.value + "xyzyz";
}
arrRecords[recCount] = strRecord;
document.frm2.add.value = " NEW ";
document.cookie =
"Records="+escape(arrRecords)+";expires=" + expireDate.toGMTString();
}
AND like this to split the record
function currentRecord() {
if (arrRecords.length != "") {
strRecord = arrRecords[recCount];
---> currRecord = strRecord.split("xyzyx");
for(i = 0; i < document.form1.elements.length; i++) {
document.form1.elements.value = currRecord;
}
}
}
The thing I don't understand is the following: each recordgroup is seperated
with a "," and again I want to allow them as input in the textareas. I see
that they are splitted in the following code and I replaced it with
"qqqyyy":
function loadCookie() {
if(document.cookie != "") {
if(cookieVal("Records") != ""){
---> arrRecords = cookieVal("Records").split("qqqyyy");
}
currentRecord();
}
}
But where is the "," set? I really dont understand! I guess it has something
to do with the arrays, right?
I hope anyone can help me out on this one or point me in the right
direction!
Here is the compete modified code (for the original please look link on top
of this message):
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<SCRIPT language="JavaScript">
<!--
var arrRecords = new Array();
var arrCookie = new Array();
var recCount = 0;
var strRecord="";
expireDate = new Date;
expireDate.setDate(expireDate.getDate()+365);
function cookieVal(cookieName) {
thisCookie = document.cookie.split("; ")
for (i = 0; i < thisCookie.length; i++) {
if (cookieName == thisCookie.split("=")[0]) {
return thisCookie.split("=")[1];
}
}
return 0;
}
function loadCookie() {
if(document.cookie != "") {
if(cookieVal("Records") != ""){
arrRecords = cookieVal("Records").split("qqqyyy");
}
currentRecord();
}
}
function setRec() {
strRecord = "";
for(i = 0; i < document.form1.elements.length; i++) {
strRecord = strRecord + document.form1.elements.value + "xyzyz";
}
arrRecords[recCount] = strRecord;
document.frm2.add.value = " NEW ";
document.cookie = "Records="+escape(arrRecords)+";expires=" +
expireDate.toGMTString();
}
function newRec() {
switch (document.frm2.add.value) {
case " NEW " :
varTemp = recCount;
for(i = 0; i < document.form1.elements.length; i++) {
document.form1.elements.value = ""
}
recCount = arrRecords.length;
document.frm2.add.value = "CANCEL";
break;
case "CANCEL" :
recCount = varTemp;
document.frm2.add.value = " NEW ";
currentRecord();
break;
}
}
function countRecords() {
document.frm2.actual.value = "Record " + (recCount+1)+";
"+arrRecords.length+" saved records";
}
function delRec() {
arrRecords.splice(recCount,1);
navigate("previous");
setRec();
}
function currentRecord() {
if (arrRecords.length != "") {
strRecord = arrRecords[recCount];
currRecord = strRecord.split("xyzyz");
for(i = 0; i < document.form1.elements.length; i++) {
document.form1.elements.value = currRecord;
}
}
}
function navigate(control) {
switch (control) {
case "first" :
recCount = 0;
currentRecord();
document.frm2.add.value = " NEW ";
break;
case "last" :
recCount = arrRecords.length - 1;
currentRecord();
document.frm2.add.value = " NEW ";
break;
case "next" :
if (recCount < arrRecords.length - 1) {
recCount = recCount + 1;
currentRecord();
document.frm2.add.value = " NEW ";
}
break;
case "previous" :
if (recCount > 0) {
recCount = recCount - 1;
currentRecord();
}
document.frm2.add.value = " NEW ";
break;
default:
}
}
// Splice method Protype Function
// Peter Belesis, Internet.com
// http://www.dhtmlab.com/
function pageLoad(){
if (!Array.prototype.splice) {
function array_splice(ind,cnt) {
if (arguments.length == 0) return ind;
if (typeof ind != "number") ind = 0;
if (ind < 0) ind = Math.max(0,this.length + ind);
if (ind > this.length) {
if (arguments.length > 2) ind = this.length;
else return [];
}
if (arguments.length < 2) cnt = this.length-ind;
cnt = (typeof cnt == "number") ? Math.max(0,cnt) : 0;
removeArray = this.slice(ind,ind+cnt);
endArray = this.slice(ind+cnt);
this.length = ind;
for (var i = 2; i < arguments.length; i++) {
this[this.length] = arguments;
}
for(var i = 0; i < endArray.length; i++) {
this[this.length] = endArray;
}
return removeArray;
}
Array.prototype.splice = array_splice;
}
recCount = 0;
loadCookie();
countRecords();
}
function upper() {
document.form1.textfield.value =
document.form1.textfield.value.toUpperCase();
document.form1.textarea.value=document.form1.select.value+document.form1.sel
ect2.value+document.form1.select3.value+document.form1.textfield.value+"\n\n
PROBLEM:\n"+document.form1.textarea2.value+"\n\nTROUBLESHOOTING:\n"+document
..form1.textarea3.value+"\n\nSOLUTION /
CONCLUSION(S):\n"+document.form1.textarea4.value+"\n\nCOMMENT /
ACTION:\n"+document.form1.textarea5.value
}
function copyToClipboard (text) {
if (window.clipboardData) {
window.clipboardData.setData('text', text);
}
}
function max() {
self.moveTo(0,0)
self.resizeTo(screen.availWidth,screen.availHeight)
}
//-->
</SCRIPT>
</head>
<body bgcolor="#F3F3F3" leftmargin="0" topmargin="0" marginwidth="0"
marginheight="0" onload="pageLoad(); upper(); max();
document.form1.select.focus()" link="#96A9BA" vlink="#96A9BA"
alink="#96A9BA">
<table width="100%" border="0" cellpadding="0" cellspacing="0"
bgcolor="#FFFFFF">
<!--DWLayoutTable-->
<tr>
<td width="50%" height="73"><img src="spacer.gif" width="15"
height="1"><img src="book.gif" width="79" height="63"></td>
<td width="50%" align="right" class="tablerighttop">
<form name="frm2">
<table align="center" border="1" resize="none">
<tr>
<td align="center">
<input type="button" name="first" value="|<< "
onClick="navigate('first');countRecords()">
<input type="button" name="previous" value=" < "
onClick="navigate('previous');countRecords()">
<input type="button" name="next" value=" > "
onClick="navigate('next');countRecords()">
<input type="button" name="last" value=" >>|"
onClick="navigate('last');countRecords()">
<input type="box" name="actual" size=30>
</td>
</tr>
<tr>
<td align="center">
<input type="button" name="add" value=" NEW "
onClick="newRec();countRecords()">
<input type="button" name="set" value="SAVE RECORD"
onClick="setRec();countRecords()">
<input type="button" name="del" value="Delete"
onClick="delRec();countRecords()">
</td>
</tr>
</table>
</form>
</td>
</tr>
<tr>
<td height="5" colspan="2"><img src="spacer.gif" width="1"
height="5"></td>
</tr>
<tr>
<td height="3" colspan="2" bgcolor="#0A357E"><img src="spacer.gif"
width="1" height="3"></td>
</tr>
</table>
<form name="form1" method="post" action="">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="50%" height="226" valign="top" class="tableleft"> <select
name="select" onChange="upper(); copyToClipboard(this.form.textarea.value)">
<option value="+31 ">+31</option>
<option value="+32 ">+32</option>
</select> <select name="select2" onChange="upper();
copyToClipboard(this.form.textarea.value)">
<option value="NL ">NL</option>
<option value="NL/EN ">NL/EN</option>
<option value="NL/FR ">NL/FR</option>
<option value="FR ">FR</option>
<option value="FR/EN ">FR/EN</option>
<option value="EN ">EN</option>
</select> <select name="select3" onChange="upper();
copyToClipboard(this.form.textarea.value)">
<option value="LASERJET 1000 ">1000</option>
<option value="LASERJET PLUS ">plus</option>
<option value="LASERJET SERIESII ">seriesII</option>
</select> <input name="textfield" type="text" class="uppercase"
onFocus="if(!this.initialyCleared){this.value='';this.initialyCleared =
true;}" onKeyUp="upper(); copyToClipboard(this.form.textarea.value)"
value="Short problem description" size="36">
<BR> <img src="problem.gif" width="88" height="19"> <BR> <textarea
name="textarea2" cols="57" rows="5"
onFocus="if(!this.initialyCleared){this.value='';this.initialyCleared =
true;}" onKeyUp="upper(); copyToClipboard(this.form.textarea.value)">Give a
description of the symptoms the printer has.
- What complaints does the customer have regarding sounds / smells / colors
which may appear?
- What faillure codes or light patterns does the customer have?</textarea>
<BR> <img src="troubleshooting.gif" width="165" height="15"> <BR>
<textarea name="textarea3" cols="57" rows="5"
onFocus="if(!this.initialyCleared){this.value='';this.initialyCleared =
true;}" onKeyUp="upper(); copyToClipboard(this.form.textarea.value)">- What
tests has the customer already done?
Engine test?:
Half selftest?:
Paperpath test?:
Other?:</textarea>
<BR> <img src="solution.gif" width="222" height="15"> <BR> <textarea
name="textarea4" cols="57" rows="5"
onFocus="if(!this.initialyCleared){this.value='';this.initialyCleared =
true;}" onKeyUp="upper(); copyToClipboard(this.form.textarea.value)">- What
part(s) should be replaced according to agent?:
- What productnumbers have these parts?:</textarea>
<BR> <img src="comment.gif" width="156" height="15"> <BR>
<textarea name="textarea5" cols="57" rows="5"
onFocus="if(!this.initialyCleared){this.value='';this.initialyCleared =
true;}" onKeyUp="upper(); copyToClipboard(this.form.textarea.value)">- What
service did you start? Fireman (POP, CE-Onsite, Unit Exchange), Puma (RRR,
Unit Exchange).
- When no service was started, what did you do then?
For example: Sent customer to repaircenter in Amersfoort.</textarea>
</td>
<td width="50%" align="right" valign="top"
class="tableright"><textarea name="textarea" cols="57"
rows="28"></textarea></td>
</tr>
</table>
</form>
</body>
</html>
Many thanks in advance,
Koen