jQuery watermarkinput plugin POSTs watermark values to server

Question

I'm using the jQuery watermarkinput plugin to place hint text inside text box input fields. When the page POSTs back to the server, the watermark values are POSTed as the input box values.

How do I prevent the watermark values from being POSTed?

Answer 1

I don't know that plugin, but your form fileds would have a class assigned to it when watermark is displayed (most likely). Before submit, check the field for watermark class and if it's present set value of the field to empty

Answer 2

Sounds like your hint text is being directly added to the value of the input. Hence being sent in the POST data. I'm guessing you were trying to overlay the hint text using the watermark plugin (though I'm not familiar with this plugin), but it doesn't seem to be working.

I'll update the answer when the question has more info.

Answer 3

I'm not familiar with the plugin. But, you could add an onsubmit() event handler to your form and check whether the input box that contains the watermark text in question and clear it out before submitting as in the simplified example below.

<form id="myform">
 <input type="text" id="myWatermarkedBox" value="Watermark Text"/>
</form>

Then in your javascript:

$(function(){
 $("myform").submit(function(){
    if($("myWatermarkedBox").val() == "Watermark Text")){
      $("myWatermarkedBox").val('');
    }
 });
});

Answer 4

Short of validating against the watermark text on submission, you're stuck. The watermark plugin (digitalbush.com) can't help you with that.

Edit
Apparently, it can (globally). As described in the comment:

$.Watermark.HideAll();  // hide's all watermark text
$.Watermark.ShowAll();  // restores watermark text