代码之家 › 专栏 › 技术社区 › eMRe

不显示是否为空,如何使用Javascript或jQuery

jquery javascript

eMRe · 技术社区 · 14 年前

问题是如果警告页为空,我不想在它上显示标签和字段。我不能用PHP来完成这项工作,因为表单没有提交。我需要使用jQuery或Javascript。

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.2.custom.min.js"></script>
<script type="text/javascript" src="js/thickbox-compressed.js"></script>

<script type="text/javascript">
            $(function(){
                // jQuery UI Dialog    
                 $('#dialog').dialog({
                    autoOpen: false,
                    width: 400,
                    modal: true,
                    resizable: false,
                    buttons: {
                        "Submit Form": function() {
                            document.testconfirmJQ.submit();
                        },
                        "Cancel": function() {
                            $(this).dialog("close");
                        }
                    }
                });

                $('form#testconfirmJQ').submit(function(){
                    $("p#dialog-email").html($("input#emailJQ").val());
                    $('#dialog').dialog('open');
                    return false;
                });

</script>

</head>

<body>
<form id="testconfirmJQ" name="testconfirmJQ" method="post">
<fieldset>
<label for="email">E-mail:</label>
<input id="emailJQ" type="text" name="emailJQ" value="" />
<input id="submitJQ" name="submitJQ" type="submit" value="Submit" />
</fieldset>
</form>

<div id="dialog">
<p>E-mail</p>
<p id="dialog-email"></p>
</div>


</body>

2 回复 | 直到 14 年前

Lorenzo OnoSendai 14 年前

你真正需要的是验证。

不要重新发明轮子,看看 jQuery Validation

var email = $("input#emailJQ").val();
if (email === "") {
    $('#dialog-email').addClass('hidden');
}

然后可以在样式表中定义一个隐藏类

.hidden {
    display:none;
}

要隐藏“电子邮件”段落标签,则需要为 <p> 标记或更好地用ID将这两个元素包装在块元素中,并将类分配给该元素

eMRe 14 年前

好啊。。。我做完了,现在开始工作了。

-再次编辑-

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.2.custom.min.js"></script>
<script type="text/javascript" src="js/thickbox-compressed.js"></script>

<script type="text/javascript">
            $(function(){
                // jQuery UI Dialog    
                 $('#dialog').dialog({
                    autoOpen: false,
                    width: 400,
                    modal: true,
                    resizable: false,
                    buttons: {
                        "Submit Form": function() {
                            document.testconfirmJQ.submit();
                        },
                        "Cancel": function() {
                            $(this).dialog("close");
                        }
                    }
                });

                $('form#testconfirmJQ').submit(function(){
                    $("p#dialog-email").html($("input#emailJQ").val());

                    if($.trim($("p#dialog-email").val()).length==0)
        {
            $("p#email").hide();
        }
        else
        {
            $("p#email").show();
        }       

                    $('#dialog').dialog('open');

                    return false;
                });

</script>

</head>

<body>
<form id="testconfirmJQ" name="testconfirmJQ" method="post">
<fieldset>
<label for="email">E-mail:</label>
<input id="emailJQ" type="text" name="emailJQ" value="" />
<input id="submitJQ" name="submitJQ" type="submit" value="Submit" />
</fieldset>
</form>

<div id="dialog">
<p id="email">E-mail</p>
<p id="dialog-email"></p>
</div>


</body>