我不是很擅长jQuery。我必须在下面的代码中显示一个表单，但似乎jquery（或Javascript）保持代码隐藏。
示例输出位于http://210.48.94.218/~printabl/products/business-cards/。如果单击页面中的“继续”按钮。
<?php
/**
* Template Name: Contact Page
*
* Description: Twenty Twelve loves the no-sidebar look as much as
* you do. Use this page template to remove the sidebar from any page.
*
* Tip: to remove the sidebar from all posts and pages simply remove
* any active widgets from the Main Sidebar area, and the sidebar will
* disappear everywhere.
*
* @package WordPress
* @subpackage Twenty_Twelve
* @since Twenty Twelve 1.0
*/
get_header(); ?>
<div id="primary" class="site-content">
<div id="content" role="main">
<script type="text/javascript">
var x1 = 5;
var x2 = 10;
var value = x1 * x2;
var list_value = 1;
var size, fold, back, front, qlnt, qlt, tprice;
</script>
<div id="jdModal">
<div id="jdModalContent" style="padding:10px;background:#fff;">
<form id="product_form" action="<?php echo site_url(); ?>/wp-content/themes/ecs/formHandler.php" target="formFrame" method="post" enctype="multipart/form-data">
<input type="hidden" name="size" value="0" />
<input type="hidden" name="fold" value="0" />
<input type="hidden" name="back" value="0" />
<input type="hidden" name="front" value="0" />
<input type="hidden" name="qlnt" value="0" />
<input type="hidden" name="qlt" value="0" />
<input type="hidden" name="tprice" value="0" />
<input type="hidden" name="productName" value="Business Card" />
<h2>CONTACT US</h2>
<div><label>Business Name*</label><input type="text" name="businessName" value="" /></div>
<div><label>Your Name*</label><input type="text" name="yourName" value="" /></div>
<div><label>Email*</label><input type="text" name="yourEmail" value="" /></div>
<div><label>Phone*</label><input type="text" name="yourPhone" value="" /></div>
<div><label>Delivery Region*</label><input type="text" name="deliveryRegion" value="Christchurch" /></div>
<div><label>Employees</label><input type="text" name="employees" value="1-5 staff members in my business" /></div>
<div><label> </label><p class="note">If required please upload your files here (2 MB max).</p></div>
<div style="position:relative"><label>Upload file</label><input type="hidden" value="" id="jd_upload_uri_1" name="jd_upload_uri_1" /><input type="text" class="jd_upload_filename" name="jd_upload_file_1" readonly="readonly" /><input type="button" class="jd_upload" id="jd_upfile_1"value="Browse ..." />
</div>
<div style="position:relative"><label>Upload file</label><input type="hidden" value="" id="jd_upload_uri_2" name="jd_upload_uri_2" /><input type="text" class="jd_upload_filename" name="jd_upload_file_2" readonly="readonly" /><input type="button" class="jd_upload" id="jd_upfile_2" value="Browse ..." />
</div>
<div style="position:relative"><label>Upload file</label><input type="hidden" value="" id="jd_upload_uri_3" name="jd_upload_uri_3" /><input type="text" class="jd_upload_filename" name="jd_upload_file_3" readonly="readonly" /><input type="button" class="jd_upload" id="jd_upfile_3" value="Browse ..." />
</div>
<div><label>Message</label><textarea name="msg"></textarea></div>
<div><label>I'm also interested in</label><p><input type="checkbox" name="interests[]" value="Business Cards" /><span>Business Cards</span><input type="checkbox" name="interests[]" value="Flyer" /><span>Flyer</span></p></div>
<div style="margin-bottom:15px"><label> </label><p><input type="checkbox" name="interests[]" value="Booklets" /><span>Booklets</span><input type="checkbox" name="interests[]" value="Postcards" /><span>Postcards</span></p></div>
<div><label> </label><p class="note">To help us fight spam, please type the characters you see below.</p></div>
<div class="captcha_fix"><label> </label><p style="text-align:right"><input type="submit" value=" " name="productOrderForm" class="submit-product" /><input type="text" name="jd_captcha" class="jd_captcha" value="" maxlength="6" /><img src="<?php echo site_url(); ?>/wp-content/themes/ecs/formHandler.php?captcha" class="jd_captcha_img" /></p></div><div id="jd_msg_box"><p class="text"></p></div>
<div style="clear:both"></div>
</form>
</div>
</div>
<iframe name="formFrame" id="formFrame" src="<?php echo site_url(); ?>/wp-content/themes/ecs/formHandler.php?load"></iframe>
<div id="file-upload-elem">
<form id="upload_form_1" class="uploader-box uploader-box-1" action="<?php echo site_url(); ?>/wp-content/themes/ecs/formHandler.php" target="formFrame" method="post" enctype="multipart/form-data"><input type="file" name="upload_file_1" class="inp-file" id="upload_file_1" /></form>
<form id="upload_form_2" class="uploader-box uploader-box-2" action="<?php echo site_url(); ?>/wp-content/themes/ecs/formHandler.php" target="formFrame" method="post" enctype="multipart/form-data"><input type="file" name="upload_file_2" class="inp-file" id="upload_file_2" /></form>
<form id="upload_form_3" class="uploader-box uploader-box-3" action="<?php echo site_url(); ?>/wp-content/themes/ecs/formHandler.php" target="formFrame" method="post" enctype="multipart/form-data"><input type="file" name="upload_file_3" class="inp-file" id="upload_file_3" /></form>
</div>
<script type="text/javascript">
var fileUploadElem = jQuery("#file-upload-elem").html();
jQuery("#file-upload-elem").remove();
var insertUpload, jd_error, jd_success, upload_error, jd_show_msg, invalid_captcha;
var isCustomQuote = false;
jQuery(function() {
console.log("Test");
if(jQuery("#customs").length > 0 || jQuery("#frprice").length > 0) {
jQuery("body").append(fileUploadElem);
var calculate = function() {
if(jQuery("#frprice").length > 0) {
size = (jQuery("#foldet").val()).split(":");
fold = (jQuery("#fold").val()).split(":");
back = (jQuery("#black").val()).split(":");
front = (jQuery("#front").val()).split(":");
qlnt = jQuery("#qlnt").val();
qlt = jQuery("#qlt").val();
var str = parseInt(size[0])+parseInt(fold[0])+parseInt(back[0])+parseInt(front[0])+parseInt(qlnt)+parseInt(qlt);
tprice = parseInt(str);
jQuery("h3#price span").text(tprice);
}
};
var jd_timer;
var upload_on_progress = 0;
jd_error = function(errCode) {
clearTimeout(jd_timer);
if(errCode == 0) {
jd_show_msg("Please fill all required fields (*)");
}
if(errCode == 1) {
jd_show_msg("Invalid Email Address.");
}
if(errCode == 2) {
//jd_show_msg("Invalid Email Address.");
alert("Form sending failed. Please try again later");
}
if(errCode == 3) {
alert("Invalid Action. Please Contact Administrator.");
}
};
invalid_captcha = function(x) {
if(x == 0) {
alert("Please Enter Verification Code.");
} else {
alert("Invalid Verification Code. Try Again.");
jQuery(".jd_captcha_img").each(function() {
jQuery(this).attr('src', jQuery(this).attr('src')+'&x='+Math.random());
});
}
jQuery(".jd_captcha").val("");
};
jd_success = function() {
setTimeout(function() { window.location = document.URL+"?thank-you"; },2000);
};
upload_error = function(err,uid) {
upload_on_progress--;
jQuery("input[name=jd_upload_file_"+uid+"]").val("");
alert(err);
};
insertUpload = function(data,file) {
upload_on_progress--;
var tmpData = data.split(':');
if(tmpData.length == 3) {
var tmpCounter = 0;
jQuery("input[name=jd_upload_file_"+tmpData[2]+"]").val(file);
var updateInput = jQuery("#jd_upload_uri_"+tmpData[2]);
var updateData = tmpData[0] + ":" + tmpData[1];
updateInput.val(updateData);
} else {
alert("Uploading File Error. Please Try Again Later");
}
};
jd_show_msg = function(err) {
var myBox = jQuery("#jd_msg_box");
myBox.children(".text").text(err);
timer = setTimeout(function() { myBox.hide(); },3000);
myBox.show();
};
jQuery("select").change(calculate);
jQuery("#price").click(function(){
jQuery(this).hide();
});
jQuery(".jd_upload:eq(0), .jd_upload_filename:eq(0)").css("opacity",1);
jQuery(".file_input_hidden:eq(0)").show();
var jdModal = jQuery('#jdModal').html();
jQuery('#jdModal').remove();
var uploaderBox = jQuery(".uploader-box");
jQuery(".inp-file").click(function(e) {
if(upload_on_progress > 0) {
e.preventDefault();
alert("Prevented");
}
});
var cboxTopCache = 0;
var cboxLeftCache = 0;
var fixFileWin = function() {
var fixLeft = 585;
var cboxOffset = jQuery("#colorbox").offset();
cboxLeftCache = cboxOffset.left;
cboxTopCache = jQuery("#jd_upfile_1").offset().top;
jQuery(".uploader-box-1").css("top", (jQuery("#jd_upfile_1").offset().top) + "px");
jQuery(".uploader-box-2").css("top",(jQuery("#jd_upfile_2").offset().top) + "px");
jQuery(".uploader-box-3").css("top",(jQuery("#jd_upfile_3").offset().top) + "px");
uploaderBox.css("left",(cboxLeftCache+fixLeft) + "px");
};
jQuery(window).resize(function() {
var cboxOffset = jQuery("#colorbox").offset().left;
var cboxOffset2 = jQuery("#jd_upfile_1").offset().top;
if(cboxOffset != cboxLeftCache || cboxOffset2 != cboxTopCache) {
fixFileWin();
}
});
var formOnClick = function(e) {
e.preventDefault();
isCustomQuote = (jQuery(this).attr('id') == 'frprice')?false:true;
jQuery.colorbox({html:jdModal,opacity:0.8,overlayClose:false,transition:'none', onComplete: function() {
fixFileWin();
uploaderBox.show();
jQuery(".inp-file").change(function() {
var _this = jQuery(this);
if(_this.val() != "") {
if(upload_on_progress > 0) {
alert("Upload is still in progress. Please wait.");
} else {
jQuery("input[name=jd_"+_this.attr("id")+"]").val("Uploading File.. Please Wait..");
_this.parent().submit();
upload_on_progress++;
}
}
});
if(!isCustomQuote) {
jQuery("#product_form input[name=size]").val(size[1]);
jQuery("#product_form input[name=fold]").val(fold[1]);
jQuery("#product_form input[name=back]").val(back[1]);
jQuery("#product_form input[name=front]").val(front[1]);
jQuery("#product_form input[name=qlnt]").val(qlnt);
jQuery("#product_form input[name=qlt]").val(qlt);
jQuery("#product_form input[name=tprice]").val(tprice);
}
jQuery("#colorbox #product_form").submit(function(e) {
var tmp_progress = upload_on_progress;
if(tmp_progress > 0) {
e.preventDefault();
alert("Upload in progress. Please wait.");
}
});
}, onClosed: function() {
uploaderBox.hide();
}});
};
jQuery("#frprice").submit(formOnClick);
jQuery("#customs").click(formOnClick);
if(!isCustomQuote) {
calculate();
}
}
});
</script>
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'content', 'page' ); ?>
<?php endwhile; // end of the loop. ?>
</div><!-- #content -->
</div><!-- #primary -->
<?php get_sidebar('right'); ?>
<?php get_footer(); ?>
答案 0 :(得分：1)
替换
jQuery("#file-upload-elem").remove();
用
jQuery("#file-upload-elem").hide();
jQuery.remove（），从DOM中完全删除所选元素
编辑： 要在需要时显示元素，请使用
jQuery.show（）
即jQuery("#file-upload-elem").show();
<强> http://jsfiddle.net/MJwFj/2/
虽然当.remove（）被注释掉表格时看起来非常粗糙
答案 1 :(得分：1)
uploaderBox.hide();
上面的代码会隐藏以下内容，如果您不希望发生这种情况，可以安全删除上面的代码：
<form id="upload_form_1" class="uploader-box uploader-box-1" action="<?php echo site_url(); ?>/wp-content/themes/ecs/formHandler.php" target="formFrame" method="post" enctype="multipart/form-data"><input type="file" name="upload_file_1" class="inp-file" id="upload_file_1" /></form>
<form id="upload_form_2" class="uploader-box uploader-box-2" action="<?php echo site_url(); ?>/wp-content/themes/ecs/formHandler.php" target="formFrame" method="post" enctype="multipart/form-data"><input type="file" name="upload_file_2" class="inp-file" id="upload_file_2" /></form>
<form id="upload_form_3" class="uploader-box uploader-box-3" action="<?php echo site_url(); ?>/wp-content/themes/ecs/formHandler.php" target="formFrame" method="post" enctype="multipart/form-data"><input type="file" name="upload_file_3" class="inp-file" id="upload_file_3" /></form>
目前尚不清楚究竟隐藏了哪个元素，但还有一个计时器在3秒后触发隐藏另一个元素。请尝试删除以下内容：
timer = setTimeout(function() { myBox.hide(); },3000);
答案 2 :(得分：1)
首先，您可以将css角色显示设置为您想要的元素
.form{
display:none;
}
然后你只需要在你想要的事件上显示带有jQuery .show（）函数的表单，点击这样的按钮或其他东西。例如：
$(document).ready(function(){
$('.classOfButton').on('click',function(){
$('.form').show();
);
})
<强>更新 如果你想显示页面中的表单已加载，你需要将javascript放在页面的末尾，或者如果你使用jQuery你只需要使用.ready（）函数，并在其中显示表单如有必要，可能会有所延误。
$(document).ready(function(){
$('.form').show();
})