Don't show if it is empty, how to do with Javascript or jQuery_问答_开发者

Don't show if it is empty, how to do with Javascript or jQuery

开发者 https://www.devze.com 2023-01-22 23:55 出处：网络

I am very new to Javascript and jQuery. I managed to make a dialog box with jQuery, it is giving a warning before submitting.

The problem is I don't want to show the label and field on the warning page if it is empty. I can't do this with PHP because form is not submitted. I need to do with jQuery or 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>

What you really need is Validation.

To not reinvent the wheel, have a look jQuery Validation

Edit

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

and then you can define a hidden class in your stylesheet

.hidden {
    display:none;
}

To hide even the "E-mail" paragraph label then you need to assign an id to the <p> tag or better wrap the two in a block element with an ID and assign the class to that element

ok... I am done, it is working now.

Thank you Lorenzo

-edited again-

<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>