Combining javascript functions

Question

hi i am using javascript function to balnk ma textboxes when its clicked, initially the text boxes contain their respective label names, eg: Client Name, Company etc. When the text box is clicked it makes the text box empty so data can be types. for this i am using a javascript function and for each textbox i have to have a seperate function, can anyone tell me how i can combine all these function, the only different thing in each function is the value used in the textbox and the textbox name.

The Javascript function

    function clientnameclear() {
    if(document.bunkerfrm.clientname.value=="Client Name") {
        var bunkerfrm = document.bunkerfrm.clientname.value="";
        var bunkerfrm = document.bunkerfrm.clientname.focus();
    }
    else {
        var bunkerfrm = document.bunkerfrm.clientname.focus();
    }
}

function clientnamereset() {
    if(document.bunkerfrm.clientname.value=="") {
        var bunkerfrm = document.bunkerfrm.clientname.value="Client Name";
    }
}

function vesselnameclear() {
    if(document.bunkerfrm.vesselname.value=="Vessel Name") {
        var bunkerfrm = document.bunkerfrm.vesselname.value="";
        var bunkerfrm = document.bunkerfrm.vesselname.focus();
    }
    else {
        var bunkerfrm = document.bunkerfrm.vesselname.focus();
    }
}

function vesselnamereset() {
    if(document.bunkerfrm.vesselname.value=="") {
        var bunkerfrm = document.bunkerfrm.vesselname.value="Vessel Name";
    }
}

function compclear() {
    if(document.bunkerfrm.company.value=="Company") {
        var bunkerfrm = document.bunkerfrm.company.value="";
        var bunkerfrm = document.bunkerfrm.company.focus();
    }
    else {
        var bunkerfrm = document.bunkerfrm.company.focus();
    }
}

function compreset() {
    if(document.bunkerfrm.company.value=="") {
        var bunkerfrm = document.bunkerfrm.company.value="Company";
    }
}

The Html Code is

<form name="bunkerfrm" id="bunkerfrm" action="#" method="post"><br>
<input type="text" name="clientname" class="txtbox" value="Client Name" onmousedown="clientnameclear()" onclick="clientnameclear()" onblur="clientnamereset()" />
<br /><br>
<input type="text" name="company" class="txtbox" value="Company" onmousedown="compclear()" onclick="compclear()" onblur="compreset()" />
<br /><br>
<input type="submit" name="submitting" class="bunksubmit" value="Send Your Inquiry" /><br>
 </form>

Answer 1

First, store the default values somewhere, such as the alt of the given input.

<form name="bunkerfrm" id="bunkerfrm" action="#" method="post"><br>
<input type="text" name="clientname" alt="Client Name" class="txtbox" value="Client Name" onfocus="clear_text(this);" onblur="reset_text(this);" />
<br /><br>
<input type="text" name="company" class="txtbox" alt="Company" value="Company" onfocus="clear_text(this);" onblur="reset_text(this);" />
<br /><br>
<input type="submit" name="submitting" class="bunksubmit" value="Send Your Inquiry" /><br>
 </form>

Then pass the input element this as the parameter to these onfocus/onblur functions:

function clear_text(elem)
{
    if (elem.value == elem.alt)
        elem.value = "";
}

function reset_text(elem)
{
    if (elem.value == "")
        elem.value = elem.alt;
}

Which will clear the input when it gets focus if its value is the same as the placeholder stored in the alt attribute. The event onblur will trigger the reset_text function which will check if the value is empty and restore it to the default placeholder stored in the alt attribute.

Answer 2

Use placeholder :

<input type="text" name="clientname" placeholder="Client Name" class="txtbox" />
<br /><br>
<input type="text" name="company" class="txtbox" placeholder="Company" />
<br /><br>
<input type="submit" name="submitting" class="bunksubmit" placeholder="Send Your Inquiry" /><br>
</form>

Answer 3

I suggest you use and/or study existing libraries, such as:

• In-Field http://fuelyourcoding.com/scripts/infield/
• ClearField http://labs.thesedays.com/projects/jquery/clearfield/