clear the input field of any entered text type

Just starting out with Javascript!

Below is some code:

This code is taken directly from the HTML page

<form action="#" id="ToolKeywordSearch">
  <input type="text" class="ProductFinderText"
          id="ToolSearchField"onblur="if(this.value=='')    
             {this.value='Enter Search Term ';}" 
                onclick="if (this.value == 'Enter Search Term ')
                  { this.value = ''; }" value="Enter Search Term " />
</form>

 ___________________________________
|  _____________________     ______ |      (restriction does not let me insert image)
| |                  |O |   |      ||
| |enter search term | \|   |Search||                      
|  ---------------------     ------ |
|___________________________________|

This code makes it so that when the search button is pressed, the search field opens.

The search button itself is just a background image:

#ToolSearchField {

 background:url(../../Content/images/search_but.png) no-repeat scroll 
    right center   transparent;

cursor:pointer; }

How can I remove the default text in the search field? I've tried using both Javascript and CSS but without success.

<script type="text/javascript">
    var jo = document.getElementById("ToolSearchField").value;
    alert(jo);
</script>

When I run this script, the output is always "Enter Search Term".

Then if I try using jo.remove(); it doesn't have any effect.

var jo = document.getElementById("ToolSearchField").value;
    jo.remove();

In the end, I want to have a search button that triggers the search action upon clicking.

Please, could you tell me what mistake I might be making?

Answer №1

When you instantiate the variable jo, it contains the string "Enter Search Term" right after your first line of JavaScript code. However, in the subsequent line, you attempt to remove this string using remove(), which does not actually achieve anything on the original element.

Perhaps try setting

document.getElementById("ToolSearchField").value = "";
instead!

Answer №2

If you're in need of a placeholder, here is the code to use:

<input type="text" class="ProductFinderText"
    id="ToolSearchField"
    placeholder="Enter Search Term " />

Don't forget to add a placeholder polyfill for older browsers.

Answer №3

Check out this helpful guide:

This tutorial provides step-by-step instructions on how to achieve the desired effect using jQuery. If you're new to Javascript, I recommend exploring jQuery as it simplifies many tasks.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Enhance the language with react-intl and MobX State Tree integration

Currently, I am integrating react-intl with Mobx state tree for the first time. Within my project, there are two buttons located in the header section - one for 'it' and the other for 'en'. Upon clicking these buttons, the selected lan ...

How to retrieve the index of a nested ng-repeat within another ng-repeat loop

On my page, there is an array containing nested arrays that are being displayed using ng-repeat twice. <div ng-repeat="chapter in chapters"> <div ng-repeat="page in chapter.pages"> <p>Title: {{page.title}}</p> </d ...

Issue with serving static files in ExpressJs

I'm facing an issue with my Express app where the static files are not working properly for certain routes. For example, when I visit '/', all styles and images load correctly as expected when the index.ejs is rendered. However, when I navi ...

Storing JSON data in LocalStorage or within the App on Ionic 2

I am currently in the process of developing a mobile app for both IOS and Android platforms. The app will feature a list of objects including images, names, etc., which are stored on a backend server powered by node.js. My goal is to allow users of the ap ...

Encountering issues with multiple arguments in ajax within a C# MVC application - Further details included

There seems to be a missing piece in my code. Here's my controller method public void SubmitSweep(int personID, int DD, int MM, int YYYY, int hh, int mm, int dealId) Here's how I define my button <button id="submit@(person.Id)" clas ...

Leveraging Global SCSS Variables in Next.JS with SASS

In my Next.js Application, I have a global CSS file named main.scss imported in the pages/_app.js file. _app.js import '../global-styles/main.scss' export default function MyApp({ Component, pageProps }) { return <Component {...pageProps} ...

Incorporating AngularJS and Bootstrap for seamless pagination experience

My JSON data looks like this: http://localhost:3001/images?page=1 {"images":[{"_id":"542e57a709d2d60000c93953","name":"image1","url":"http://www.syll.com","__v":0},{"_id":"542e58e19d237e5b790f4db2","name":"image154","url":"www.rufyge.com"},{"_id" ...

Utilize Restangular to send data as a payload rather than a query string

Currently, my backend service is set up to register a new user in our system using the following URL: /api/users/register When using Restangular, post requests are typically sent as either query string: Restangular.all('users').post("register" ...

Using the power of Selenium's XPath, we can easily navigate through a table to access

Looking for assistance in creating selenium xpath for the various column links within a table. Each row has a unique identifier and contains information about a product, including the name. Based on the product name, I need to locate other links within the ...

HTML5's video tags are capable of displaying video content without audio playback functionality

My current project involves importing videos using PHP, utilizing a video tag. However, I've encountered an audio issue while doing so. I've tried various codes such as: <video controls> <source src="https://www.w3schools.com/html/mov_ ...

Can the :after pseudo-element be modified when hovering, except when hovering over the after element itself?

Currently, my CSS code looks like this: class-name:hover:after {} Although it works well, the hover effect triggers even when hovering over the after portion of the element. Is there a way to modify the code so that the :hover only applies when hovering ...

Utilize the client's IP address as a cookie in order to recognize return visits and showcase a special message following the initial visit

First of all, a big thank you to anyone who can help resolve this issue. I apologize if this has been asked before (I couldn't find it anywhere, so I decided to post a new question). The main problem I am facing is getting my webpage to show an alert ...

Add the element of surprise. The element must be either a Model, an Association, or an object

Struggling with configuring PostgreSQL with Node.js, I followed this tutorial and encountered an error without any specific details: Here is the stacktrace Unhandled rejection Error: Include unexpected. Element has to be either a Model, an Association or ...

Using jQuery, effortlessly scroll a div to a specific vertical position of your choice

After referring to this previous question: Scrollpane on the bottom, css is hacky, javascript is hard I followed the same scrolling method as explained in the accepted answer. Now there's a new requirement to select a specific item (e.g., through a ...

Regarding passing input into a JavaScript class method that is exported through the exports keyword

The inquiry at hand relates to ExtendScript code, however, I believe it should be independent of any specific javascript implementation. If we have the following in a JS library file (base64.js) exports.encode64 = encoder('+/'); //... function ...

Eliminate the empty space that separates the text from the border

I'm looking to adjust the spacing between my number and its top and bottom borders. https://i.stack.imgur.com/UYFpX.png Currently, the number takes up the full width but leaves empty space above and below it. Any suggestions on how I can make it fi ...

Is it possible to utilize JSX independently of React for embedding HTML within a script?

Is it possible to incorporate inline HTML within a script using a library such as jsx? <script src="jsx-transform.js"></script> <script type="text/jsx"> define('component', function () { return (<div>test html code< ...

Trying out the ClientPortal in Next.JS with Jest Testing

I'm currently working with NextJS and I want to run tests on the ClientPortal component. My testing toolkit consists of Jest and React Testing Library. Below is a sample code snippet for the ClientPortal component: import { useEffect, useRef, useStat ...

Deactivate toggle effect by clicking on a different link

My existing JavaScript code changes the background color of a link when it is clicked: $(".button").click(function(){ $(this).css('background-color', '#555'); }); While this functionality works, I am looking to have the color tog ...

Searching through data fields in MongoDB that have been filled with information

In my Mongoose queries, I am dealing with models known as "Activities" that have a specific schema structure. This schema includes fields such as actor, recipient, timestamp, activity, event, and comment. var activitySchema = new mongoose.Schema({ act ...