pass the value to the text box

Question

fikka 0 Newbie Poster

18 Years Ago

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";

Sorry, if all of this is not too clear or is too lame, but it's my first time with javascript.

Thank you.

javascript

2 Contributors
2 Replies
301 Views
2 Years Discussion Span
Latest Post 16 Years Ago Latest Post by navyjax2

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

fikka 0 Newbie Poster · Answer 1 · 2005-07-18T18:08:33+00:00

UPDATED:
I get theTextBox2 has no properties error.
Please see more detailed below.
Here are the *.php file and the script file:

<html>
<head>
    
<style type="text/css">
...	
</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)
{
...
}
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)
{		
...		
return matchArray
}
var iAmTiming = false;
//Sets the position of the div under the text box in focus
function SetElementPostion(xElement,xPosElement)
{	
...
}
//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)
{
...	
}
//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
		SetText(xVal);  //set value
		document.getElementById("divOutput").style.display = "none"; //hide the options list

	}

}
//Set High color when moused over

function SetHighColor(xElem)
{
...
}

//Handles the up an down arrows for moving highlight color
function MoveHighlight(xDir)
{	
...
}
function HideTheBox()
{
..
}
function EraseTimeout()
{	
..
}
function StartTimeout()
{	
}

navyjax2 -1 Junior Poster in Training · Answer 2 · 2008-02-01T07:20:51+00:00

I'm not sure if you still need this solved or not - this is an old post and came across it while looking for something completely unrelated, but in any event, I think I might have a solution you can try to implement:

<HTML><HEAD><TITLE>TEST</TITLE>
  <SCRIPT language="JavaScript">

    function loadBox(stuff) {
      document.Form1.TextBox2.value = stuff;
    }

  </SCRIPT>
</HEAD><BODY>
  <FORM name="Form1">
    <INPUT type="textbox" id="TextBox1" value="Stuff here"/>
    <INPUT type="textbox" id="TextBox2" />
    <INPUT type="button" value="Click Me" onclick="loadBox(document.Form1.TextBox1.value)">
  </FORM>
</BODY></HTML>

Not sure if it'll help, but it copies text from one textbox to the next with an 'onclick' event of a button. You pasted way too much code for me to go through to figure out if what you are trying to do is done on an interval or what (next time, just the applicable code you are trying to fix might be ok, or simplify it down to something like what I have above), as I'm not a PHP guy and hate the language, personally (it's just JavaScript on crack and I'd rather stick with the simpler, CLIENT-SIDE, and therefore FASTER code), but I would just tell you that you should probably just add the contents of the first textbox to the second at the same time as you do the first box. Just, within the same function that populates the first box, tell it to do a document.Form1.TextBox2.value = variable (and variable equals the same variable as the text that #1 got), rather than try to do some sort of poll of the box for when it gets populated. You could do that, though, if you really, really need to. Use "setInterval" and have it run a function every how-ever-often you need to - it would look something like this:

<SCRIPT language="JavaScript">

self.setInterval("doCheck()",5000);

function doCheck() {
  if (document.Form1.TextBox1.value) {
  document.Form1.TextBox2.value = document.Form1.TextBox1.value}
}

</SCRIPT>

That will check the box every 5 seconds for a value and send it to the 2nd box when populated. Only thing is, if you want it to stop at some point, you'll need a clearInterval in there, but you'll have to figure out what event you want to trigger that.

Cheers,
Tom