-1

我不太擅长 jQuery。我必须在下面的代码中显示一个表单，但 jquery（或 Javascript）似乎将代码隐藏起来。

样本输出在http://210.48.94.218/~printabl/products/business-cards/. 如果单击页面中的“CONTINUE”按钮。

<?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>&nbsp;</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>&nbsp;</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>&nbsp;</label><p class="note">To help us fight spam, please type the characters you see below.</p></div>
        <div class="captcha_fix"><label>&nbsp;</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(); ?>
4

3 回答 3

1

代替

jQuery("#file-upload-elem").remove();

和

jQuery("#file-upload-elem").hide();

jQuery.remove()，从 DOM 中完全移除选中的元素

编辑：要在需要时显示元素，请使用

jQuery.show()

IEjQuery("#file-upload-elem").show();

http://jsfiddle.net/MJwFj/2/

虽然当 .remove() 被注释掉表单加载时看起来很粗糙

于 2013-05-28T01:17:07.200 回答
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);
于 2013-05-28T01:18:49.597 回答
1

首先，您可以将 css 角色显示设置为您想要的元素为无

.form{
    display:none;
}

那么你只需要在你想要的事件上显示带有 jQ​​uery .show() 函数的表单，比如点击按钮或其他东西。例如 ：

$(document).ready(function(){
    $('.classOfButton').on('click',function(){
        $('.form').show();
    );
})

更新 如果你想显示页面内的表单已加载，你需要将 javascript 放在页面末尾，或者如果你使用 jQuery，你只需要使用 .ready() 函数并在其中显示表单如有必要，请稍作延迟。

$(document).ready(function(){
    $('.form').show();
})
于 2013-05-28T01:25:04.460 回答