Don't show if it is empty, how to do with Javascript or jQuery
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>
加载中,请稍侯......
精彩评论