Question

I’ve got a form setup with 2 text boxes that have default values that can be cleared on focus. The boxes are optional not compulsary. So ultimatley the form can be submitted without them, But when the form is submitted with the default values set it appears to pass them on POST.

Is there anyway to clear them from the post data and submit them as NULL / Blank values.

My form code is as follows :

<input id="town" name="SeV[2]"  type="text" autocomplete="off" style="width: 149px; color:#ccc;" onfocus="if(this.value == 'Enter Town / City') this.style.color = '#000'; { this.value = ''; }" value="Enter Town / City" class="field">

<input type="text" style="width: 149px; color:#ccc;" maxlength="255" name="SeV[4]" onfocus="if(this.value == 'e.g Football') this.style.color = '#000'; { this.value = ''; }" value="e.g Football">

Thanks in advance.

Answer 1

Add this code and it should work fine:

$(document).ready(function() {
    $("form").submit(function() {
        $("input:text", $(this)).each(function(index) {
            if (this.value === this.defaultValue)
                this.value = "";
        });
    });
});

It will iterate over all text boxes upon form submission and set their value to empty if equals to their default value.

Live test case. (Click submit and see the default values are being cleared, if you change a value it will stay)