4 replies to this topic

[j.lai]

So I have a form that has watermark hints on the textboxes and when the user types stuff into the textbox, the watermark disappears. My watermark colors are #888 and actual font color is #000.

Now the problem is, whenever I clear my form, it changes my watermark color to #000 and I have no clue how to change it back to #888.

Javascript file

var HintClass = "hintTextbox";
var HintActiveClass = "hintTextboxActive";

// define a custom method on the string class to trim leading and training spaces
String.prototype.trim = function() {return this.replace(/^\s+|\s+$/g, '');};

function initHintTextboxes() {
  var inputs = document.getElementsByTagName('input');
  for (i=0; i<inputs.length; i++) {
    var input = inputs[i];
    if (input.type!="text" && input.type!="password")
      continue;

    if (input.className.indexOf(HintClass)!=-1) {
      input.hintText = input.value;
      input.className = HintClass;
      input.onfocus = onHintTextboxFocus;
      input.onblur = onHintTextboxBlur;
    }
  }
}

function onHintTextboxFocus() {
  var input = this;
  if (input.value.trim()==input.hintText) {
    input.value = "";
    input.className = HintActiveClass;
  }
}

function onHintTextboxBlur() {
  var input = this;
  if (input.value.trim().length==0) {
    input.value = input.hintText;
    input.className = HintClass;
    
  }
}

window.onload = initHintTextboxes;

CSS File

input.hintTextbox
{
    color: #888;
}
input.hintTextboxActive
{
    color: #000;
}

HTML form

<form name="maintainClientForm" action="http://localhost:8080/ILIAssembly-war/MaintainClientController" method="POST">
            <table>
                <tr>
                <td> Name:</td>
                <td><input type="text" id="name" name="name" value="Company Name" size="40" class="hintTextbox"></td>
                <td></td>
                </tr>

                <tr>
                <td>Address:</td>
                <td><input type="text" name="address" value="Address" size="40" class="hintTextbox"></td>
                <td></td>
                </tr>

                <tr>
                <td>City:</td>
                <td><input type="text" name="city" value="City" size="40" class="hintTextbox"></td>
                <td></td>
                </tr>

                <tr>
                <td>Province:</td>
                <td><input type="text" name="province" value="Province" size="40" class="hintTextbox"></td>
                <td></td>
                </tr>

                <tr>
                <td>Country</td>
                <td><input type="text" name="country" value="Country" size="40" class="hintTextbox"></td>
                <td></td>
                </tr>

                <tr>
                <td>Postal Code:</td>
                <td><input type="text" name="postalCode" value="A1A2B2" size="6" maxlength="6" class="hintTextbox"></td>
                <td></td>
                </tr>

                <tr>
                <td>Phone Number:</td>
                <td><input type="text" name="phoneNumber" value="1234567890" size="10" maxlength="10" class="hintTextbox"></td>
                <td></td>
                </tr>

                <tr>
                <td>Fax Number:</td>
                <td><input type="text" name="faxNumber" value="Optional" size="10" maxlength="10" class="hintTextbox"></td>
                <td></td>
                </tr>
                
            </table>
            <table>
                <tr>
                <td valign="bottom" height="100px"><input class="button" type="submit" name="action" value="Add"></td>
                <td valign="bottom" height="100px"><input class="button" type="submit" name="action" value="Update" disabled="true"></td>
                <td valign="bottom" height="100px"><input class="button" type="submit" name="action" value="Delete" disabled="true"></td>
                <td width="50px"></td>
                <td valign="bottom" height="100px"><input class="button" type="submit" name="action" value="Search"></td>
                <td valign="bottom" height="100px"><input class="button" type="reset" name="reset" value="Clear"/></td>
                </tr>
            </table>
            </form>

[BlaineSch]

When it clears, also call a function:

            function clearForm() {
                var fields = document.getElementsByTagName("input");
                var length = fields.length;
                for(var i = 0;i<length;i++) {
                    fields[i].className = HintClass;
                }
                return true;
            }

<input class="button" type="reset" name="reset" value="Clear" onclick="javascript:clearForm();"/>

[j.lai]

Thanks!
But!! that also reset the size and style of my buttons =(
How would can I change the method to change only the textboxes?

[BlaineSch]

You could check to see if it's currently the other class before switching it. Untested

            function clearForm() {
                var fields = document.getElementsByTagName("input");
                var length = fields.length;
                for(var i = 0;i<length;i++) {
                    if(fields[i].className == HintActiveClass) {
                        fields[i].className = HintClass;
                    }
                }
                return true;
            }

[j.lai]

you're a genious, thanks!