DaniWeb IT Discussion Community - pass the value to the text box

DaniWeb IT Discussion Community (http://www.daniweb.com/forums/index.php)

- JavaScript / DHTML / AJAX (http://www.daniweb.com/forums/forum117.html)

- - pass the value to the text box (http://www.daniweb.com/forums/thread28387.html)

pass the value to the text box

Hi,

I was using example of autocomplete function from this site:
http://www10.brinkster.com/a1ien51/j...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.

Re: pass the value to the text box

UPDATED:
I get theTextBox2 has no properties error.
Please see more detailed below.
Here are the *.php file and the script file:
[PHP]
<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>

<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";
[/PHP]

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()

{        

}

Re: pass the value to the text box

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