ansaurus

Question

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

Answer 1

+2 A:

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

Lorenzo 2010-10-31 02:25:35

the problem is i do not want to validate, i just don`t want to show it if it is empty.

baris22 2010-10-31 02:29:58

have a look at my edit if it answer your question even if I am not sure to completely understand your requirement

Lorenzo 2010-10-31 02:41:27

ok. i think i couldn`t explain properly. If email field is empty i don`t want to show <p>E-mail</p> <p id="dialog-email"></p> but i still want to show <div id="dialog"></div Because i have got other stuff to add to the form

baris22 2010-10-31 02:46:25

-i edited last one-

baris22 2010-10-31 02:49:57

Me too.. Hope that I did understand now :)

Lorenzo 2010-10-31 02:55:27

i will try that... this does not work. Any idea why? $('form#testconfirmJQ').submit(function(){ $("p#dialog-email").html($("input#emailJQ").val()); if($.trim($("input#emailJQ").val()).length==0) $("p#email").hide(); $('#dialog').dialog('open'); return false; });

baris22 2010-10-31 03:10:56

stupid me.. it is working now. i did under <div> instead of <p>

baris22 2010-10-31 03:14:34

Ok! great that you've found a solution :)

Lorenzo 2010-10-31 03:24:51

Answer 2

A:

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>

baris22 2010-10-31 03:28:23

ansaurus

tags:

views:

answers:

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

related questions