Question

I am having issue in checking which input has been clicked using unobstructive javascript. I know the method to pass value from function by directly writing it in the input tag but I would like to know how can we pass value from javascript file. As of now adding event to the object is only calling function but not able to send any value

Below is html

    <input id="searchfield" name="searchfield" type="text" value="Your e-mail address" />
<br />
<input id="searchfield2" name="searchfield2" type="text" value="Your password" />

and js code for same I hope you will help me out.

// JavaScript Document
    function removeTextWhenClicked(chk)
    {
        if(chk == 1)
        {
            document.getElementById("searchfield").value = "";
        }
        else if(chk == 2)
        {
            document.getElementById("searchfield2").value = "";
        }
    }
    function removeTextWhenBlur(chk)
    {

        if(chk == 1)
        {
            if(document.getElementById("searchfield").value == "")
            {
                document.getElementById("searchfield").value = "please enter username";
            }
            else
            {
                document.getElementById("searchfield").style.color = "#333333";
            }
        }
        else if(chk == 2)
        {
            if(document.getElementById("searchfield2").value == "")
            {
                document.getElementById("searchfield2").value = "please enter password";
            }
            else
            {
                document.getElementById("searchfield2").style.color = "#333333";
            }
        }
    }
    window.onload = function(){

    document.getElementById("searchfield").onclick = removeTextWhenClicked;
    document.getElementById("searchfield").onblur = removeTextWhenBlur;
    document.getElementById("searchfield2").onclick = removeTextWhenClicked;
    document.getElementById("searchfield2").onblur = removeTextWhenBlur;
    }

Thanks and Regards,
Sagar

Answer 1

The answer to the question you actually asked is that you can do it by building the data into a closure, and then use the closure as your handler:

document.getElementById("searchfield").onclick = buildHandler(removeTextWhenClicked, 1);
document.getElementById("searchfield2").onclick = buildHandler(removeTextWhenClicked, 2);

…where buildHandler looks like this:

function buildHandler(callback, arg) {
    return function() {
        return callback(arg);
    };
}

More about closures here, they’re a very powerful and useful tool in JavaScript.

However, in your specific case, you don’t need to do that, because the only information you were passing into the function was a means of determining which element you’re dealing with, and you already have that: this. Within the event handler, this will point to the element on which you set the handler. So for instance, removeTextWhenClicked can be:

function removeTextWhenClicked()
{
    this.value = "";
}

…and since you didn’t need to bind any data to that, you can still use it directly as you were originally.

Your blur handlers vary more, and so you might need to bind data to them. Alternately, you can make the whole thing markup-driven:

<input id="searchfield" name="searchfield" type="text" data-msg="please enter username" value="Your e-mail address" />
<br />
<input id="searchfield2" name="searchfield2" type="text" data-msg="please enter password" value="Your password" />

Note the new data-img attributes. Now your removeTextWhenBlur becomes:

function removeTextWhenBlur()
{
    if (this.value == "")
    {
        this.value = this.getAttribute("data-msg");
    }
    else
    {
        this.style.color = "#333333";
    }
}

Custom attributes like data-msg are invalid as of HTML4 and earlier (although I’ve never seen a browser that disallowed them) and so that markup won’t validate with validation tools. As of HTML5, custom attributes starting with data- are valid. So you can go ahead and use them now if you don’t use validation as part of your development process [validation is a Good Thing(tm)], or if you use the HTML5 doctype.

Now, attributes may not be the right thing for you. They can be very useful on large teams where the people doing the markup are different from the people doing the code, and so keeping things fairly decoupled is important. Another approach, though, would map the messages to the elements by their ID. Using your original markup, those functions could work like this:

var placeholders = {
    "searchfield":  "please enter username",
    "searchfield2": "please enter password"
};

function removeTextWhenClicked()
{
    this.value = "";
}
function removeTextWhenBlur()
{
    if (this.value == "")
    {
        this.value = placeholders[this.id];
    }
    else
    {
        this.style.color = "#333333";
    }
}

---

Off-topic #1:

I’d probably change removeTextWhenClicked to:

function removeTextWhenClicked()
{
    if (this.value == placeholders[this.id])
    {
        this.value = "";
    }
    this.style.color = ''; // In case we colored it earlier
}

Off-topic #2:

It’s well worth using a JavaScript library like jQuery, Prototype, YUI, Closure, or any of several others. They smooth out differences across browser implementations, provide helpful utility functions, and generally save you more time than they consume.

Off-topic #3:

The method of handler assignment you’re using, assigning to a property called onclick and such, is called the “DOM0” method. It’s fairly old-fashioned and restrictive. It’s worth looking at the newer “DOM2” way of doing it, which is addEventListener, although sadly it’s attachEvent on IE. (Any JavaScript library will provide a wrapper to deal with that.) One advantage of DOM2 handlers is that more than one handler can be set for the same event on the same element, whereas with the DOM0 mechanism, assigning a new handler bludgeons (removes) any previous one.