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

时间:2012-03-14 06:51:09

标签: php javascript jquery forms foreach

我有以下脚本名为 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>

2 个答案:

答案 0 :(得分:1)

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

要实际回答您的问题,您可以使用提交事件上的javascript在提交之前过滤表单字段。这样的事情应该让你开始。

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

答案 1 :(得分:0)

HTTP不会发布已禁用的输入。尝试禁用表单提交时的输入,以便它不会发布到服务器。