Form Hidden by jQuery Code [closed] - php

Question

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 9 years ago.
I'm not very good at jQuery. I have to show a form in the code below, but it seems jquery (or Javascript) keeps the code hidden.
The sample output is inhttp://210.48.94.218/~printabl/products/business-cards/. If you click the "CONTINUE" button in the page.
<?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(); ?>

Answer 1

replace
jQuery("#file-upload-elem").remove();
With
jQuery("#file-upload-elem").hide();
jQuery.remove(), completely removes the selected element from the DOM
EDIT:
To show the element when you need it use
jQuery.show()
i.e jQuery("#file-upload-elem").show();
http://jsfiddle.net/MJwFj/2/
although it looks very rough when .remove() has been commented out the form loads

Answer 2

uploaderBox.hide();
The code above will hide the following, the above code is safe to remove if you don't want this to happen:
<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>
It's not clear exactly which element is being hidden but there is also a timer that triggers after 3 seconds to hide another element. Try removing the following also:
timer = setTimeout(function() { myBox.hide(); },3000);

Answer 3

The first, you may set the css role display to the element you wanted to as none
.form{
display:none;
}
then you just need to show the form with jQuery .show() function on event you wanted to, such button clicked or something else. For example :
$(document).ready(function(){
$('.classOfButton').on('click',function(){
$('.form').show();
);
})
Update
if you wanted to show the form within the page are loaded, you need to put the javascript in the end of page, or if you use jQuery you just need to use .ready() function and inside of it you show up the form with some delay if necessary.
$(document).ready(function(){
$('.form').show();
})