PDA

View Full Version : pass the value to the text box (updated)



fikka
Jul 15th, 2005, 04:58 PM
Hi,

I was using example of autocomplete function from this site:
http://www10.brinkster.com/a1ien51/jsExamples/typeAhead.html

But I have to change it a little bit, so there is a question:

I have 2 text boxes - theTextBox1, theTextBox2
and 1 array ar = new array ([xxx1,yyy1],[xxx2,yyy2],[xxx3,yyy3]); both xxx* and yyy* are text elements.
First of the text boxes uses this autocomplete code and gets the xxx* value. It works fine, But I also need, to set up theTextBox2 value with yyy* if theTextBox1 get any of xxx* values.
I have the variable, which gets the right yyy value from the aaray, but don't know how pass this value to the textbox.

This doesn't work:
....
var theTextBox2 = document.Form1.name1; // theTextBox2 variable is already set up and has the right value.
...
PRINT "<INPUT TYPE=text NAME=\"name1\" VALUE=\"$name1\">\n";

I get theTextBox2 has no properties error.
Please see more detailed below.
Sorry, if all of this is not too clear or is too lame, but it's my first time with javascript.

Thank you.

Here are the *.php file and the script file:


<html>
<head>

<style type="text/css">
span.spanTextDropdown
{
position:absolute;
top: 0px;
left: 0px;
width: 300px;
z-index: 101;
background-color: #C0C0C0;
border: 1px solid #000000;
padding-left: 2px;
overflow: visible;
display: none;
}
span.spanMatchText
{
text-decoration: underline;
font-weight: bold;
}
span.spanNormalElement
{
background: #C0C0C0;
}
span.spanHighElement
{
background: #000040;
color: white;
cursor: pointer;
}
span.noMatchData
{
font-weight: bold;
color: #0000FF;
}
</style>
<?
//fill the theOptions array with the values form the database
?>
//How String Should Match
var ignoreCase = true; //Ignore upper and lower cases
var matchAnywhere = false; //Match pattern anywhere is string

//Match TextBox Width
var matchTextBoxWidth = true; //False uses CSS value in div.spanTextDropdown

//Visible Time for options menu to be open when untouched
var theVisibleTime = 1500;

//Show Matching Data Message
var ShowNoMatchMessage = true;
var noMatchingDataMessage = "No Matching Data";

var theTextBox2;

//Use Timeout
var useTimeout = false; //false uses onblur

//Add reference to the element you want to add this too.
function addHandler()
{
document.Form1.name.onkeyup = GiveOptions
document.Form1.name.onblur = StartTimeout;
if(navigator.userAgent.toLowerCase().indexOf("opera") != -1)document.Form1.name.onkeypress = GiveOptions; //Fix for Opera!
var theTextBox2 = document.Form1.name2;
}
</script>
<!-- Reference the JavaScript File -->
<script type="text/javascript" src="autocomplete.js"></script>
</HEAD>
<?
PRINT "<body BGCOLOR=\"SILVER\" onload=\"addHandler()\">\n";
PRINT "<FORM NAME=\"Form1\" AUTOCOMPLETE=\"off\" METHOD=\"POST\" ACTION=\"whatever.php\">\n";
PRINT "<TABLE>\n";
PRINT "<TR>\n";
PRINT "<TD>Name:</TD>\n";
PRINT "<TD><INPUT TYPE=text NAME=\"name\" VALUE=\"$name\"></TD>\n";
PRINT "</TR>\n";
PRINT "<TR>\n";
PRINT "<TD>Name2:</TD>\n";
PRINT "<TD><INPUT TYPE=text NAME=\"name2\" VALUE=\"$name2\"></TD>\n";
PRINT "</TR>\n";
PRINT "</TABLE>\n";
PRINT "<BR>\n";
PRINT "<INPUT TYPE=submit VALUE=\"OK\">\n";
PRINT "</FORM>\n";
PRINT "</HTML>\n";




var regExFlags = "";
if(ignoreCase)
regExFlags = "i";
var regExAny = "";
if(!matchAnywhere)
regExAny = "^";
//Writes the div element to the page
if(useTimeout)
{
document.write('<span id="divOutput" class="spanTextDropdown" onmouseout="StartTimeout()" onmouseover="EraseTimeout();"></span>');
}
else
{
document.write('<span id="divOutput" class="spanTextDropdown"></span>');

}
var theTextBox;
var theTextBox2;
var currentValueSelected = -1;
//Function recieves input from key press on text field
function GiveOptions(e)
{
if(useTimeout)
{
if(iAmTiming)EraseTimeout();
StartTimeout();
}
var nbr = 1;
//Grab key press event
if(document.all)
{ //IE
nbr = event.keyCode;
theTextBox = event.srcElement;
}
else
{ //Mozilla
nbr = e.which;
theTextBox = e.target;
}
xElem = theTextBox;
if(theTextBox.value.length < 2)
{
HideTheBox();
return false;
}
if(nbr==13)
{ //Enter Key

GrabHighlighted();
xElem.blur();
return false;
}
else
if(nbr==38)
{ //Up Arrow
MoveHighlight(-1);
return false;
}
else
if(nbr==40)
{ //Down Arrow
MoveHighlight(1);
return false;
}

else{}
var theText = xElem.value;
SetElementPostion(xElem,"divOutput");
var theMatches = new Array();

if(theText.length > 1)
{
theMatches = MakeMatches(theText,xElem.name); //Determine matched array elements
theMatches = theMatches.join().replace(/\,/gi,""); //Turn Array into String
document.getElementById("divOutput").innerHTML = theMatches; //Set the document innerHTML
if(theMatches.length>0)
{

document.getElementById("divOutput").innerHTML = theMatches; document.getElementById("OptionsList_0").className="spanHighElement"; //make first item selected
currentValueSelected = 0;
}
else
{
currentValueSelected = -1; //Remove any selection index
if(ShowNoMatchMessage)
document.getElementById("divOutput").innerHTML = "<span class='noMatchData'>" + noMatchingDataMessage + "</span>";

else
HideTheBox();

}
}

}
//Variable used to number span element ids
var countForId = 0;

//Find all of the matches in the string
function MakeMatches(xCompareStr,xElemId)
{
countForId = 0;
var matchArray = new Array()
var regExp = new RegExp(regExAny + xCompareStr,regExFlags); //Createregualr expressions

for(i=0;i<theOptions.length;i++)
{ //Loop through options

var theMatch = theOptions[i][0].match(regExp); //try to make a match

if(theMatch)
{
matchArray[matchArray.length] = CreateUnderline(theOptions[i][0],xCompareStr,i); //Call function to make underline/span
}
}
return matchArray
}
var iAmTiming = false;
//Sets the position of the div under the text box in focus
function SetElementPostion(xElement,xPosElement)
{
var selectedPosX = 0; //set defaults
var selectedPosY = 0;
var theElement = xElement;
var theElemHeight = theElement.offsetHeight; //Grab textbox width
var theElemWidth = theElement.offsetWidth; //Grab textbox height

while(theElement != null)
{ //Loop through the document tree
selectedPosX += theElement.offsetLeft; //Grab new X Position
selectedPosY += theElement.offsetTop; //Grab new Y Position
theElement = theElement.offsetParent; //Set to next element's parent

}

xPosElement = document.getElementById(xPosElement); //get element reference
xPosElement.style.left = selectedPosX; //Set X Position
if(matchTextBoxWidth)
xPosElement.style.width = theElemWidth; //Set Witdh if required

xPosElement.style.top = selectedPosY + theElemHeight; //Set Y position
xPosElement.style.display = "block"; //Display Block
}
//Variables for create underline
var undeStart = "<span class='spanMatchText'>";
var undeEnd = "</span>";

//variables for span elements
var selectSpanStart = "<span style='width:100%;display:block;' class='spanNormalElement' onmouseover='SetHighColor(this)' ";
var selectSpanEnd ="</span>";
//Function makes underline under the text

function CreateUnderline(xStr,xTextMatch,xVal)
{

selectSpanMid = "onclick='SetText(" + xVal + ")' id='OptionsList_" + countForId + "' theArrayNumber='"+ xVal +"'>"; //get click and ids

var regExp = new RegExp(regExAny + xTextMatch,regExFlags); //reg expression to match typed text

var aStart = xStr.search(regExp) //find start position of the text

var matchedText = xStr.substring(aStart,aStart + xTextMatch.length); //grab the matched text (need to keep formatting)

countForId++;
return selectSpanStart + selectSpanMid + xStr.replace(regExp,undeStart + matchedText + undeEnd) + selectSpanEnd; //return span elements
}
//function sets the textbox and hidden textbox values
function SetText(xVal)
{
theTextBox.value = theOptions[xVal][0]; //set text value
theTextBox2.value = theOptions[xVal][1];
document.getElementById("divOutput").style.display = "none"; //hide the options list
currentValueSelected = -1; //remove the selected index
}
//Gets value when option is clicked
function GrabHighlighted()
{

if(currentValueSelected != -1)
{

xVal = document.getElementById("OptionsList_" + currentValueSelected).getAttribute("theArrayNumber"); //grab the array index of the value

//xVal = document.getElement("OptionsList_" + currentValueSelected).getAttribute("theArrayNumber"); //grab the array index of the value
SetText(xVal); //set value

document.getElementById("divOutput").style.display = "none"; //hide the options list

}

}
//Set High color when moused over

function SetHighColor(xElem)
{
if(xElem)
currentValueSelected = xElem.id.slice(xElem.id.indexOf("_")+1,xElem.id.length); //Determine if returned full id name

for(i=0;i<countForId;i++)
{ //loop through all selections

document.getElementById('OptionsList_' + i).className = 'spanNormalElement'; //reset CSS class

}

document.getElementById('OptionsList_' + currentValueSelected).className = 'spanHighElement'; //Add highlight class

}

//Handles the up an down arrows for moving highlight color

function MoveHighlight(xDir)
{

if(currentValueSelected != -1)
{ //make sure options exist

newValue = parseInt(currentValueSelected) + parseInt(xDir); //Add direction

if(newValue >-1 && newValue <countForId)
{ //Make sure it stays within the bounds

currentValueSelected = newValue; //set the selected index

SetHighColor(); //set the new CSS class

}

}
}


function HideTheBox()
{

document.getElementById("divOutput").style.display = "none"; //hide the options list

currentValueSelected = -1;

iAmTiming = false;

}



function EraseTimeout()
{
clearTimeout(iAmTiming);
iAmTiming=false;

}
function StartTimeout()
{

iAmTiming = setTimeout("HideTheBox()",theVisibleTime);
}

medigerati
Jul 15th, 2005, 05:54 PM
Try:
document.Form1.elements['name1'].value = theTextBox2;

name1 is the name of the textbox you want the yyy value to go into.

Hope that helps,
Kevin

fikka
Jul 18th, 2005, 10:36 AM
Try:
document.Form1.elements['name1'].value = theTextBox2;

name1 is the name of the textbox you want the yyy value to go into.

Hope that helps,
Kevin

Thanks, Kevin

although it did not help :) I think something very simle is wrong, just can't figure out what it is.

Willy Duitt
Jul 18th, 2005, 11:07 AM
http://www.webdeveloper.com/forum/showthread.php?t=73117
http://www.webxpertz.net/forums/showthread.php?t=33453

fikka
Jul 18th, 2005, 11:30 AM
http://www.webdeveloper.com/forum/showthread.php?t=73117
http://www.webxpertz.net/forums/showthread.php?t=33453

I know I've asked this question on a various forums. Why post these links here?

Willy Duitt
Jul 18th, 2005, 11:37 AM
I know I've asked this question on a various forums. Why post these links here?

Why not??

BTW: Here's a few more...

http://www.network54.com/Forum/message?forumid=21834&messageid=1121681220
http://www.daniweb.com/techtalkforums/thread28387.html
http://www.webdeveloper.com/forum/showthread.php?t=73117
http://www.webxpertz.net/forums/showthread.php?t=33453
http://www.jsmadeeasy.com/forum/ShowPost.aspx?PostID=767

fikka
Jul 18th, 2005, 11:46 AM
Why not??

BTW: Here's a few more...

http://www.network54.com/Forum/message?forumid=21834&messageid=1121681220
http://www.daniweb.com/techtalkforums/thread28387.html
http://www.webdeveloper.com/forum/showthread.php?t=73117
http://www.webxpertz.net/forums/showthread.php?t=33453
http://www.jsmadeeasy.com/forum/ShowPost.aspx?PostID=767

I don't see how it helps with my question..

Willy Duitt
Jul 18th, 2005, 12:19 PM
I don't see how it helps with my question..

You don't?? Maybe you forgot all the places you posted the question... Or perhaps, other members would be interested in checking if your question has already been answered elsewhere before they possibly waste their time trying to answer an already answered question... Besides, it helps the archives here if you find the answer elsewhere but fail to update the thread here to reflect the accepted solution...

.....Willy