Placeholder text is returned when using value property of input text box in form

Question

I am using webshim to provide the html5 placeholder functionality in my textboxes in IE8.

This works fine when I submit the form - the field is blank if the user has not entered anything.

But when I tried to jazz things up by making an ajax request hooked to an onclick event the following line of code returns the placeholder text instead of an empty string.

document.getElementById('idOfTextBox').value

How can I avoid this behavior?

Answer 1

V31, that was super quick! You are correct, jquery gets it right.

$('#idOfTextBox').val() 

gives the correct result

Answer 2

You could set this as alternative

if ( document.getElementById('idOfTextBox').value=='placeholder' ) {
    document.getElementById('idOfTextBox').value='';
}

basically, if the textbox value = the placeholder, it will set the value to '' (empty string)

Answer 3

Since the placeholder fix puts the value in the textbox and change the style to appear as a placeholder, you need to fix it before submitting it. Please find the code in jquery below:

$('form').submit(function() {
        $(this).find('.hasPlaceholder').each(function() {
            $(this).val('');
        });
});

Do not that in the textboxes where you want to remove the placeholder have the class 'hasPlaceHolder' so that it can find them

As per OP the jquery selector worked

$('#idOfTextBox').val()