忽略 ajax 表单提交上的占位符值答案

【问题标题】：Ignore placeholder values on ajax form submit忽略 ajax 表单提交上的占位符值
【发布时间】：2013-11-14 15:11:17
【问题描述】：

我在 WordPress 插件的设置页面中使用 jQuery ajax 表单插件。在我开始使用 ajax 之前，我有这个脚本将文本输入值与占位符值进行比较，如果它们匹配，则将文本输入值设置为 null。但是现在我使用的是ajax，它不再起作用了。使用 jQuery ajax 表单插件，我可以在 beforeSerialize 函数或 beforeSubmit 函数中传递参数。我认为这需要在 beforeSerialize 中完成。无论如何，我不知道如何使这项工作。这是在我切换到 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('');
         }
     })
 });

这是我当前的 ajax 表单提交脚本：

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'); 
    }
});

关于如何让 ajax 提交（beforeSerialize 或 beforeSend）忽略占位符值的任何想法？上面的第一个脚本是一个非常简单的常规帖子提交解决方案。我希望我能找到与 ajax 一样简单的东西。

更新

我想出了一个基本的方法，但它涉及调用每个具有占位符的文本字段，所以它不像原始脚本那样优雅，但这是功能性的：

$("#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.

而且由于它是一个占位符文本，当 value 属性被移除时，文本实际上并没有消失，所以没有人真的更聪明。我对此并不满意，但它确实有效。如果我有一个更大的表格，这将是行不通的。

接受更好的想法......

【问题讨论】：

标签： forms jquery placeholder

【解决方案1】：

好吧，我玩了很多次，并找到了一种让原始代码与 ajax 提交一起工作的方法。其实很简单。我只需要指定要在其中搜索占位符 attr 的元素。这里是：

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

要跟踪问题，请参阅：

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

【讨论】：