•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 391,713 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,441 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting
Views: 14888 | Replies: 2
 |
•
•
Join Date: Jul 2005
Posts: 2
Reputation: 
Rep Power: 0
Solved Threads: 0
Newbie Poster
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.
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.
•
•
Join Date: Jul 2005
Posts: 2
Reputation:
Rep Power: 0
Solved Threads: 0
Newbie Poster
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>
<!-- 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";
[/PHP]
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>
<!-- 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";
[/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()
{
} •
•
Join Date: Jun 2005
Posts: 46
Reputation:
Rep Power: 4
Solved Threads: 1
Light Poster
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:
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:
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
HTML Syntax (Toggle Plain Text)
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
Last edited by navyjax2 : Jan 31st, 2008 at 8:25 pm.
|
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
•
•
•
•
•
•
•
•
DaniWeb JavaScript / DHTML / AJAX Marketplace
Linear Mode
- writing from bottom up in rich text box (VB.NET)
- a default value in a text box (Visual Basic 4 / 5 / 6)
- Text Box Newbie help (Visual Basic 4 / 5 / 6)
- Text box question (C#)
- Text box population from DBgrid. HELP!! (Visual Basic 4 / 5 / 6)
- text is being written in text box (Web Browsers)
- Help with text box height (HTML and CSS)
- Cannot enter any text in a IE text-box (Viruses, Spyware and other Nasties)
Other Threads in the JavaScript / DHTML / AJAX Forum
- Previous Thread: the trouble with arguments
- Next Thread: Checking array
