Question

I have a form that asks for First/Last name, email and phone. I don’t want to use “placeholder” since IE lacks that ability. I have tried many things but do not know enough about script coding on how I can strip the default text out of the field when someone submits their information.

I need to find a way to have the code below only send me the data for the fields typed in and not the txt from the form like “Phone

<form action="{SUBMIT_FORM}" method="post">

<input type="text" class="input-field"  onblur="if (this.value == '') {this.value = '*First Name : (Required Field)';}" onfocus="if (this.value == '*First Name : (Required Field)') {this.value = '';}" name="{lead_first_name}" id="{lead_first_name}" value="*First Name : (Required Field)"/>
<input type="text" class="input-field"  onblur="if (this.value == '') {this.value = 'Last Name :';}" onfocus="if (this.value == 'Last Name :') {this.value = '';}" name="{lead_last_name}" id="{lead_last_name}" value="Last Name :"/>
<input type="text" class="input-field"  onblur="if (this.value == '') {this.value = '*Email : (Required Field)';}" onfocus="if (this.value == '*Email : (Required Field)') {this.value = '';}" name="{lead_email}" id="{lead_email}" value="*Email : (Required Field)"/>
<input type="text" class="input-field" onblur="if (this.value == '') {this.value = 'Phone :';}" onfocus="if (this.value == 'Phone :') {this.value = '';}" name="{lead_home_phone}" id="{lead_home_phone}" value="Phone :"/>
<input type="submit" class="sbt-btn" value="Submit"  onclick="{SUBMIT_SCRIPT}" />

{VALIDATE_SCRIPT}
</form>
<small>*We promise to never share, rent or sale your personal information.</small>

Answer 1

Here’s how I do it on a simple text input. HTML:

<form id="myemailform">
  <input class="text email" type="text" name="email" value="Enter e-mail address"/>
  <input type="submit" value="Submit">
</form

Jquery:

<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('input.text').each(function() {
        $.data(this, 'default', this.value);
    }).focus(function() {
        if (!$.data(this, 'edited')) {
            this.value = "";
        }
    }).change(function() {
        $.data(this, 'edited', this.value != "");
    }).blur(function() {
        if (!$.data(this, 'edited')) {
            this.value = $.data(this, 'default');
        }
    });

    $('#myemailform').submit(function() {
        if($(".email").val() == "Enter e-mail address") {$(".email").val("");}
        return true;
    });
});
</script>

The javascript looks for input.text elements and removes the placeholder text on focus, blur, or change. If the form is submitted with the placeholder text in place, it removes the placeholder text first before submitting.