Question

我有一个表格：

<form class="pure-form pure-form-stacked" method="post" enctype="multipart/form-data">  

    <input type="text" name="name" class="button-size-1"  placeholder="*Name">

    <input type="text" name="email" class="button-size-1"  placeholder="*Email">

    ..
</form>

我使用以下代码将该表单的值发送到PHP文件：

var formData = $('form').serialize();
$.ajax({
    url: "/process.php",
    data: formData,
    type: 'POST',
    success: function(msg){
        console.log(msg);   
    },
});

打印发布的数据时，我发现以下内容而不是实际值：

Array
(
    [name] => *Name
    [email] => *Email
)

有一个可能导致此问题的jQuery代码：

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

如何解决此问题？

Answer 1

请勿将输入的值设置为占位符。可以添加/删除占位符类，但不要更改其值。占位符是当输入中没有任何值时显示的文本，它与该值完全不同。所以做这样的事情：

$('form input').focus(function() {         
    var input = $(this);          
    if (!input.val()) {         
        input.addClass('placeholder');         
    }       
}).blur(function() {          
    var input = $(this);          
    if (!input.val())     {            
        input.removeClass('placeholder');          
    }       
}).blur();

占位符使用序列化和Ajax作为值提交

1 个答案: