Ignore placeholder values on ajax form submit

Question

I'm using the jQuery ajax form plugin in my WordPress plugin's settings page. Before I started using ajax, I had this script that compared text input values to placeholder values, and if they matched, set the text input value to null. But it no longer works now that I'm using ajax. With the jQuery ajax form plugin, I can pass arguments in a beforeSerialize function, or in a beforeSubmit function. I think it would need to be done in the beforeSerialize. Anyway, I'm not sure how to make this work. Here is the script that was working before I switched to ajax:

 $('[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('ssfa-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('');
         }
     })
 });

And here is my current script for the ajax form submit:

var svn = $("#ssfa-saving"),
bck = $("#ssfa-saving-backdrop"),
svd = $("#ssfa-settings-saved");

$("#ssfa-form").ajaxForm({
    beforeSend: function() {
        svn.fadeIn('slow');
        bck.fadeIn('fast');
    },
    success: function(){ 
        svn.fadeOut('slow');
        svd.delay(1000).fadeIn('slow').delay( 2500 ).fadeOut('slow');
        bck.delay( 4500 ).fadeOut('slow'); 
    }
});

Any ideas on how I can get the ajax submit (either beforeSerialize or beforeSend ) to ignore placeholder values? This first script above was a really simple solution for regular post submit. I'm hoping I can find something just as simple for ajax.

UPDATE

I worked out a basic way of doing it but it involves calling each text field that has a placeholder, so it's not exactly elegant like the original script, but this is functional:

$("#ssfa-form").ajaxForm({
    beforeSerialize: function() {
        var permex = $('input#exclusions');
        $('input[id^=bs]').each(function(){
            var bs = $(this);
            if (bs.val() === 'Display Name')
                bs.removeAttr('value');
        });
        $('input[id^=custom_]').each(function(){
            var cs = $(this);
            if (cs.val() === 'classname1|Display Name 1, classname2|Display Name 2')
                cs.removeAttr('value');
        });
        if (permex.val() === '.avi, My Embarrasing Photograph, .tif')
            permex.removeAttr('value');
    },

    beforeSend: function() {

    etc.

And since it's a placeholder text, the text doesn't actually disappear when the value attribute is removed, so no one is really the wiser. I'm not over the moon with this, but it works. If I had a much larger form, this wouldn't be workable.

Open to better ideas....

Answer 1

Well, I played around with it quite a bit more and found a way to get the original code to work with ajax submit. It's quite simple actually. I just had to specify the element within which to search for the placeholder attr. Here it is:

        beforeSerialize: function() {
            $("#ssfa-form").find('[placeholder]').each(function() {
                var input = $(this);
                if (input.val() == input.attr('placeholder')) {
                    input.val('');
                }
            })
        },
        etc.

To track the issue, see:

https://github.com/mathiasbynens/jquery-placeholder/issues/30 https://github.com/mathiasbynens/jquery-placeholder/issues/197