Question

I use jQuery to simulate the HTML5 placeholder function:

// placeholder code
$(function() {
    $('[placeholder]').focus(function() {
      var input = $(this);
      if (input.val() == input.attr('placeholder')) {
        input.val('');
        input.removeClass('placeholder');
      }
    }).blur(function() {
      var input = $(this);
      if (input.val() == '' || input.val() == input.attr('placeholder')) {
        input.addClass('placeholder');
        input.val(input.attr('placeholder'));
      }
    }).blur().parents('form').submit(function() {
      $(this).find('[placeholder]').each(function() {
        var input = $(this);
        if (input.val() == input.attr('placeholder')) {
          input.val('');
        }
      })
    });
});

When I now submit the form without changing the placeholders, it uses the placeholders as values.

Can you tell me how to remove all values / placeholders from the textfields when clicking on the submit button? I have seen some solutions here, but it didn’t work with the placeholder attribute.

Here is one of my textfield:

<input class="frmInputLong" name="inptName" type="text" value="" placeholder="Peter Smith">

Here is my form definition:

<form id="frmBook" method="post" action="doSomething" >

Answer 1

Either execute the submit using jQuery’s .submit or add .click handler to the submit button. Inside the function you can do something along the lines of:

$("input").attr("placeholder", "");

This sets the value of the attribute “placeholder” to an empty string.