xdanryan Posted May 15, 2009 Share Posted May 15, 2009 I'm relatively new to Javascript/AJAX but I have some decent experience in PHP. What I have been successful at doing is creating a text input that queries a database and narrows down options (basically a simple suggestion). The 'suggestions' are displayed in the div known as "txtHint". When I mouseOver the suggestions, they are auto filled in my text input which is great. What I'm trying to do is get the "txtHint" div to disappear onClick- basically getting rid of the 'suggestions' when I click one. If possible, I'd also prefer a solution that would have the div "txtHint" come back when i add to the text input. I'm assuming if I can get the clear function to work that this would happen anyway. Here's my html code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <script src="test.js"></script> </head> <body> <form> <input id="users" type="text" onkeyup="showUser(this.value)"> </form> <p> <div id="txtHint"> </div></p> </body> </html> test.js code (just the clear function) function clear() { document.getElementById("txtHint").value = 'none'; } php code: (random stuff edited out) //populate table while($row = mssql_fetch_array($result)) { echo "<tr><td><a href=\"#\" onmouseover=\"populate('" . $row["CODE"] . "');\" onclick=\"clear();\">" . $row["CODE"] . "</a></td></tr>"; } I've tried a TON of different methods that i found searching google but nothing seems to be working. Quote Link to comment Share on other sites More sharing options...
dfowler Posted May 15, 2009 Share Posted May 15, 2009 The only code I know to remove a div is document.getElementById("divName").style.display = 'none'; You could try something like this: function hide(obj) { obj.style.display = 'none'; } //populate table while($row = mssql_fetch_array($result)) { echo "<tr><td><a href=\"#\" onmouseover=\"populate('" . $row["CODE"] . "');\" onclick=\"clear();hide(this);\">" . $row["CODE"] . "</a></td></tr>"; } I'm not sure if that is exactly what you are looking for or not. Quote Link to comment Share on other sites More sharing options...
xdanryan Posted May 15, 2009 Author Share Posted May 15, 2009 Yeah, I already tried that with no luck =\ Quote Link to comment Share on other sites More sharing options...
dfowler Posted May 15, 2009 Share Posted May 15, 2009 Yeah, I already tried that with no luck =\ Ok, instead of the clear function why don't you try the following: function clear() { document.getElementById("txtHint").innerHTML = ' '; } That will remove everything within the div and replace with the . Then you techinically don't have to hide the div, as it would only display as follows: <p> <div id="txtHint"> </div> </p> Quote Link to comment Share on other sites More sharing options...
jackpf Posted May 15, 2009 Share Posted May 15, 2009 document.getElementById("divName").style.display = 'none';Yeah, I already tried that with no luck =\ How does that not work? Quote Link to comment Share on other sites More sharing options...
xdanryan Posted May 15, 2009 Author Share Posted May 15, 2009 Still no luck with either. I click the link on the table and nothing happens. My mouseover works fine though. Am I screwing something up? The compiled php looks completely fine: onclick = "clear();" test.js function clear() { document.getElementById("txtHint").innerHTML = ' '; } ajax.php //populate table while($row = mssql_fetch_array($result)) { echo "<tr><td><a href=\"#\" onmouseover=\"populate('" . $row["CODE"] . "');\" onclick=\"clear();\">" . $row["CODE"] . "</a></td></tr>"; } ajax.html <html> <head> <script src="test.js"></script> </head> <body> <form> <input id="users" type="text" onkeyup="showUser(this.value)"> </form> <p> <div id="txtHint" name="txtHint"> </div></p> </body> </html> Quote Link to comment Share on other sites More sharing options...
xdanryan Posted May 15, 2009 Author Share Posted May 15, 2009 one of the compiled lines of php: <tr><td><a href="#" onmouseover="populate('KRC13110021');" onclick="clear();"> Quote Link to comment Share on other sites More sharing options...
dfowler Posted May 15, 2009 Share Posted May 15, 2009 one of the compiled lines of php: <tr><td><a href="#" onmouseover="populate('KRC13110021');" onclick="clear();"> try this instead, just in case: //populate table while($row = mssql_fetch_array($result)) { echo "<tr><td><a href=\"#\" onmouseover=\"populate('" . $row["CODE"] . "');\" onclick=\"javascript:clear();\">" . $row["CODE"] . "</a></td></tr>"; } Quote Link to comment Share on other sites More sharing options...
xdanryan Posted May 17, 2009 Author Share Posted May 17, 2009 one of the compiled lines of php: <tr><td><a href="#" onmouseover="populate('KRC13110021');" onclick="clear();"> try this instead, just in case: //populate table while($row = mssql_fetch_array($result)) { echo "<tr><td><a href=\"#\" onmouseover=\"populate('" . $row["CODE"] . "');\" onclick=\"javascript:clear();\">" . $row["CODE"] . "</a></td></tr>"; } no luck Quote Link to comment Share on other sites More sharing options...
xdanryan Posted May 18, 2009 Author Share Posted May 18, 2009 clear is apparent a reserved name used a different function name, it worked. thank you for your input!! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.