JavaScript / DHTML / AJAX RSS JavaScript / DHTML / AJAX RSS

pass the value to the text box

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Reply

•
•
Join Date: Jul 2005
Posts: 2
Reputation: fikka is an unknown quantity at this point 
Solved Threads: 0
fikka fikka is offline Offline
Newbie Poster

pass the value to the text box

 
0
  #1
Jul 18th, 2005
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.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jul 2005
Posts: 2
Reputation: fikka is an unknown quantity at this point 
Solved Threads: 0
fikka fikka is offline Offline
Newbie Poster

Re: pass the value to the text box

 
0
  #2
Jul 18th, 2005
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]

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. var regExFlags = "";
  2. if(ignoreCase)
  3. 	regExFlags = "i";
  4. var regExAny = "";
  5. if(!matchAnywhere)
  6. 	regExAny = "^";
  7. //Writes the div element to the page
  8. if(useTimeout)
  9. {
  10. ...
  11. }
  12. var theTextBox;
  13. var theTextBox2;
  14. var currentValueSelected = -1;
  15. //Function recieves input from key press on text field
  16. function GiveOptions(e)
  17. {
  18. 	if(useTimeout)
  19. 	{
  20. 		if(iAmTiming)EraseTimeout();
  21. 		StartTimeout();
  22. 	}
  23.    var nbr = 1;
  24. 	//Grab key press event
  25. 	if(document.all)
  26. 	{ //IE
  27. 		nbr = event.keyCode;
  28. 		theTextBox = event.srcElement;
  29. 	}
  30. 	else
  31. 	{  //Mozilla
  32. 		  nbr = e.which;
  33. 		  theTextBox = e.target;
  34. 	}
  35. 	xElem = theTextBox;
  36. 	if(theTextBox.value.length < 2)
  37. 	{
  38. 		HideTheBox(); 
  39. 		return false;
  40. 	}
  41. 	if(nbr==13)
  42. 	{ //Enter Key
  43.  
  44. 		GrabHighlighted();
  45. 		xElem.blur();
  46. 		return false;
  47. 	}
  48. 	else
  49. 		 if(nbr==38)
  50. 		 { //Up Arrow		 
  51. 			MoveHighlight(-1);
  52. 			return false;
  53. 		}
  54. 	else 
  55. 		if(nbr==40)
  56. 		{  //Down Arrow
  57. 			MoveHighlight(1);
  58. 			return false;
  59. 		}
  60.  
  61. 	else{}
  62. 	var theText = xElem.value;
  63. 	SetElementPostion(xElem,"divOutput");
  64. 	var theMatches = new Array();
  65.  
  66. 	if(theText.length > 1)
  67. 	{
  68. 		theMatches = MakeMatches(theText,xElem.name);           //Determine matched array elements
  69. 		theMatches = theMatches.join().replace(/\,/gi,"");  //Turn Array into String
  70. 		document.getElementById("divOutput").innerHTML = theMatches;  //Set the document innerHTML		
  71. 		if(theMatches.length>0)
  72. 		{
  73.  
  74. 			document.getElementById("divOutput").innerHTML = theMatches;			document.getElementById("OptionsList_0").className="spanHighElement";  //make first item selected
  75. 			currentValueSelected = 0;
  76. 		}
  77. 		else
  78. 		{
  79. 			currentValueSelected = -1;  //Remove any selection index			
  80. 			if(ShowNoMatchMessage)
  81. 				document.getElementById("divOutput").innerHTML = "<span class='noMatchData'>" + noMatchingDataMessage + "</span>";
  82.  
  83. 			else
  84. 				HideTheBox();
  85.  
  86. 		}
  87. 	}
  88.  
  89. }
  90.  //Variable used to number span element ids
  91. var countForId = 0;
  92.  
  93. //Find all of the matches in the string
  94. function MakeMatches(xCompareStr,xElemId)
  95. {		
  96. ...		
  97. return matchArray
  98. }
  99. var iAmTiming = false;
  100. //Sets the position of the div under the text box in focus
  101. function SetElementPostion(xElement,xPosElement)
  102. {	
  103. ...
  104. }
  105. //Variables for create underline
  106. var undeStart = "<span class='spanMatchText'>";
  107. var undeEnd = "</span>";
  108.  
  109. //variables for span elements
  110. var selectSpanStart = "<span style='width:100%;display:block;' class='spanNormalElement' onmouseover='SetHighColor(this)' ";
  111. var selectSpanEnd ="</span>";
  112. //Function makes underline under the text
  113.  
  114. function CreateUnderline(xStr,xTextMatch,xVal)
  115. {
  116. ...	
  117. }
  118. //function sets the textbox and hidden textbox values
  119. function SetText(xVal)
  120. {
  121. 	theTextBox.value = theOptions[xVal][0];  //set text value	
  122. 	theTextBox2.value = theOptions[xVal][1];	
  123. 	document.getElementById("divOutput").style.display = "none";  //hide the options list
  124. 	currentValueSelected = -1;  //remove the selected index
  125. }
  126. //Gets value when option is clicked
  127. function GrabHighlighted()
  128. {
  129.  
  130. 	if(currentValueSelected != -1)
  131. 	{
  132.  
  133. 		xVal = document.getElementById("OptionsList_" + currentValueSelected).getAttribute("theArrayNumber"); //grab the array index of the value
  134. 		SetText(xVal);  //set value
  135. 		document.getElementById("divOutput").style.display = "none"; //hide the options list
  136.  
  137. 	}
  138.  
  139. }
  140. //Set High color when moused over
  141.  
  142. function SetHighColor(xElem)
  143. {
  144. ...
  145. }
  146.  
  147. //Handles the up an down arrows for moving highlight color
  148. function MoveHighlight(xDir)
  149. {	
  150. ...
  151. }
  152. function HideTheBox()
  153. {
  154. ..
  155. }
  156. function EraseTimeout()
  157. {	
  158. ..
  159. }
  160. function StartTimeout()
  161. {	
  162. }
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2005
Posts: 49
Reputation: navyjax2 is an unknown quantity at this point 
Solved Threads: 1
navyjax2 navyjax2 is offline Offline
Light Poster

Re: pass the value to the text box

 
0
  #3
Jan 31st, 2008
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 Syntax (Toggle Plain Text) 
  1. <HTML><HEAD><TITLE>TEST</TITLE>
  2.   <SCRIPT language="JavaScript">
  3.  
  4.     function loadBox(stuff) {
  5.       document.Form1.TextBox2.value = stuff;
  6.     }
  7.  
  8.   </SCRIPT>
  9. </HEAD><BODY>
  10.   <FORM name="Form1">
  11.     <INPUT type="textbox" id="TextBox1" value="Stuff here"/>
  12.     <INPUT type="textbox" id="TextBox2" />
  13.     <INPUT type="button" value="Click Me" onclick="loadBox(document.Form1.TextBox1.value)">
  14.   </FORM>
  15. </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:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <SCRIPT language="JavaScript">
  2.  
  3. self.setInterval("doCheck()",5000);
  4.  
  5. function doCheck() {
  6.   if (document.Form1.TextBox1.value) {
  7.   document.Form1.TextBox2.value = document.Form1.TextBox1.value}
  8. }
  9.  
  10. </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 9:25 pm.
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum
Thread Tools Search this Thread



acid2 ajax ajaxcode ajaxexample ajaxhelp ajaxjspservlets animate array automatically beta box browser bug calendar captchaformproblem cart child close codes css date debugger decimal dependent disablefirebug dom download element embed engine enter error events ext file firefox form forms frameworks getselection google gwt gxt hiddenvalue highlightedword hint html htmlform ie7 ie8 iframe index java javascript javascripthelp2020 jawascriptruntimeerror jquery jsp jump libcurl listbox maps masterpage math media menu microsoft mimic mp4 onmouseoutdivproblem onmouseover onreadystatechange paypal pdf php player position post problem programming prototype redirect regex safari scale scriptlets search security select software sql text textarea unicode w3c website window windowofwords windowsxp \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC