忽略输入字段中占位符文本的PHP脚本


PHP Script to Ignore Placeholder Text in Input Fields

我有一个名为form.php的脚本:http://pastebin.com/kHiZ3gLY(我在下面粘贴了完整的脚本)

当我完成第一组4个字段(剩下其他2个字段的占位符文本)并提交时,我的var_dump输出为:

string '1|1|1|1
Height (cm)|Width (cm)|Length (cm)|Weight (kg)
Height (cm)|Width (cm)|Length (cm)|
' (length=133)

我是否可以使用PHP/jQuery来"忽略"包含占位符文本的字段?所以我的输出就是:

string '1|1|1|1' (length=7)

非常感谢这里的任何帮助者。

完整脚本:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>March 2012 Experiment</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script src="http://digitalbush.com/files/jquery/watermarkinput/beta1/jquery.watermarkinput.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function($){
   $("#p1height").Watermark("Height (cm)");
   $("#p1width").Watermark("Width (cm)");
   $("#p1length").Watermark("Length (cm)");
   $("#p1weight").Watermark("Weight (kg)");
   $("#p2height").Watermark("Height (cm)");
   $("#p2width").Watermark("Width (cm)");
   $("#p2length").Watermark("Length (cm)");
   $("#p2weight").Watermark("Weight (kg)");
   $("#p3height").Watermark("Height (cm)");
   $("#p3width").Watermark("Width (cm)");
   $("#p3length").Watermark("Length (cm)");
   $("#p3weight").Watermark("Weight (kg)");
});
</script>

</head>
<body>
<?php
$errors = '';
if (isset($_POST['submitform'])) {
    $ierrors = array();
    $all = '';
    // Loop over the values 1 through 3
    foreach( range( 1, 3) as $i)
    {
        // Create an array that stores all of the values for the current number
        $values = array( 
            'p' . $i . 'height' => $_POST['p' . $i . 'height'], 
            'p' . $i . 'width' => $_POST['p' . $i . 'width'], 
            'p' . $i . 'length' => $_POST['p' . $i . 'length'], 
            'p' . $i . 'weight' => $_POST['p' . $i . 'weight']
        );
        // Validate every value
        foreach( $values as $key => $value)
        {
            if( empty( $value))
            {
                $ierrors[] = "Value $key is not set";
            }
            // You can add more validation in here, such as:
            if( !is_numeric( $value))
            {
                $ierrors[] = "Value $key contains an invalid value '$value'";
            }
        }
        // Join all of the values together to produce the desired output
        $all .= implode( '|', $values) . "'n'n";
    }   
    var_dump($all);
}
?>
<form action="form.php" method="post">
    <input type="text" id="p1weight" name="p1weight" value="" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" /> 
    <input type="text" id="p1length" name="p1length" value="" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" /> 
    <input type="text" id="p1width" name="p1width" value=""  onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" /> 
    <input type="text" id="p1height" name="p1height" value="" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" /> 
    <p>&nbsp;</p>
    <input type="text" id="p2weight" name="p2weight" value="" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" /> 
    <input type="text" id="p2length" name="p2length" value="" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" /> 
    <input type="text" id="p2width" name="p2width" value="" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" /> 
    <input type="text" id="p2height" name="p2height" value="" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" /> 
    <p>&nbsp;</p>
    <input type="text" id="p3weight" name="p3weight" value="" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" /> 
    <input type="text" value="" id="p3length" name="p3length" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" /> 
    <input type="text" value="" id="p3width" name="p3width" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" /> 
    <input type="text" id="p3height" name="p3height" value="" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" />
    <p>&nbsp;</p>
    <input type="submit" name="submitform" id="submitform" />
</form>
</body>
</html>

这个问题是不应该用占位符文本填充表单字段的值属性的众多原因之一。如果你想要占位符文本,我建议你要么查看一些javascript来覆盖标签元素,要么查看HTML5占位符属性。

不过,为了真正回答您的问题,您可以在提交之前使用javascript on submit事件来过滤表单字段。这样的事情应该让你开始。

$(function(){
    $('form').submit(function(){
        $('input[type=text]', this).each(function(){
            if (this.value == this.defaultValue) this.value = '';
        });
    });
});

HTTP不会发布禁用的输入。尝试禁用表单提交时的输入,这样它就不会被发布到服务器。