How Can I Achieve This?

**Thuita Maina** · 04-11-2016, 05:49 PM

...
Hi Folks!

I would like to achieve the following with my website's search textbox on the menu bar:
i). The text on the textbox clears when a user places cursor on it intending to type
ii). The search_form.php page loads after the enter key is hit (currently, it is loading as soon as a user begins typing)

How can I achieve that? Below is the code that covers the menu bar in which the search textbox appears:

Code:

<ul>
<li<?php if($page=='index.php') {?> class="selected"<?php } ?>><a href="index.php">Home</a></li>

<li<?php if($page=='about.php') {?> class="selected"<?php } ?>><a href="about.php">About</a></li>
						
<li id="acknowledgement"<?php if($page=='acknowledgement.php') {?> class="selected"<?php } ?>><a href="acknowledgement.php">Acknowledgement</a></li>
                                                 
<li<?php if($page=='archives.php') {?> class="selected"<?php } ?>><a href="archives.php">Archives</a></li>
						  
<li<?php if($page=='feedback.php') {?> class="selected"<?php } ?>><a href="feedback_form.php">Feedback</a></li>
						
<li<?php if($page=='search.php') {?> class="selected"<?php } ?>><a>
<input type="text" id="tfq" class="tftextinput3" name="q" size="6" maxlength="120" value="Search" oninput="parent.location='search_form.php'">
</li>                  
</ul>

**sunfighter** · 04-11-2016, 07:47 PM

Here you go:

Code:

<body>

<li>
<input type="text" id="tfq" class="tftextinput3" 
name="q" size="6" maxlength="120" 
value="Search">
</li>

<script>
var x = document.getElementById("tfq");
x.addEventListener("focus", function(){
	x.setAttribute("value", "");
});
x.addEventListener("keypress", function(event){
	if (event.keyCode == 13)
		location.replace("search_form.php");
});
</script>
</body>

Thread: How Can I Achieve This?

Thread Tools

Rate This Thread

How Can I Achieve This?

Users who have thanked sunfighter for this post:

Tags for this Thread

Posting Permissions