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. Link to comment https://forums.phpfreaks.com/topic/158306-solved-get-div-to-disappear-onclick/ 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. Link to comment https://forums.phpfreaks.com/topic/158306-solved-get-div-to-disappear-onclick/#findComment-834964 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 =\ Link to comment https://forums.phpfreaks.com/topic/158306-solved-get-div-to-disappear-onclick/#findComment-834974 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> Link to comment https://forums.phpfreaks.com/topic/158306-solved-get-div-to-disappear-onclick/#findComment-834976 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? Link to comment https://forums.phpfreaks.com/topic/158306-solved-get-div-to-disappear-onclick/#findComment-834977 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> Link to comment https://forums.phpfreaks.com/topic/158306-solved-get-div-to-disappear-onclick/#findComment-834990 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();"> Link to comment https://forums.phpfreaks.com/topic/158306-solved-get-div-to-disappear-onclick/#findComment-834991 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>"; } Link to comment https://forums.phpfreaks.com/topic/158306-solved-get-div-to-disappear-onclick/#findComment-834995 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 Link to comment https://forums.phpfreaks.com/topic/158306-solved-get-div-to-disappear-onclick/#findComment-835920 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!! Link to comment https://forums.phpfreaks.com/topic/158306-solved-get-div-to-disappear-onclick/#findComment-836324 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.