CODEWITHSUNDEEP
javascripthtmlformsdefault
Alexander Lito Gallegos
Alexander Lito Gallegos

Reputation: 25

HTML Form - Don't Write Default Values

I've found a ton of solutions online for clearing default text out of a field when the field is focused on, then replacing it if the user exits the field without entering anything. The one I finally went with was this solution from Electric Toolbox (http://www.electrictoolbox.com/jquery-change-default-value-on-focus/):

$('.default-value').each(function() {
var default_value = this.value;
$(this).focus(function() {
    if(this.value == default_value) {
        this.value = '';
    }
});
$(this).blur(function() {
    if(this.value == '') {
        this.value = default_value;
    }
});
});

This works just fine; every text input field of class default-value switches to a blank field when focused on. When I leave the field, either the default value returns if nothing was entered, or if something was entered, that data stays in the field. So far so good.

There's a catch here however; the data in the default of the field is being written to the database when the user submits the form. Since not all of our fields are required, we have several which a user may not choose to fill out. This means we have a final data list with a lot of people with an address of: "John Sample, Street Address, Address 2, City State Zip."

What I would love is to be able to tell the form not to submit fields if the information in them matches the default. I don't know javascript - I'm just cobbling together code that I can find - so I'm sure I have the syntax wrong, but ideally this would be something like:

onsubmit
if address1 = "Street Address"
then address1 = ""

Is there any reasonably clean and simple way to do this? (Also, if you could explain it like you're talking to someone who recently suffered a traumatic brain injury, that would be good too.)

Upvotes: 2

Views: 2636

Answers (5)

Anthony
Anthony

Reputation: 37065

On load, you should create an array of the default values, then on submit, loop through each field and see if it still have the default, and if so, set it to blank.

The only catch is if their name really is "First Name".

Upvotes: 0

stealthyninja
stealthyninja

Reputation: 10371

The syntax could be

$('.your-form').submit(function(e) {
    e.preventDefault(); // stop the form's default action of submitting


    if (validateForm()) {
        $(this).submit(); // proceed to normal processing
    }
});

// the over-all validation function
function validateForm()
{
    if ($('.the-field').val() == 'default value') {
        return false;
    }

    // the rest of your fields...

    return true;
}

Upvotes: 0

BjarkeCK
BjarkeCK

Reputation: 5729

You could simply use the placeholder attribute!

http://jsfiddle.net/3efja/

Upvotes: 0

bsod101
bsod101

Reputation: 374

In your submit handler, iterate over each field to see if field values are equal to the label, in which case set to empty.

Upvotes: 0

ChristopheCVB
ChristopheCVB

Reputation: 7315

Do you know placeholder html5 attribute ?

<input type="text" placeholder="default text"/>

Upvotes: 4

Related Questions