0

Hello,

I have written a 'predictive text' widget using JavaScript/AJAX. When user enters a string of letters into form, the list of possible matches is displayed under the form. This works well and good, now I am trying to make it so that when the user clicks on a certain word, the form input filed is populated with that word. I have tried like this:

in my HTML file:

<form>
<input id="foo" type="text" />
</form>
<div id="bar" onClick="populate(this.value);">
</div>

And, in JavaScript, I have:

function populate (baz) {
document.getElementById('foo').innerHTML = word;
}

But this is not working. Any suggestions?

Edited by ItecKid: n/a

3
Contributors
9
Replies
13
Views
7 Years
Discussion Span
Last Post by Taywin
0

To set the value of the textbox, use .value, not .innerHTML

Hello,

Thanks very much for your reply. I have edited my code per your suggestion; but now when I click on any word in the div my textbox is filled with 'undefined'. Can I not use this.value to get the information from the div? I have tried wrapping each of the individual elements of the div in a <span> as well, this was also unsuccessful.

0

Try something like this:

<form>
<input id="foo" type="text" />
</form>
<div id="bar" onclick="populate(this);">
value for the div
</div>

JS:

function populate(el) {
document.getElementById('foo').value= document.getElementById(el.id).firstChild.nodeValue;
}
0

Hello,

Thanks again for your help. Unfortunately, however, my div has multiple child elements, so always populating the box with the first child is not the intended effect. How can I make it so that the element that is clicked on is populated in the text box?

Thanks.

-1

Your question is a bit unclear to me. You want to have clicking areas (div) and add the value into a text field? Anyway, the sample html page which includes everything is below. This is just a simple adding text from your 'onclick' to the 'text field' or 'text area' in a form.

<html>
<head>
<script type="text/javascript">
function populate (inElem) {
  var el = document.getElementById("foo")  // display in text box
  var el2 = document.getElementById("footxt")  // display in text area
  if (el) {  // in case 'foo' does not exist
    el.value += " " + inElem.innerHTML
  }
  if (el2) {
    el2.value += inElem.innerHTML+"\n"
  }
}
</script>

<body>
<form>
  <input id="foo" type="text" size=60 />
  <br />
  <textarea id="footxt" rows="10" cols="40"></textarea>
</form>

  <div id="bar1" onClick="populate(this);">
  Value1
  </div>

  <div id="bar2" onClick="populate(this);">
  Value2
  </div>

  <div id="bar3" onClick="populate(this);">
  Value3
  </div>

  <div id="bar4" onClick="populate(this);">
  Value4
  </div>

  <div id="bar5" onClick="populate(this);">
  Value5
  </div>
</div>
</body>
</html>
0

Hello,

Apologies for my being unclear; I am writing predictive text application. As the user starts to type in the text field, a list possible words appears in the div; if the user clicks on one of those words; then that word is put into the text box. The problem with your solution is that I can not hard code a div for each word, because I do not know in advance how many words will be displayed, it is based on the search string the user enters.

0

I am not sure if you solve the problem by yourself or go to the link I gave you. By the way, it is not nice and unfair to give my post as negative while your question is unclear; thus, my answer is off the point.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.