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

【问题标题】：PHP Script to Ignore Placeholder Text in Input Fields忽略输入字段中的占位符文本的 PHP 脚本
【发布时间】：2012-03-30 15:08:38
【问题描述】：

我有一个名为 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>

【问题讨论】：

标签： php javascript jquery forms foreach

【解决方案1】：

此问题是您不应使用占位符文本填充表单字段的 value 属性的众多原因之一。如果您想要占位符文本，我建议您查看some javascript to overlay label 元素或查看HTML5 placeholder attribute。

不过，要真正回答您的问题，您可以使用 javascript on submit 事件在提交之前过滤表单字段。这样的事情应该可以帮助您入门。

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

【讨论】：

非常感谢您的回复。你能确认我应该把它放在我的 javascript 代码中的什么位置吗？
在您问题的代码中，您可以将其放在jQuery(function($){ 行的正上方。
我的新代码：pastebin.com/BYvX7eZh 但是，它仍然在我的 $all 变量中输出占位符文本。
找到了一个潜在的解决方案：lab.dotjay.co.uk/experiments/forms/input-placeholder-text/… 敬请期待:-)
是的。以上工作。我会尽快发布我的调整。感谢大家的耐心等待：D

【解决方案2】：

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

【讨论】：

感谢您的回答。您是否有机会提供一个代码示例（使用我的代码）来说明您的答案？我不完全确定从哪里开始。谢谢你:)